Vue双向数据绑定的原理与实践

1、Vue双向数据绑定的原理

说到Vue的双向数据绑定，就得提到一种方法，就是数据劫持；Vue就是通过数据劫持，结合发布者-订阅者模式实现的，而此方法实现的核心离不开js中对象的一个方法，即：

Object.defineProperty(data,'name',{})
//data为要操作的对象
//name对应监听的具体属性名称
//第三个参数未对应属性的描述，及具体怎么样操作对象数据

Object.defineProperty方法用来监听对象中数据的变化，该方法有三个参数，第一个参数为要操作的对象，第二个为要监听对象属性的名称，第三个为属性描述，对应的是个json对象，在里边可以设置get和set方法，当调用属性值或者改变属性值会被get和set方法捕获到，以此进行相关操作。在Vue中，当给Vue对象设置data后，Vue会遍历data对象中的所有属性值，使用Object.defineProperty()方法设置get和set方法，以此实现数据的双向绑定。

2、写一段程序模拟Vue的双向数据绑定

3、Vue中不会进行视图刷新的三种情况

• 3.1 因为Vue进行响应式变化的是对象，不能是数组，但是某个对象是数值这样也是可以的，这也说明了Vue中data最外层必须是一个对象的原因，另外如果对象中的属性又是对象，则Vue会一层层的递归解析出来，进行相应式处理。当数组中的数据通过push、contact等js指令中进行处理会出现一个新的数组，因此这样处理后，会进行视图刷新的。但是如果进行list[i]=newValue这样的处理时，Vue并不会进行数据的刷新与视图渲染，这根本质上Object.defineProperty()方法接收的就是对象有关系，同样的当改变list.length=newValue也不会进行处理。
• 3.2 再就是原先data中没有的属性，也就是自己添加的属性并没有在data中，这样的情况也不能进行响应式操作的，可以利用Vue.set方法进行添加，这个可以自行调研一下。
• 3.3 因为Vue中UI的渲染是通过异步进行的，所以有些操作直接进行，DOM中还没有新数据，导致调用代码时还没有数据，因此没有进行刷新，这样的情况时，可以在调用数据更新之后的代码，等待Vue完成DOM的更新后再获取此节点，代码中用Vue.nextTick(callback)包裹起来，在callback中进行编码，例如