vue使用Proxy實(shí)現(xiàn)雙向綁定的方法示例
前言：vue3.0要用Proxy來(lái)實(shí)現(xiàn)雙向綁定，因此先來(lái)嘗試一下實(shí)現(xiàn)方法。
1 Object.defineProperty 實(shí)現(xiàn)
原來(lái)vue2的實(shí)現(xiàn)使用Object.defineProperty，監(jiān)聽set，但對(duì)于數(shù)組直接下標(biāo)給數(shù)組設(shè)置值監(jiān)聽不了。
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); // 監(jiān)聽子屬性
Object.defineProperty(data, key, {
enumerable: true, // 可枚舉
configurable: false, // 不能再重寫defineProperty
get: function() {
return val;
},
set: function(newVal) {
console.log('-------通知訂閱者--------')
val = newVal;
}
});
}
2 使用Proxy實(shí)現(xiàn)
使用Proxy實(shí)現(xiàn)原理主要是new一個(gè)Proxy對(duì)象，代理你的data值，需要注意的一點(diǎn)是，對(duì)于數(shù)組的方法操作來(lái)說(shuō)，會(huì)產(chǎn)生兩次賦值操作，一次是添加值，一次是改變他的length值，而對(duì)于Object.defineProperty監(jiān)聽不到的數(shù)組下標(biāo)給數(shù)組設(shè)置值，Proxy是可以監(jiān)聽到的。
function observe(data) {
if (!data || typeof data !== 'object') {
return;
}
// 取出所有屬性遍歷
Object.keys(data).forEach(function(_k) {
// Proxy不允許綁定在非對(duì)象上
if (data[_k] && typeof data[_k] === 'object') {
data[_k] = defineReactive(data[_k]);
}
});
}
function defineReactive(data) {
return new Proxy(data, {
set(target, key, value, proxy) {
// 進(jìn)行數(shù)組操作時(shí)，會(huì)進(jìn)行兩次set 一次數(shù)據(jù)改變，一次length改變，兩次改變data的值是不變，因此不應(yīng)該多分發(fā)一次消息
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;
}
});
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue中封裝組件的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),對(duì)我們深入了解vue有一定的幫助,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-10-10
Vue3+Element?Plus按需引入(自動(dòng)導(dǎo)入)詳解
element-plus根據(jù)官網(wǎng)文檔,推薦用戶采用按需導(dǎo)入的方式進(jìn)行導(dǎo)入,下面這篇文章主要給大家介紹了關(guān)于Vue3+Element?Plus按需引入(自動(dòng)導(dǎo)入)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10
這篇文章主要介紹了Vue中全局限制輸入特殊字符方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
我們?cè)谇岸碎_發(fā)中經(jīng)?？吹?visible.sync這種修飾符，很多人不知道這是干什么的，在使用ElementUI的時(shí)候，里面有個(gè)彈窗el-dialog組件的時(shí)候會(huì)有用到:visible.sync，今天小編帶領(lǐng)大家學(xué)習(xí)下:visible.sync 的作用，感興趣的朋友一起看看吧2022-11-11
vue項(xiàng)目中?jsconfig.json概念及使用步驟
這篇文章主要介紹了vue項(xiàng)目中?jsconfig.json是什么,本文僅僅簡(jiǎn)單介紹了?jsconfig?.json?的一些基本配置，而?jsconfig?.json提供了大量能使我們快速便捷提高代碼效率的方法，需要的朋友可以參考下2022-07-07
Vue.js頁(yè)面驗(yàn)證跳轉(zhuǎn)功能實(shí)現(xiàn)
這篇文章主要介紹了Vue.js頁(yè)面驗(yàn)證跳轉(zhuǎn)功能實(shí)現(xiàn),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-04-04
本文給大家分享的是個(gè)人在使用vue.js制作的文章和評(píng)論的分頁(yè)組件，并使用webpack打包起來(lái)，這里推薦給大家，有需要的小伙伴可以參考下2016-06-06
vue2.0中vue-cli實(shí)現(xiàn)全選、單選計(jì)算總價(jià)格的實(shí)例代碼
本篇文章主要介紹了vue2.0中vue-cli實(shí)現(xiàn)全選、單選計(jì)算總價(jià)格的實(shí)例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
vue.js實(shí)現(xiàn)簡(jiǎn)單的計(jì)算器功能
這篇文章主要為大家詳細(xì)介紹了vue.js實(shí)現(xiàn)簡(jiǎn)單的計(jì)算器功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-02-02
這篇文章主要介紹了Vue引入部分element.ui組件的一些小坑記錄,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10