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的双向数据绑定
<html>
<body>
<input id='enterEl' type='text'>
<div id='showEl'></div>
<script>
let data = {inputValue:'hh'}
Object.defineProperty(data,'inputValue',{
get: function(){
return data;
},
set: function(newData){
document.getElementById('enterEl').value = newData;
document.getElementById('showEl').innerHTML = newData;
}
})
document.getElementById('enterEl').addEventListener('keyup',function(){
data.inputValue = this.value;
})
</script>
</body>
</html>
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中进行编码，例如
<script>
//...
this.message = 'new Data'
console.log(this.$el.textContent) // 还是原来的消息
this.$nextTick(function(){
console.log(this.$el.textContent) // UI刷新了最新的消息
})
//...
</script>
