vue双向绑定原理1

数据劫持（数据代理）

定义：数据劫持，指的是在访问或者修改对象的某个属性时，通过一段代码拦截这个行为，进行额外的操作或者修改返回结果
Vue是通过Object.defineProperty()来劫持数据的get/set.

vm.$set()原理

受现代 JavaScript 的限制 (而且 Object.observe 也已经被废弃)，Vue 无法检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化，所以属性必须在 data 对象上存在才能让 Vue 将它转换为响应式的。
对于已经创建的实例，Vue 不允许动态添加根级别的响应式属性。但是，可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式属性。

vm.$set()在new Vue()时候就被注入到Vue的原型上。
vm.$set()解决了什么问题? 避免滥用
在Vue.js里面只有data中已经存在的属性才会被Observe为响应式数据, 如果你是新增的属性是不会成为响应式数据, 因此Vue提供了一个api(vm.$set)来解决这个问题。

Vue不能监听到数组变化

由于 JavaScript 的限制，Vue 不能检测以下变动的数组：
当你直接设置一个项的索引时, 例如： vm.items[indexOfItem] = newValue
当你修改数组的长度时, 例如： vm.items.length = newLength

参考资料：
数据劫持（数据代理）
为什么直接修改数组长度或设置数组项的索引时，Vue不能检测到数组的变动？
Vue源码: vm.$set原理分析
Vue响应式原理及总结
深入响应式原理