Vue双向绑定的实现及原理

1.vue双向绑定的实现

v-xxx 是vue中的指令，
v-model是双向绑定

例1：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>双向绑定</title>
</head>
<body>
    <div class="app">
        <input type="text" class="txt" v-model=msg>
        {{msg}}
    </div>
</body>

<script src="../js/vue.js"></script>
<script>
    new Vue({
        el:'.app',
        data:{
            msg:'hello world'
        }
    })
</script>
</html>

2.Vue双向绑定的原理
vue数据双向绑定是通过 数据劫持 结合 发布者-订阅者模式 的方式来实现的；

数据劫持的实现方式 Object.defineProperty()

当你把一个普通的JavaScript 对象传入 Vue 实例作为 data 选项， Vue 将便利此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。

var Book = {
  name:'123456'
};
var name = "";
console.log(Book.name) //123456

Object.defineProperty(Book,'name',{
  set (value) {
     name = value;
     console.log(value) //123
   },
   get() {
      return '《' + name + '》'
    }
})
console.log(Book.name) // 《》 此处使用get的方法
Book.name = '123' // 相当于调用set方法
console.log(Book.name)  // 《123》

原理

实现一个监听器Observer，用来劫持并监听所有属性，如果有变动的，就通知订阅者。
实现一个订阅者Watcher，可以收到属性的变化通知并执行相应的函数，从而更新视图。
实现一个解析器Compile，可以扫描和解析每个节点的相关指令，并根据初始化模板数据以及初始化相应的订阅器。

938664-20170522225458132-1434604303.png