浅谈vue的双向数据绑定_vue双向绑定问题

<div>
    <input id='input'/>
    <p id="content"></p>
</div>
let object = {}
Object.defineProperty(object,'msg',{
    get(){return object},  
    set(value){
        document.getElementById('input').value = value
        document.getElementById('content').innerHTML = value
    }
})
​
//触发输入框的键盘事件
document.getElementById('input').onkeyup = function(e){
    object.msg = e.target.value   //将对象的msg属性进行更改
}

运行的时候，我们不难发现，输入框里面的内容改变的时候，p标签里面的值也会对应的得到变化。原因是因为当输入框的内容发生变化的时候，我们获取到了输入框的值，然后将其赋值给object.msg属性。这样object的msg属性的set方法就会被执行，从而将对应的content值进行了改变。

那，后续当我们去修改数据，视图会不会自动更新呢？

//后续修改数据的时候，视图需要改变
setTimeout(() => {
    object.msg = 'hello-world'
}, 2000);

这样，整了一个定时器，过了2s中，修改了对象的数据，对象数据发生变化，从而又会触发set方法，实现了响应的数据改变，视图也会变成了hello-world的值。其实，这就是借助了vue中的Object.defineProperty对于数据的拦截处理的流程。

彩蛋

vue 2.x中使用的Object.defineProperty对于数据进行拦截，其实还是有缺陷的

1、对象属性的新加或者删除无法监听；

2、数组元素的增加和删除无法监听

那为啥2.x的时候不解决呢，从两点考虑：

1.性能：通过遍历对象的属性进行监听，但是属性值也是对象就需要深度遍历了，这时候显然能够劫持完整对象更好

2.无法监听数组：属性值改为数组，数组也算是一种特殊的对象，下标其实就是对象的属性，理论上是可以通过Object.defineProperty来处理的，那尤大大为什么没有采用这种方式呢，猜测源于数组的使用场景，数组的主要操作场景是遍历，如果每一个元素都挂载set和get方法，会产生巨大性能消耗，而且数组下标变化频繁，操作方法居多，一旦数组长度发生变化，在无法自动检测的状态下，手动更新会是一个相当繁琐的工作。

那vue中是如何实现对数组的劫持呢，对7种常用的数组操作进行了重写，分别是push() 、pop() 、shift()、 unshift() 、splice() 、sort()、 reverse()，其中Vue.set()对于数组的处理其实就是调用了splice方法

打开全栈工匠技能包-1小时轻松掌握SSR

两小时精通jq+bs插件开发

生产环境下如歌部署Node.js

网易内部VUE自定义插件库NPM集成

谁说前端不用懂安全，XSS跨站脚本的危害

webpack的loader到底是什么样的？两小时带你写一个自己loader