很多同学在理解 Vue 的时候都把 Vue 的数据响应原理理解为双向绑定,但实际上这是不准确的,我们之前提到的数据响应,都是通过数据的改变去驱动 DOM 视图的变化,而双向绑定除了数据驱动 DOM 外, DOM 的变化反过来影响数据,是一个双向关系,在 Vue 中,我们可以通过 v-model 来实现双向绑定。
在Vue中体现出双向绑定作用的方式有两种,在分析之前我们先介绍这两种使用方式有什么区别。
1)v-model 属性
2).sync 修饰符
v-model
2.2.0+ 新增
一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件,但是像单选框、复选框等类型的输入控件可能会将 value 特性用于不同的目的。model 选项可以用来避免这样的冲突:
ChildBox.vue
Index.vue
(val = data)"/>
分析一下上面的代码。ChildBox.vue文件对checkbox做了简单的封装,提供了checked参数。Index.vue文件为父组件,引用了ChildBox作为自己的子组件,这里需要注意一下。val值的绑定使用的v-model而并不是v-bind:checkbox。一开始我们有说到双向绑定方式有两种一种是v-model,另一种是.sync(这个后面讲)。如果使用v-model,子组件的props应该设置value值,而向上传递应该为$emit('input')才对。所以这里还有一个重点,model的作用。
model
2.2.0 新增
允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下,一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event,但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。
.sync 修饰符
2.3.0+ 新增
在有些情况下,我们可能需要对一个 prop 进行“双向绑定”。不幸的是,真正的双向绑定会带来维护上的问题,因为子组件可以修改父组件,且在父组件和子组件都没有明显的改动来源。
这也是为什么我们推荐以 update:myPropName 的模式触发事件取而代之。举个例子,在一个包含 title prop 的假设的组件中,我们可以用以下方法表达对其赋新值的意图:
ChildBox.vue
Index.vue
(val = data)"/>
分析一下上面的代码有什么变化,父组件v-model被 :checked.sync替换掉。子组件因不适用v-model,所以不需要model配置。change函数改为$emit'update:checkde',$event.target.checked)。
v-model源码分析
借助ustbhuangyi Vue.js技术揭秘。这里只做总结比对,详细分析过程可查看链接。
以下面代码为例:
let vm = new Vue({ el: '#app', template: '
' + '' + '
Message is: {{ message }}
' + '
', data() { return { message: '' } }})
在 input 元素上设置了 v-model 属性,绑定了 message,当我们在 input 上输入内容时,message 也会同时发生变化。
源码generate函数:
function generate ( ast, options) { var state = new CodegenState(options); var code = ast ? genElement(ast, state) : '_c("div")'; return { render: ("with(this){return " + code + "}"), staticRenderFns: state.staticRenderFns }}
对我们的例子而言,最终生成的 render 代码如下:
with(this) { return _c('div',[_c('input',{ directives:[{ name:"model