本文摘自PHP中文网,作者不言,侵删。
本篇文章给大家带来的内容是关于使用Proxy实现双向绑定的方法介绍(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。前言:vue3.0要用Proxy来实现双向绑定,因此先来尝试一下实现方法。
1 Object.defineProperty 实现
原来vue2的实现使用Object.defineProperty,监听set,但对于数组直接下标给数组设置值监听不了。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | function observe(data) {
if (!data || typeof data !== 'object' ) {
return ;
}
Object.keys(data).forEach( function (key) {
defineReactive(data, key, data[key]);
});
};
function defineReactive(data, key, val) {
observe(val);
Object.defineProperty(data, key, {
enumerable: true,
configurable: false,
get: function () {
return val;
},
set: function (newVal) {
console.log( '-------通知订阅者--------' )
val = newVal;
}
});
}
|
2 使用Proxy实现
使用Proxy实现原理主要是new一个Proxy对象,代理你的data值,需要注意的一点是,对于数组的方法操作来说,会产生两次赋值操作,一次是添加值,一次是改变他的length值,而对于Object.defineProperty监听不到的数组下标给数组设置值,Proxy是可以监听到的。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | function observe(data) {
if (!data || typeof data !== 'object' ) {
return ;
}
Object.keys(data).forEach( function (_k) {
if (data[_k] && typeof data[_k] === 'object' ) {
data[_k] = defineReactive(data[_k]);
}
});
}
function defineReactive(data) {
return new Proxy(data, {
set(target, key, value, proxy) {
if (
Object.prototype.toString.call(data) === "[object Array]" &&
key === "length"
) {
Reflect.set(target, key, value, proxy);
return true;
}
observe(data);
Reflect.set(target, key, value, proxy);
console.log( '-------通知订阅者--------' )
return true;
}
});
|
本篇文章到这里就已经全部结束了,更多其他精彩内容可以关注PHP中文网的JavaScript教程视频栏目!
以上就是使用Proxy实现双向绑定的方法介绍(代码)的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
javascript如何进行数值交换
12个编写干净且可扩展的javascript代码的小技巧
js怎么设置css实现隐藏
js如何使用索引访问数组对象中的元素
介绍javascript作用域和闭包
javascript中调用函数的方法有哪些
什么是vue.js
javascript怎么设置input value属性的值
给大家分享九个 javascript 图片懒加载库
react表单元素的用法介绍(附代码)
更多相关阅读请进入《javascript》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 使用Proxy实现双向绑定的方法介绍(代码)