Vue源码双向绑定原理详解，如何学习？

本文共计1869个文字，预计阅读时间需要8分钟。

将普通的JavaScript对象传递给Vue实例的data选项后，Vue会将此对象的属性遍历，并使用Object.defineProperty将这些属性转换为getter/setter。Object.defineProperty是ES5中提供的一个用于定义对象属性的函数。

原理

当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也就是为什么 Vue 不支持 IE8 以及更低版本浏览器。

上面那段话是Vue官方文档中截取的，可以看到是使用Object.defineProperty实现对数据改变的监听。Vue主要使用了观察者模式来实现数据与视图的双向绑定。

function initData(vm) { //将data上数据复制到_data并遍历所有属性添加代理 vm._data = vm.$options.data; const keys = Object.keys(vm._data); let i = keys.length; while(i--) { const key = keys[i]; proxy(vm, `_data`, key); } observe(data, true /* asRootData */) //对data进行监听 }

在第一篇数据初始化中，执行new Vue()操作后会执行initData()去初始化用户传入的data，最后一步操作就是为data添加响应式。