VUE双向绑定原理

一 双向数据绑定

目前几种主流的mvc(mvvm)框架都实现了单向数据绑定，双向数据绑定无非就是在单向绑定的基础上给可输入元素(input, textarea等)添加了change(input)事件，来动态修改model和view。实现数据绑定的做法大致有以下几种：

1.发布者-订阅者模式(backbone.js)

一般通过sub,pub的方式实现数据和视图的绑定监听，更新数据方式通常做法是vm.set("property",value)，但是现在我们更希望通过vm.property=value这种方式更新数据，同时自动更新视图，所以有了以下两种方式。

2.脏值检查
angular.js 是通过脏值检测的方式比对数据是否有变更，来决定是否更新视图，最简单的方式就是通过setInterval()定时轮询检测数据变动，当然Google不会这么low，angular只有在指定的事件触发时进入脏值检测，大致如下：

• DOM事件，譬如用户输入文本，点击按钮等。( ng-click )
  

• XHR响应事件 ( $http )
  

• 浏览器Location变更事件 ( $location )
  

• Timer事件( $timeout , $interval )
  

• 执行 $digest() 或 $apply()
  

3.数据劫持
vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的getter/setter，在数据变动时发布消息给订阅者，触发相应的监听回调。

二 VUE双向绑定的流程

要实现mvvm的双向绑定，必须要实现以下几点：

• 实现一个数据监听器Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者
• 实现一个指令解析器Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数
• 实现一个Watcher，作为连接Observer和Compile的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图
• mvvm入口函数，整合以上三者

看一个具体的例子：

<div id="mvvm-app"><input type="text" v-model="word"><p>{{word}}</p><button v-on:click="sayHi">change model</button>
</div><script src="./js/observer.js"></script>
<script src="./js/watcher.js"></script>
<script src="./js/compile.js"></script>
<script src="./js/mvvm.js"></script>
<script>var vm = new MVVM({el: '#mvvm-app',data: {word: 'Hello World!'},methods: {sayHi: function() {this.word = 'Hi, everybody!';}}});
</script>

效果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KgUqyOD5-1629617538258)(en-resource://database/6945:1)]

三 关于Object.defineProperty()

vue是通过数据劫持的方法来做数据绑定的，其中最核心的方法便是通过Object.defineProperty()来实现对属性的劫持，从而达到数据变动的目的。这个方法是特别重要的方法，在学习双向数据绑定之前我们先来看一下这个方法具体怎么用。

当我们在控制台输出一个定义在vue初始化数据上的对象，看一个这个对象的输出结果：

  const vm = new Vue({data() {return {obj: {a: 1}}},created() {console.log(this.obj)}})

结果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uhAAhggT-1629617538261)(en-resource://database/6947:1)]
我们看到属性a有两个对应的get和set方法，这多出的方法就是因为
Object.defineProperty( )的数据劫持。

Object.defineProperty( )可以控制一个对象属性的一些特有操作，如读写权，是否可以枚举等。来看一个基础用法：

const Book = {}
let name = ''
Object.defineProperty(Book, 'name', {set: function (value) {name = valueconsole.log('你取了一本书名叫做' + value)},get: function () {return `《${name}》`}})
Book.name = '老人与海' // 你取了一本书名叫做老人与海
console.log(Book.name) //《老人与海》

当程序执行到Book.name = '老人与海'时触发set方法，程序执行到console.log(Book.name)时触发get方法。

四 整个流程

回到整个流程，我们看一下流程图：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jcYtjMGw-1629617538263)(en-resource://database/6949:1)]

1.实现一个Observer

observer是一个数据监听器，其核心方法就是前面所说的Object.defineProperty()。要对所有的属性进行监听的话，就需要通过递归方法遍历所有属性值。

function observe(data) {if (!data || typeof data !== 'object') {return;}// 取出所有属性遍历Object.keys(data).forEach(function(key) {defineReactive(data, key, data[key]);});
};function defineReactive(data, key, val) {observe(val); // 递归监听子属性Object.defineProperty(data, key, {enumerable: true, // 可枚举configurable: false, // 不能再defineget: function() {return val;},set: function(newVal) {console.log('哈哈哈，监听到值变化了 ', val, ' --> ', newVal);val = newVal;}});
}var data = {name: 'kindeng'};
observe(data);
data.name = 'dmq'; // 哈哈哈，监听到值变化了 kindeng --> dmq
data.info.address='上海';  //如果不在监听执行函数中进行递归调用，则无法监听到数据的变化

上述代码中我们定义了一个监听器的入口函数observer和一个监听执行函数defineReactive，只要是经过defineReactive方法里的getter/setter的数据，vue都可以能监听到数据的变化。但是对数据进行新增或者删除操作，vue就无法响应更新了。如：

data.sex = '男' // 新增属性，监听不到 ----- 所以有 Vue.set
delete data.name // 删除属性，监听不到 ----- 所以有 Vue.delete   

在开发中有时候需要用到vue.set方法，其实就是因为Object.definedProperty()无法监听到对象属性的新增和删除。

2.消息订阅器Dep

observer监听到数据变化后，就需要通知订阅者了。订阅器Dep主要工作是维护一个数组，用来收集订阅者，数据变动后触发notify，再调用订阅者的update方法。

// ... 省略
function defineReactive(data, key, val) {var dep = new Dep();observe(val); // 监听子属性Object.defineProperty(data, key, {// ... 省略set: function(newVal) {if (val === newVal) return;console.log('哈哈哈，监听到值变化了 ', val, ' --> ', newVal);val = newVal;dep.notify(); // 通知所有订阅者}});
}function Dep() {this.subs = [];
}
Dep.prototype = {addSub: function(sub) {this.subs.push(sub);},notify: function() {this.subs.forEach(function(sub) {sub.update();});}
};

3.订阅者Watcher

订阅者Watcher在初始化的时候需要将自己添加进订阅器Dep中，监听器Observer是在get函数执行了添加订阅者Watcher的操作的，所以我们只需要在Watcher初始化的时候去触发对应的get函数添加订阅者操作即可。
看一下Watcher的实现：

function Watcher(vm, exp, cb) {this.cb = cb;this.vm = vm;this.exp = exp;this.value = this.get();  // 将自己添加到订阅器的操作
}Watcher.prototype = {update: function() {this.run();},run: function() {var value = this.vm.data[this.exp];var oldVal = this.value;if (value !== oldVal) {this.value = value;this.cb.call(this.vm, value, oldVal);}},get: function() {Dep.target = this;  // 缓存自己var value = this.vm.data[this.exp]  // 强制执行监听器里的get函数Dep.target = null;  // 释放自己return value;}
};

原来的代码的调整：

function defineReactive(data, key, val) {observe(val); // 递归遍历所有子属性var dep = new Dep(); Object.defineProperty(data, key, {enumerable: true,configurable: true,get: function() {if (Dep.target) {.  // 判断是否需要添加订阅者dep.addSub(Dep.target); // 在这里添加一个订阅者}return val;},set: function(newVal) {if (val === newVal) {return;}val = newVal;console.log('属性' + key + '已经被监听了，现在值为：“' + newVal.toString() + '”');dep.notify(); // 如果数据变化，通知所有订阅者}});
}
Dep.target = null;

4.Compile

Compile主要做的事情是解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，接收到通知，更新视图。
因为遍历解析的过程有多次操作dom节点，为提高性能和效率，会先将跟节点el转换成文档碎片fragment进行解析编译操作，解析完成，再将fragment添加回原来的真实dom节点中。

function Compile(el) {this.$el = this.isElementNode(el) ? el : document.querySelector(el);if (this.$el) {this.$fragment = this.node2Fragment(this.$el);this.init();this.$el.appendChild(this.$fragment);}
}
Compile.prototype = {init: function() { this.compileElement(this.$fragment); },node2Fragment: function(el) {var fragment = document.createDocumentFragment(), child;// 将原生节点拷贝到fragmentwhile (child = el.firstChild) {fragment.appendChild(child);}return fragment;}
};

5.MVVM

MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据model变更的双向绑定效果。

一个简单的MVVM构造器例子：

function MVVM(options) {this.$options = options;var data = this._data = this.$options.data;observe(data, this);this.$compile = new Compile(options.el || document.body, this)
}