好资源导航 » 文章资讯 » Vue 3.0双向绑定原理的实现方法

Vue 3.0双向绑定原理的实现方法

2023-08-10 12:47:04 80

proxy方法

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

Vue3.0与Vue2.0的区别仅是数据劫持的方式由Object.defineProperty更改为Proxy代理，其他代码不变。可查看Vue2.0双向绑定原理的实现

具体实现过程的代码如下：

1、定义构造函数

functionVue(option){
this.$el=document.querySelector(option.el);//获取挂载节点
this.$data=option.data;
this.$methods=option.methods;
this.deps={};//所有订阅者集合目标格式（一对多的关系）：{msg:[订阅者1,订阅者2,订阅者3],info:[订阅者1,订阅者2]}
this.observer(this.$data);//调用观察者
this.compile(this.$el);//调用指令解析器
}

2、定义指令解析器

Vue.prototype.compile=function(el){
letnodes=el.children;//获取挂载节点的子节点
for(vari=0;i{
this.deps[attrVal].push(newWatcher(node,"value",this,attrVal));//添加一个订阅者
letthisNode=node;
return()=>{
this.$data[attrVal]=thisNode.value//更新数据层的数据
}
})())
}
if(node.hasAttribute('l-html')){
letattrVal=node.getAttribute('l-html');//获取属性值
this.deps[attrVal].push(newWatcher(node,"innerHTML",this,attrVal));//添加一个订阅者
}
if(node.innerHTML.match(/{{([^\{|\}]+)}}/)){
letattrVal=node.innerHTML.replace(/[{{|}}]/g,'');//获取插值表达式内容
this.deps[attrVal].push(newWatcher(node,"innerHTML",this,attrVal));//添加一个订阅者
}
if(node.hasAttribute('l-on:click')){
letattrVal=node.getAttribute('l-on:click');//获取事件触发的方法名
node.addEventListener('click',this.$methods[attrVal].bind(this.$data));//将this指向this.$data
}
}
}

3、定义观察者(区别在这一块代码)

Liu.prototype.observer=function(data){
constthat=this;
for(varkeyindata){
that.deps[key]=[];//初始化所有订阅者对象{msg:[订阅者],info:[]}
}
lethandler={
get(target,property){
returntarget[property];
},
set(target,key,value){
letres=Reflect.set(target,key,value);
varwatchers=that.deps[key];
watchers.map(item=>{
item.update();
});
returnres;
}
}
this.$data=newProxy(data,handler);
}

4、定义订阅者

functionWatcher(el,attr,vm,attrVal){
this.el=el;
this.attr=attr;
this.vm=vm;
this.val=attrVal;
this.update();//更新视图
}

5、更新视图

Watcher.prototype.update=function(){
this.el[this.attr]=this.vm.$data[this.val]
}

以上代码定义在一个Vue.js文件中，在需要使用双向绑定的地方引入即可。

尝试使用一下：







Document









点我
{{msg}}

更多教程点击《Vue.js前端组件学习教程》，欢迎大家学习阅读。

关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
514930285
czq8825@qq.com

Vue 3.0双向绑定原理的实现方法

热门推荐

随机推荐