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

<!-- 注意 v-model 变成了 :done.sync，别忘了冒号哟 -->
<todo :text="todo.text" :done.sync="todo.done"></todo>

揭密 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() {
      return this.done;
    },
    set(value) {
      this.$emit("update:done", value);
    }
  }
}

说实在的，要多定义一个意义相同名称不同的变量名也是挺费脑筋的。希望 Vue 在将来的版本中可以通过一定的技术手段减化这一过程，比如为属性（Prop）声明添加

sync

选项，只要声明

sync: true

的都可以直接赋值并自动触发

update:xxx

事件。

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

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

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