什么是双向数据绑定?
vue是一个mvvm框架,即数据双向绑定,即当数据发生变化的时候,视图也就发生变化,当视图发生变化的时候,数据也会跟着同步变化。这也算是vue的精髓之处了。
1.Vue2.0通过Object.definePropety来劫持对象属性的getter和setter操作,当数据发生变化时通知
2.Vue3.0通过Proxy来劫持数据,当数据发生变化时发出通知
简单介绍一下Object.definePropety
在MDN上对该方法的说明是:Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象。
它接收三个参数,要操作的对象,要定义或修改的对象属性名,属性描述符。重点就是最后的属性描述符。
属性描述符是一个对象,主要有两种形式:数据描述符和存取描述符。
这两种对象只能选择一种使用,不能混合两种描述符的属性同时使用。上面说的get和set就是属于存取描述符对象的属性。
然后我们可以通过在存取描述符中的get和set方法内写入自定义的逻辑来实现对象获取属性和设置属性时的行为。
如上图 可简单实现双向数据绑定
简单介绍一下Proxy(代理)
proxy 是ES6的语法
proxy相较于object.defineProperty的优势
- defineProperty只能监听某个属性,不能对全对象监听
- Proxy可以监听数组的变化,不用再去单独的对数组做特异性操作
- 可以检测到数组内部数据的变化
不知道大家有这样的疑问没?既然proxy作为ES6的语法并且还有这么多的优点为啥不在之前2.X版本中就用Proxy?(ES6可比vue2.0版本出现的早哈)
其实还是兼容性的问题,毕竟作为es6的新语法兼容性不好,最主要就是proxy不能用polyfill来兼容(polyfill主要抚平不同浏览器之间对js实现的差异)