昨天接到一个电话面试，上来第一个问题就是Vue双向绑定的原理。当时我并不知道如何监听数据层到视图层的变化，于是没答上来，挂电话后，我赶忙查了下资料，主要思路有如下三种。
1.发布者-订阅者模式（backbone.js）思路：使用自定义的data属性在HTML代码中指明绑定。所有绑定起来的JavaScript对象以及DOM元素都将“订阅”一个发布者对象。任何时候如果JavaScript对象或者一个HTML输入字段被侦测到发生了变化，我们将代理事件到发布者-订阅者模式，这会反过来将变化广播并传播到所有绑定的对象和元素。
2.脏值检查（angular.js）思路：angular.js 是通过脏值检测的方式比对数据是否有变更，来决定是否更新视图，最简单的方式就是通过 setInterval() 定时轮询检测数据变动，angular只有在指定的事件触发时进入脏值检测，大致如下：
DOM事件，譬如用户输入文本，点击按钮等。( ng-click )
XHR响应事件 ( $http )
浏览器Location变更事件 ( $location )
Timer事件( $timeout , $interval )
执行 $digest() 或 $apply()
3.数据劫持（Vue.js）思路： vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
Object.defineProperty()：方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。
var obj = {}; Object.defineProperty(obj, 'hello', { get: function() { console.log('get val:'+ val); return val; }, set: function(newVal) { val = newVal; console.log('set val:'+ val); } }); obj.hello='111';//控制台打印set val:111 obj.hello; //控制台打印get val:111
当获取hello属性时，触发get；设置hello值时，触发set；这就是vue实现双向绑定的核心
完整代码如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>v-model</title> </head> <body> <div> <h2>{{title}}</h2> <input v-model='text' type="text"> <h1>{{text}}</h1> <button v-on:click='clickMe'>click me</button> </div> <script> //Dom类 解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图 //并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图 class Doms { constructor(node, vm) { if (node) { this.$frag = this.nodeToFragment(node, vm) return this.$frag } } nodeToFragment(node, vm) {//将dom转换成fragment var frag = document.createDocumentFragment() var child; while (child = node.firstChild) { this.compileElement(child, vm) frag.appendChild(child) } return frag } compileElement(node, vm) {//获取v-model属性,给dom赋值 var reg = /\{\{(.*)\}\}/ //匹配双括号里面的任何字符 if (node.nodeType === 1) {//element元素 var attr = node.attributes; for (var i = 0; i < attr.length; i++) { if (attr[i].nodeName == 'v-model') { var name = attr[i].nodeValue//获取绑定的key node.addEventListener('input', function (e) { vm[name] = e.target.value//触发set方法 }) new Watcher(vm, node, name, 'value') } else if (attr[i].nodeName.includes(':')) { var eventType = attr[i].nodeName.split(':')[1]//事件名 var cb = vm.methods && vm.methods[attr[i].nodeValue] if (eventType && cb) { node.addEventListener(eventType, cb.bind(vm), false) } } } if (node.childNodes && node.childNodes.length) {//如果还有子节点 递归 [...node.childNodes].forEach(n => this.compileElement(n, vm)) } } if (node.nodeType === 3) {//text if (reg.test(node.nodeValue)) { var name = RegExp.$1 name = name.trim() new Watcher(vm, node, name, 'nodeValue') } } } } class Vue {//Vue类 constructor(params) { this.data = params.data //获取属性 this.methods = params.methods //获取方法 this.observe(params.data, this)//监听属性 var id = params.el; var dom = new Doms(document.getElementById(id), this) document.getElementById(id).appendChild(dom) params.mounted.call(this) } observe(obj, vm) {//读取data内属性，并监听 if (!obj || typeof obj !== 'object') return Object.keys(obj).forEach(key => this.defineReactive(vm, key, obj[key])) } defineReactive(obj, key, val) {//利用Object.defineProperty监听属性改变 var dep = new Dep() Object.defineProperty(obj, key, { get: function () { if (Dep.target) {//添加订阅者watcher到主题对象Dep dep.addSub(Dep.target) } return val }, set: function (newVal) { if (newVal === val) return val = newVal console.log(val) //作为发布者发布通知 dep.notify() } }) } } class Dep {//收集订阅者的容器类 constructor() { this.subs = [] } addSub(sub) { this.subs.push(sub) } notify() { this.subs.forEach(sub => sub.update()) } } class Watcher { constructor(vm, node, name, type) { Dep.target = this this.name = name this.node = node this.vm = vm this.type = type this.update() Dep.target = null } update() { this.get() this.node[this.type] = this.value//订阅者执行响应操作 } get() { this.value = this.vm[this.name]//触发响应属性的get } } var vm = new Vue({ el: 'app', data: { text: 'lyl', title: 'hello world' }, methods: { clickMe() { this.title = 'hello world' } }, mounted() { setTimeout(() => { this.title = '你好' }, 1000); } }) </script> </body> </html>