Vue实现数据双向绑定的原理

267 阅读2分钟

1、vue的数据双向绑定是通过数据劫持和发布-订阅者功能来实现的

实现步骤:

1.实现一个监听者Oberver来劫持并监听所有的属性,一旦有属性发生变化就通知订阅者

2.实现一个订阅者watcher来接收属性变化的通知并执行相应的方法,从而更新视图

3.实现一个解析器compile,可以扫描和解析每个节点的相关指令,并根据初始化模板数据以及初始化相对应的订阅者

2.vue是通过Object.defineProperty()来实现数据劫持的。

实现MVVM主要包含两个方面,数据变化更新试图,视图变化更新数据。

关键点在于data如何更新view

view更新data可以通过事件监听,比如input标签监听'input'事件就可以实现

而数据更新视图的重点是如何知道数据变了,只要知道数据变了,那么接下去的事都好处理了。而我们可以通过Object.defineProperty()对属性设置一个set函数,当数据改变了就触发这个函数,所以我们只要将一些需要更新的方法放在这里面就可以实现data更新view

vue1.png

当data有变化的时候,通过ES5中的Object.defineProperty()方法中的set方法劫持属性值的设置操作和get方法劫持属性值的获取操作,实现数据变化,视图view跟着变化

而视图view变化数据跟着变化则是通过底层的input事件来进行data的响应更改

Object.defineProperty(参数1,参数2,参数3)返回值为该对象obj

参数1为该对象(obj),参数2为要定义或修改的对象的属性名,参数3为属性描述符,属性描述符是一个对象,主要有两种形式:数据描述符和存取描述符。这两种对象只能选择一种使用,不能混合使用。而get和set属于存取描述符对象的属性

这个方法会直接在一个对象上定义一个新属性或者修改对象上的现有属性,并返回该对象

下面代码使用vue中的方法实现数据劫持