这篇文章给大家分享的是有关使用Proxy怎么实现双向绑定的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。
前言:vue3.0要用Proxy来实现双向绑定,因此先来尝试一下实现方法。
1 Object.defineProperty 实现
原来vue2的实现使用Object.defineProperty,监听set,但对于数组直接下标给数组设置值监听不了。
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, // 不能再重写defineProperty
get: function() {
return val;
},
set: function(newVal) {
console.log('-------通知订阅者--------')
val = newVal;
}
});
}
2 使用Proxy实现
使用Proxy实现原理主要是new一个Proxy对象,代理你的data值,需要注意的一点是,对于数组的方法操作来说,会产生两次赋值操作,一次是添加值,一次是改变他的length值,而对于Object.defineProperty监听不到的数组下标给数组设置值,Proxy是可以监听到的。
function observe(data) {
if (!data || typeof data !== 'object') {
return;
}
// 取出所有属性遍历
Object.keys(data).forEach(function(_k) {
// Proxy不允许绑定在非对象上
if (data[_k] && typeof data[_k] === 'object') {
data[_k] = defineReactive(data[_k]);
}
});
}
function defineReactive(data) {
return new Proxy(data, {
set(target, key, value, proxy) {
// 进行数组操作时,会进行两次set 一次数据改变,一次length改变,两次改变data的值是不变,因此不应该多分发一次消息
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;
}
});
感谢各位的阅读!关于使用Proxy怎么实现双向绑定就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到吧!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。