Vue3.0双向绑定原理的实现方法_vue3实现自定义组件v-model双向数据绑定的方式 - CSDN文库

5星 · 超过95%的资源 18 浏览量更新于2023-05-04 收藏 53KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源推荐

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

proxy方法方法

vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过new Proxy()来劫持各个属性的setter，getter，在数据变动时发布

消息给订阅者，触发相应的监听回调。

Vue 3.0与Vue 2.0的区别仅是数据劫持的方式由Object.defineProperty更改为Proxy代理，其他代码不变。可查看Vue 2.0双向

绑定原理的实现

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

1、定义构造函数、定义构造函数

function Vue(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) {

let nodes = el.children; //获取挂载节点的子节点

for (var i = 0; i < nodes.length; i++) {

var node = nodes[i];

if (node.children.length) {

this.compile(node) //递归获取子节点

}

if (node.hasAttribute('l-model')) { //当子节点存在l-model指令

let attrVal = node.getAttribute('l-model'); //获取属性值

node.addEventListener('input', (() => {

this.deps[attrVal].push(new Watcher(node, "value", this, attrVal)); //添加一个订阅者

let thisNode = node;

return () => {

this.$data[attrVal] = thisNode.value //更新数据层的数据

}

})())

}

if (node.hasAttribute('l-html')) {

let attrVal = node.getAttribute('l-html'); //获取属性值

this.deps[attrVal].push(new Watcher(node, "innerHTML", this, attrVal)); //添加一个订阅者

}

if (node.innerHTML.match(/{{([^\{|\}]+)}}/)) {

let attrVal = node.innerHTML.replace(/[{{|}}]/g, ''); //获取插值表达式内容

this.deps[attrVal].push(new Watcher(node, "innerHTML", this, attrVal)); //添加一个订阅者

}

if (node.hasAttribute('l-on:click')) {

let attrVal = node.getAttribute('l-on:click'); //获取事件触发的方法名

node.addEventListener('click', this.$methods[attrVal].bind(this.$data)); //将this指向this.$data

}

}

}

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

Liu.prototype.observer = function (data) {

const that = this;

for(var key in data){

that.deps[key] = []; //初始化所有订阅者对象{msg: [订阅者], info: []}

}

let handler = {

get(target, property) {

return target[property];

},

set(target, key, value) {

let res = Reflect.set(target, key, value);

var watchers = that.deps[key];

watchers.map(item => {

item.update();

});

return res;

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

weixin_38670707

粉丝: 9
资源: 921

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈