vue如何实现双向数据绑定(vue30的双向数据绑定)

大哥哪位知道,vue如何实现双向数据绑定(vue30的双向数据绑定)
最新回答
佐佐木惠理

2024-09-05 02:02:55

vue数据双向绑定原理

vue实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应监听回调。当把一个普通Javascript对象传给Vue实例来作为它的data选项时,Vue将遍历它的属性,用Object.defineProperty()将它们转为getter/setter。用户看不到getter/setter,但是在内部它们让Vue追踪依赖,在属性被访问和修改时通知变化。

vue的数据双向绑定将MVVM作为数据绑定的入口,整合Observer,Compile和Watcher三者,通过Observer来监听自己的model的数据变化,通过Compile来解析编译模板指令(vue中是用来解析{{}}),最终利用watcher搭起observer和Compile之间的通信桥梁,达到数据变化—视图更新;视图交互变化(input)—数据model变更双向绑定效果。

js实现简单的双向绑定:

vue2.x双向数据绑定原理

1.vue双向数据绑定原理

vue.js采用的是数据劫持结合发布者-订阅者模式的方式.利用Object.defineProperty来劫持对象,利用getter,setter在数据变动时发布消息给订阅者,触发相对应的监听回调,更新视图.

2.实现数据绑定的方法大致有几种

1.发布者-订阅者模式:一般通过sub、pub的方式实现数据和视图的绑定监听,更新数据的方式通常做法是vm.set('property',value)。我们更希望通过vm.prototype=value这种方式更新视图数据,同时自动跟新视图.

2.脏值检查:angular.js是通过脏值检测的方式对比数据是否有变更,来决定视图是否更新,最简单的方式就是通过setInterval(),定时轮询检测数据变动,应为setInterval太耗费性能,所以angular只有在指定的事件触发时进入脏值检查,大致如下:

1.DOM事件,譬如用户输入文本,点击按钮等.(ng-click)

2.XHR响应事件($http)

3.浏览器Location变更事件($location)

4.Timer事件($timeout,$interval)

5.执行$digest()或$apply()

3.数据劫持:vue.js则是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调.

3.vue双向数据绑定(具体流程)

实现过程

首先对数据进行劫持与监听,需要设置一个监听器Observer,用来监听所有的属性.如果属性发生了变化,会通知消息订阅器Dep(收集订阅者),Dep通知订阅者Watcher看是否需要更新.然后在监听Observer和订阅者Watcher之间统一管理,触发视图更新.同时创建一个指令解析器Compile,根据newVue实例传入的el绑定的元素,对它的子元素进行扫描与解析,对相关指令对应初始化一个订阅者watcher存放在订阅器中(Dep),并替换模板数据或者绑定相对应的函数,如果当订阅者watcher接收到相对应属性的变化,就会执行相对应的更新函数,从而更新视图.

1.实现一个监听器Observer,用来劫持并监听所有的属性,如果有变动就通知订阅者.

2.实现一个订阅者Watcher,收到属性的变化通知并执行相对应的函数,从而更新视图.

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

下节Compile的简单实现:

理解VUE2双向数据绑定原理和实现

1.vue双向数据绑定是通过数据劫持结合发布订阅模式的方式来实现的,也就是说数据和视图同步,数据发生变化,视图跟着变化,视图变化,数据也随之发生改变;

2.核心:关于VUE双向数据绑定,其核心是Object.defineProperty()方法;

3.介绍一下Object.defineProperty()方法

(1)Object.defineProperty(obj,prop,descriptor),这个语法内有三个参数,分别为obj(要定义其上属性的对象)prop(要定义或修改的属性)descriptor(具体的改变方法)

(2)简单地说,就是用这个方法来定义一个值。当调用时我们使用了它里面的get方法,当我们给这个属性赋值时,又用到了它里面的set方法;

这样我们就能实现js的双向数据绑定,也对这个方法有初步的了解;

这个例子实现的效果是:随着文本框输入文字的变化,span中会同步显示相同的文字内容;这样就实现了model=view以及view=model的双向绑定。

通过添加事件监听keyup来触发set方法,而set再修改了访问器属性的同时,也修改了dom样式,改变了span标签内的文本。

1.实现效果

先来看一下vue双向数据绑定是如何进行的,以便我们确定好思考方向

2.任务拆分

拆分任务可以让我们的思路更加清晰:

(1)将vue中的data中的内容绑定到输入文本框和文本节点中

(2)当文本框的内容改变时,vue实例中的data也同时发生改变

(3)当data中的内容发生改变时,输入框及文本节点的内容也发生变化

3.开始任务1——绑定内容

我们先了解一下DocuemntFragment(碎片化文档)这个概念,你可以把他认为一个dom节点收容器,当你创造了10个节点,当每个节点都插入到文档当中都会引发一次浏览器的回流,也就是说浏览器要回流10次,十分消耗资源。

而使用碎片化文档,也就是说我把10个节点都先放入到一个容器当中,最后我再把容器直接插入到文档就可以了!浏览器只回流了1次。

注意:还有一个很重要的特性是,如果使用appendChid方法将原dom树中的节点添加到DocumentFragment中时,会删除原来的节点。

举个例子:

可以看到,我的app中有两个子节点,一个元素节点,一个文本节点

但是,当我通过DocumentFragment劫持数据一下后

注意:我的碎片化文档是将子节点都劫持了过来,而我的id为app的div内已经没有内容了。

同时要主要我while的判断条件。判断是否有子节点,因为我每次appendChild都把node中的第一个子节点劫持走了,node中就会少一个,直到没有的时候,child也就变成了undefined,也就终止了循环。

来实现内容绑定

我们要考虑两个问题,一个是如何绑定要input上,另一个是如何绑定要文本节点中。

这样思路就来了,我们已经获取到了div的所以子节点了,就在DocumentFragment里面,然后对每一个节点进行处理,看是不是有跟vm实例中有关联的内容,如果有,修改这个节点的内容。然后重新添加入DocumentFragment中。

首先,我们写一个处理每一个节点的函数,如果有input绑定v-model属性或者有{{xxx}}的文本节点出现,就进行内容替换,替换为vm实例中的data中的内容

然后,在向碎片化文档中添加节点时,每个节点都处理一下。

创建Vue的实例化函数

效果图如下:

我们成功将内容都绑定到了输入框与文本节点上!

4、实现任务2——【view=model

对于此任务,我们从输入框考虑,输入框的问题,输入框如何改变data。我们通过事件监听器keyup,input等,来获取到最新的value,然后通过Object.defineProperty将获取的最新的value,赋值给实例vm的text,我们把vm实例中的data下的text通过Object.defineProperty设置为访问器属性,这样给vm.text赋值,就触发了set。set函数的作用一个是更新data中的text,另一个等到任务三再说。

首先实现一个响应式监听属性的函数。一旦有赋新值就发生变化

然后,实现一个观察者,对于一个实例每一个属性值都进行观察。

改写编译函数,注意由于改成了访问器属性,访问的方法也产生变化,同时添加了事件监听器,把实例的text值随时更新

实例函数中,观察data中的所有属性值,注意增添了observe

最终我们改变input中的内容能改变data中的数据,单页面却没有刷新

4、实现任务3——【model=view】

通过修改vm实例的属性该改变输入框的内容与文本节点的内容。

这里涉及到一个问题需要我们注意,当我们修改输入框,改变了vm实例的属性,这是1对1的。

但是,我们可能在页面中多处用到data中的属性,这是1对多的。也就是说,改变1个model的值可以改变多个view中的值。

这就需要我们引入一个新的知识点:

订阅/发布者模式

订阅发布模式(又称观察者模式)定义了一种一对多的关系,让多个观察者同时监听某一个主题对象,这个主题对象的状态发生改变时就会通知所有观察者对象。

发布者发出通知=主题对象收到通知并推送给订阅者=订阅者执行相应操作

1

举个例子:

之前提到的set函数的第二个作用就是来提醒订阅者进行noticy操作,告诉他们:“我的text变了!”文本节点变成了订阅者,接到消息后,立马进行update操作

回顾一下,每当new一个Vue,主要做了两件事:第一个是监听数据:observe(data),第二个是编译HTML:nodeToFragement(id)。

在监听数据的过程中,我们会为data中的每一个属性生成一个主题对象dep。

在编译HTML的过程中,会为每个与数据绑定相关的节点生成一个订阅者watcher,watcher会将自己添加到相应属性的dep容器中。

我们已经实现:修改输入框内容=在事件回调函数中修改属性值=触发属性的set方法。

接下来我们要实现的是:发出通知dep.notify()=触发订阅者的update方法=更新视图。

这里的关键逻辑是:如何将watcher添加到关联属性的dep中。

注意:我把直接赋值的操作改为了添加一个Watcher订阅者

那么,Watcher又该做些什么呢?

首先,将自己赋给了一个全局变量Dep.target;

其次,执行了update方法,进而执行了get方法,get的方法读取了vm的访问器属性,从而触发了访问器属性的get方法,get方法中将该watcher添加到了对应访问器属性的dep中;

再次,获取属性的值,然后更新视图。

最后,将Dep.target设为空。因为它是全局变量,也是watcher与dep关联的唯一桥梁,任何时刻都必须保证Dep.target只有一个值。

最终我们就实现了这个双向数据绑定功能,虽然很繁琐,但我相信,你多打几遍,一定会对你有所帮助,加油吧!!