vue数据双向绑定
数据绑定原理
vue通过使用双向数据绑定,来实现view层和model层的同步更新。vue的数据双向绑定主要是通过数据劫持和订阅者模式来实现。
首先通过Object.defineProperty()
方法对model层数据的各个属性添加访问器属性,以此来实现对数据的劫持,因此当model层中的数据发生变化的时候,可以通过配置setter
和getter
方法来实现对view层数据更新的通知。
两种绑定情况
数据在html模板中一共有两种绑定情况
- 使用
v-model
来对value值进行绑定 - 作为文本绑定
在对模板引擎进行解析的过程中,如果遇到元素节点,并且属性值包含v-model
的话,我们就从model层中获取v-model所对应的属性的值,并赋值给元素的value值,然后给这个元素设置一个监听事件,当view层中元素的数据发生变化的时候触发该事件,通知model层中的对应属性值进行更新。
如果遇到了绑定的文本节点,使用model层中对应的属性的值来替换这个文本。对于文本节点的更新,我们使用订阅者模式,属性作为一个主题,我们为这个节点设置一个订阅者对象,将这个订阅者对象加入这个属性主题的订阅者列表中。当model层数据发生改变的时候,model层作为发布者向主题发出通知,主题收到通知再向它的所有订阅者统一送,听约着收到通知后更改自己的数据。
Object.defineProperty()
Object.defineProperty()
函数一共有三个参数:
- 需要定义属性的对象
- 需要定义的属性
- 该属性的描述符
(value:属性的值、writable:属性是否可写、enumerable:属性是否可枚举、configurable:属性是否可配置修改)
缺点:有一些对属性的操作,使用这种方法无法拦截,比如通过下标修改数组数据或者给对象新增属性,不过vue内部通过重写函数解决了这个问题。
在vue3.0中已经不使用这种方式了,而是通过使用Proxy
(ES6)对对象进行代理,从而实现数据劫持。使用Proxy
好处是他可以完美的监听到任何方式的数据改变,唯一缺点是兼容性问题。