Vue关于双向绑定和单向数据流的理解

很多接触Vue开发不久的同学会有疑问，vue既然是单向数据流为什么会有双向绑定一说？

关于Vue数据绑定首先引用官网原话：

AngularJS 使用双向绑定，Vue 在不同组件间强制使用单向数据流。这使应用中的数据流更加清晰易懂。

官网已经说的很清楚了，在Vue中使用的是单向数据流，我们由此可以确定，Vue中的所谓的双向绑定并不是真正的双向绑定。

要想理解Vue中的所谓双向绑定首先要先弄清楚其实现原理。

例子：实现如下双向绑定的效果：

要想让上面的用户名和手机号和下面的用户名和手机号保持联动，我们首先想到的就是v-model指令。

我们先创建一个局部组件PersonalInfo.vue，并引入

<personal-info v-model="username" :phone="phone" @update:phone="val=>(phone=val)"></personal-info>

由于v-model一次只能绑定一个prop,其它的prop属性如果也要实现双向绑定的效果，我们可以使用Vue自定义事件中提供的update:myPropName的方式。

PersonalInfo.vue源码如下：

        {template: `<div>用户名：<input :value="username" type="text" placeholder="用户名"     @input="handleUsernameChange" /><br/>手机号：<input :value="phone" type="number" placeholder="手机号" @input="handlePhoneChange" /><br/></div>`,name: "PersonalInfo",props: {username: String,phone: String,},methods: {handleUsernameChange(e) {this.$emit("input", e.target.value);},handlePhoneChange(e) {this.$emit("update:phone", e.target.value);}}}

下面我们试一下v-model的其它实现方式

<personal-info :username="username" @change="val=>(username=val)" :phone="phone" @update:phone="val=>(phone=val)"></personal-info>

v-model其实就是v-bind:propName加自定义事件的缩写。

此时PersonalInfo.vue需要修改为：

        {template: `<div>用户名：<input :value="username" type="text" placeholder="用户名" @input="handleUsernameChange" /><br/>手机号：<input :value="phone" type="number" placeholder="手机号" @input="handlePhoneChange" /><br/></div>`,name: "PersonalInfo",model: {prop: 'username',event: 'change'},props: {username: String,phone: String,},methods: {handleUsernameChange(e) {this.$emit("change", e.target.value);},handlePhoneChange(e) {this.$emit("update:phone", e.target.value);}}}

当输入框输入内容时会触发对应的事件回调函数，在回调函数中会再次触发父组件传递的自定事件并传值给父组件，最后在父组件回调函数中更改了Model中定义的值。

至此我们可以发现Vue中的双向绑定效果并不是真正的双向绑定，真正的双向绑定是Model<-->View，而例子中最终其实是在父组件自定义事件中重新对prop属性赋值，所以说到底我们还是通过改变Model才导致了View的更新。

Vue关于双向绑定和单向数据流的理解相关推荐

vue radio双向绑定_Vue 双向绑定
Vue 双向绑定 MVC模式以往的MVC模式是单向绑定,即Model绑定到View,当我们用JavaScript代码更新Model时,View就会自动更新 MVVM模式 MVVM模式就是Model– ...
Vue.js双向绑定的实现原理
Vue.js 最核心的功能有两个,一是响应式的数据绑定系统,二是组件系统.本文仅探究双向绑定是怎样实现的.先讲涉及的知识点,再用简化得不能再简化的代码实现一个简单的 hello world 示例. 一 ...
小猿圈解析vue数据双向绑定的缺点
vue是当今前端很流行的一种框架,但是vue也是有一定的缺陷的,你有过了解吗?下面小猿圈web前端老师就为你解析一下vue数据双向绑定的缺陷,希望对你有所帮助,下面我们一起了解一下吧. 1.vue 实 ...
Vue Angular 双向绑定检测不到对象属性的添加和删除
由于ES5的限制 Vue && Angular 双向绑定检测不到对象属性的添加和删除还有数组增加索引.这些改变不会触发change事件.Vue是因为实例化的时候已经把各个属性都s ...
西安电话面试：谈谈Vue数据双向绑定原理，看看你的回答能打几分
最近我参加了一次来自西安的电话面试(第二轮,技术面),是大厂还是小作坊我在这里按下不表,先来说说这次电面给我留下印象较深的几道面试题,这次先来谈谈Vue的数据双向绑定原理. 情景再现: 当我手机铃声响 ...
vue的双向绑定原理及实现
前言使用vue也好有一段时间了,虽然对其双向绑定原理也有了解个大概,但也没好好探究下其原理实现,所以这次特意花了几晚时间查阅资料和阅读相关源码,自己也实现一个简单版vue的双向绑定版本,先上个成果图 ...
“约见”面试官系列之常见面试题第九篇vue实现双向绑定原理（建议收藏）
目录 1.原理 2.实现在目前的前端面试中,vue的双向数据绑定已经成为了一个非常容易考到的点,即使不能当场写出来,至少也要能说出原理.本篇文章中我将会仿照vue写一个双向数据绑定的实例,名字就叫m ...
vue.js踩坑之单向数据流
vue.js父子组件之间的数据通信,细节总结隐性规则:单行数据流学前疑问: 1.父组件如何向子组件通信数据? 2.父组件可以直接修改子组件的数据!但是反过来绝对不可以!那怎么解决这个问题呢? 3. ...
vue数据双向绑定的原理
vue数据双向绑定的原理一复习闭包 1 闭包含义: 当函数嵌套时,内部函数使用了外部函数的变量,就会产生闭包当函数可以记住并访问自己的作用域时,就会产生闭包 2 闭包注意点 ① 队列里的代码执行 ...

Vue关于双向绑定和单向数据流的理解

Vue关于双向绑定和单向数据流的理解相关推荐

最新文章

热门文章