好资源导航 » 文章资讯 » Vue 的双向绑定原理与用法揭秘

Vue 的双向绑定原理与用法揭秘

2023-07-25 18:52:13 76

本文实例讲述了Vue的双向绑定原理与用法。分享给大家供大家参考，具体如下：

Vue中需要输入什么内容的时候，自然会想到使用的方式来实现双向绑定。下面是一个最简单的示例


What'syourname:

Hello{{name}}

newVue({
el:"#app",
data:{
name:""
}
});

在这个示例的输入框中输入的内容，会随后呈现出来。这是Vue原生对的良好支持，也是一个父组件和子组件之间进行双向数据传递的典型示例。不过v-model是Vue2.2.0才加入的一个新功能，在此之前，Vue只支持单向数据流。

Vue的单向数据流

Vue的单向数据流和React相似，父组件可以通过设置子组件的属性（Props）来向子组件传递数据，而父组件想获得子组件的数据，得向子组件注册事件，在子组件高兴的时候触发这个事件把数据传递出来。一句话总结起来就是，Props向下传递数据，事件向上传递数据。

上面那个例子，如果不使用v-model，它应该是这样的

由于事件处理写成了内联模式，所以脚本部分不需要修改。但是多数情况下，事件一般都会定义成一个方法，代码就会复杂得多

newVue({
//....
methods:{
updateName(e){
this.name=e.target.value;
}
}
})

从上面的示例来看v-model节约了不少代码，最重要的是可以少定义一个事件处理函数。所以v-model实际干的事件包括

使用v-bind（即:）单向绑定一个属性（示例：:value="name"）
绑定input事件（即@input）到一个默认实现的事件处理函数（示例：@input=updateName
这个默认的事件处理函数会根据事件对象带入的值来修改被绑定的数据（示例：this.name=e.target.value）

自定义组件的v-model

Vue对原生组件进行了封装，所以在输入的时候会触发input事件。但是自定义组件应该怎么呢？这里不妨借助JsFiddleVue样板的TodoList示例。

JsFiddle的Vue样板

点击JsFilddle的Logo，在上面弹出面板中选择Vue样板即可

样板代码包含HTML和Vue(js)两个部分，代码如下：


Todos:






{{todo.text}}


{{todo.text}}

newVue({
el:"#app",
data:{
todos:[
{text:"LearnJavaScript",done:false},
{text:"LearnVue",done:false},
{text:"PlayaroundinJSFiddle",done:true},
{text:"Buildsomethingawesome",done:true}
]
},
methods:{
toggle:function(todo){
todo.done=!todo.done
}
}
})

定义Todo组件

JsFiddle的Vue模板默认实现一个Todo列表的展示，数据是固定的，所有内容在一个模板中完成。我们首先要做事情是把单个Todo改成一个子组件。因为在JsFiddle中不能写成多文件的形式，所以组件使用Vue.component()在脚本中定义，主要是把

内容中的那部分拎出来：

Vue.component("todo",{
template:`



{{text}}


{{text}}


`,
props:["text","done"],
data(){
return{
isDone:this.done
};
},
methods:{
toggle(){
this.isDone=!this.isDone;
}
}
});

原来定义在App中的toggle()方法也稍作改动，定义在组件内了。toggle()调用的时候会修改表示是否完成的done的值。但由于done是定义在props中的属性，不能直接赋值，所以采用了官方推荐的第一种方法，定义一个数据isDone，初始化为this.done，并在组件内使用isDone来控制是否完成这一状态。

相应的App部分的模板和代码精减了不少：


Todos:

newVue({
el:"#app",
data:{
todos:[
{text:"LearnJavaScript",done:false},
{text:"LearnVue",done:false},
{text:"PlayaroundinJSFiddle",done:true},
{text:"Buildsomethingawesome",done:true}
]
}
});

不过到此为止，数据仍然是单向的。从效果上来看，点击复选框可以反馈出删除线线效果，但这些动态变化都是在todo组件内部完成的，不存在数据绑定的问题。

为TodoList添加计数

为了让todo组件内部的状态变化能在TodoList中呈现出来，我们在TodoList中添加计数，展示已经完成的Todo数量。因为这个数量受todo组件内部状态（数据）的影响，这就需要将todo内部数据变化反应到其父组件中，这才有v-model的用武之地。

这个数量我们在标题中以n/m的形式呈现，比如2/4表示一共4条Todo，已经完成2条。这需要对TodoList的模板和代码部分进行修改，添加countDone和count两个计算属性：


Todos({{countDone}}/{{count}}):

newVue({
//...
computed:{
count(){
returnthis.todos.length;
},
countDone(){
returnthis.todos.filter(todo=>todo.done).length;
}
}
});

现在计数呈现出来了，但是现在改变任务状态并不会对这个计数产生影响。我们要让子组件的变动对父组件的数据产生影响。v-model待会儿再说，先用最常见的方法，事件：

子组件todo在toggle()中触发toggle事件并将isDone作为事件参数
父组件为子组件的toggle事件定义事件处理函数

Vue.component("todo",{
//...
methods:{
toggle(e){
this.isDone=!this.isDone;
this.$emit("toggle",this.isDone);
}
}
});

这里为@toggle绑定的是一个表达式。因为这里的todo是一个临时变量，如果在methods中定义专门的事件处理函数很难将这个临时变量绑定过去（当然定义普通方法通过调用的形式是可以实现的）。

事件处理函数，一般直接对应于要处理的事情，比如定义onToggle(e)，绑定为@toggle="onToggle"。这种情况下不能传入todo作为参数。
普通方法，可以定义成toggle(todo,e)，在事件定义中以函数调用表达式的形式调用：@toggle="toggle(todo,$event)"。它和todo.done=$event`同属表达式。

注意二者的区别，前者是绑定的处理函数（引用），后者是绑定的表达式（调用）

现在通过事件方式已经达到了预期效果

改造成v-model

之前我们说了要用v-model实现的，现在来改造一下。注意实现v-model的几个要素

子组件通过value属性（Prop）接受输入
子组件通过触发input事件输出，带数组参数
父组件中用v-model绑定

Vue.component("todo",{
//...
props:["text","value"],//<--注意done改成了value
data(){
return{
isDone:this.value//<--注意this.done改成了this.value
};
},
methods:{
toggle(e){
this.isDone=!this.isDone;
this.$emit("input",this.isDone);//<--注意事件名称变了
}
}
});

.sync实现其它数据绑定

前面讲到了Vue2.2.0引入v-model特性。由于某些原因，它的输入属性是value，但输出事件叫input。v-model、value、input这三个名称从字面上看不到半点关系。虽然这看起来有点奇葩，但这不是重点，重点是一个控件只能双向绑定一个属性吗？

Vue2.3.0引入了.sync修饰语用于修饰v-bind（即:），使之成为双向绑定。这同样是语法糖，添加了.sync修饰的数据绑定会像v-model一样自动注册事件处理函数来对被绑定的数据进行赋值。这种方式同样要求子组件触发特定的事件。不过这个事件的名称好歹和绑定属性名有点关系，是在绑定属性名前添加update:前缀。

比如将子组件的some属性与父组件的any数据绑定起来，子组件中需要通过$emit("update:some",value)来触发变更。

上面的示例中，使用v-model绑定始终感觉有点别扭，因为v-model的字面意义是双向绑定一个数值，而表示是否未完成的done其实是一个状态，而不是一个数值。所以我们再次对其进行修改，仍然使用done这个属性名称（而不是value），通过.sync来实现双向绑定。

Vue.component("todo",{
//...
props:["text","done"],//<--恢复成done
data(){
return{
isDone:this.done//<--恢复成done
};
},
methods:{
toggle(e){
this.isDone=!this.isDone;
this.$emit("update:done",this.isDone);//<--事件名称：update:done
}
}
});

揭密Vue双向绑定

通过上面的讲述，我想大家应该已经明白了Vue的双向绑定其实就是普通单向绑定和事件组合来完成的，只不过通过v-model和.sync注册了默认的处理函数来更新数据。Vue源码中有这么一段

//@file:src/compiler/parser/index.js

if(modifiers.sync){
addHandler(
el,
`update:${camelize(name)}`,
genAssignmentCode(value,`$event`)
)
}

从这段代码可以看出来，.sync双向绑定的时候，编译器会添加一个update:${camelize(name)}的事件处理函数来对数据进行赋值（genAssignmentCode的字面意思是生成赋值的代码）。

展望

目前Vue的双向绑定还需要通过触发事件来实现数据回传。这和很多所的期望的赋值回传还是有一定的差距。造成这一差距的主要原因有两个

需要通过事件回传数据
属性（prop）不可赋值

在现在的Vue版本中，可以通过定义计算属性来实现简化，比如

computed:{
isDone:{
get(){
returnthis.done;
},
set(value){
this.$emit("update:done",value);
}
}
}

说实在的，要多定义一个意义相同名称不同的变量名也是挺费脑筋的。希望Vue在将来的版本中可以通过一定的技术手段减化这一过程，比如为属性（Prop）声明添加sync选项，只要声明sync:true的都可以直接赋值并自动触发update:xxx事件。

当然作为一个框架，在解决一个问题的时候，还要考虑对其它特性的影响，以及框架的扩展性等问题，所以最终双向绑定会演进成什么样子，我们对Vue3.0拭目以待。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家vue.js程序设计有所帮助。

返回顶部
514930285
czq8825@qq.com

Vue 的双向绑定原理与用法揭秘

What'syourname:

Vue的单向数据流

自定义组件的v-model

JsFiddle的Vue样板

Todos:

定义Todo组件

Todos:

为TodoList添加计数

Todos({{countDone}}/{{count}}):

改造成v-model

.sync实现其它数据绑定

揭密Vue双向绑定

展望

热门推荐

随机推荐