vue中的双向数据绑定原理与常见操作技巧详解

2023-07-28 16:09:14 81

本文实例讲述了vue中的双向数据绑定原理与常见操作技巧。分享给大家供大家参考，具体如下：

什么是双向数据绑定？

vue是一个mvvm框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。这也是算是vue的精髓之处了。值得注意的是，我们所说的数据双向绑定，一定是对于UI控件来说的，非UI控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理工具的前提，如果我们使用vuex，那么数据流也是单向的，这时就会和双向数据绑定有冲突，我们可以这么解决。

为什么要实现数据的双向绑定？

在vue中，如果使用vuex，实际上数据还是单向的，之所以说是数据双向绑定，这是用的UI控件来说，对于我们处理表单，vue的双向数据绑定用起来就特别舒服了。即两者并不互斥，在全局性数据流使用单项，方便跟踪，局部性数据流使用双向，简单易操作。

1.访问器属性

Object.defineProperty()函数可以定义对象的属性相关描述符，其中的set和get函数对于完成数据双向绑定起到了至关重要的作用，下面，我们看看这个函数的基本使用方式。

varobj={
foo:'foo'
}

Object.defineProperty(obj,'foo',{
get:function(){
console.log('将要读取obj.foo属性');
},
set:function(newVal){
console.log('当前值为',newVal);
}
});

obj.foo;//将要读取obj.foo属性
obj.foo='name';//当前值为name

上面代码中，get即为我们访问属性时调用，set为我们设置属性值时调用。

2.简单的数据双向绑定实现方法





forvue



输入：

可以看到，实现一个简单的数据双向绑定还是不难的，使用Object.defineProperty()来定义属性的set函数，属性被赋值的时候，修改input的value值以及span中的innerHTML，然后监听input的keyup事件，修改对象的属性值，即可以实现这样一个简单的数据双向绑定。

3.实现任务的思路

上面我们只是实现了一个简单的数据双向绑定，而我们真正希望实现的是下面这种方式：



{{text}}

即和vue一样的方式来实现数据的双向绑定，那么我们可以把整个实现过程分为下面几步：

输入框以及文本节点与data中的数据绑定

输入框内容变化时，data中的数据同步变化。即view=>model的变化。

data中的数据变化时，文本节点的内容同步变化。即model=>view的变化。

4.DocumentFragment

如果希望实现任务，我们还需要使用到DocumentFragment文档片段，可以把它看做一个容器，如下所示：

使用文档片段的好处在于：在文档片段上进行操作DOM，而不会影响到真实的DOM，操作完成后，我们就可以添加到真实的DOM上，这样的效率比直接在正式DOM上修改要高很多。

vue在进行编译时，就是将挂载目标的所有子节点劫持到DocumentFragment中，经过一番处理之后，再将DocumentFragment整体返回插入挂载目标。

5.初始化数据绑定

functioncompile(node,vm){
varreg=/\{\{(.*)\}\}/
//如果节点是元素
if(node.nodeType===1){
varattr=node.attributes
for(vari=0;i
6.响应式的数据绑定
我们再来看看任务的实现思路，当我们在输入框输入数据的时候，首先触发input事件（或者keyup,change事件），在相应的事件处理程序中，我们获取输入框的value并赋值给vm实例的text属性。我们会利用defineProperty将data中text设置为vm的访问器属性，因此给vm.text赋值，就会触发set方法。在set方法可主要做两件事，第一，更新属性的值，第二后面再说。




forvue




{{text}}

text属性变化了，set方法触发了，但是文本节点的内容没有变化。如何才能让同样绑定到text的文本节点也同步变化呢？这里有一个知识点：订阅发布模式，订阅发布模式又称为观察者模式，定义一种一对多的关系，让多个观察者同时监听某一个主题对象，这个主题对象的状态发生改变时就会通知所有的观察者对象。
发布者发出通知=>主题对象收到通知并推送给订阅者=>订阅者执行相应的操作

不难看出，这里的思路还是很简单的：发布者负责发布消息、订阅者负责接收接收消息，而最重要的是主题对象，他需要记录所有的订阅这特消息的人，然后负责吧发布的消息通知给哪些订阅了消息的人。

所以，当set方法触发后做的第二件事情就是作为发布者发出通知：“我是属性text，我变了”。文本节点作为订阅者，在接收到消息之后执行相应的更新动作。

回顾一下，每当new一个vue,主要做了两件事情，第一监听数据:observe(data),第二是编译HTML，nodeToFragment(id)
在监听数据的过程中，会为data中的每一个属性生成一个主题对象dep。
在编译HTML的过程中，会为每一个数据绑定相关的节点生成一个订阅者watcher,watcher会将自己添加到相应属性的dep中。
我们已经实现了：修改输入框内容=>在事件回调函数中修改属性值=>触发属性的set方法。
接下来我们要实现的是：发出通知dep.notify()=>触发订阅者update方法=>更新视图。
这里的关键逻辑是：如何将watch添加到关联属性的dep中。

vue中的双向数据绑定原理与常见操作技巧详解

热门推荐

随机推荐