資訊專欄INFORMATION COLUMN
摘要：取出所有屬性遍歷不允許綁定在非對象上進(jìn)行數(shù)組操作時(shí)，會進(jìn)行兩次一次數(shù)據(jù)改變，一次改變，兩次改變的值是不變，因此不應(yīng)該多分發(fā)一次消息通知訂閱者
前言：vue3.0要用Proxy來實(shí)現(xiàn)雙向綁定，因此先來嘗試一下實(shí)現(xiàn)方法。
1 Object.defineProperty 實(shí)現(xiàn)
原來vue2的實(shí)現(xiàn)使用Object.defineProperty，監(jiān)聽set，但對于數(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對象，代理你的data值，需要注意的一點(diǎn)是，對于數(shù)組的方法操作來說，會產(chǎn)生兩次賦值操作，一次是添加值，一次是改變他的length值，而對于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不允許綁定在非對象上
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í)，會進(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;
}
});
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/102694.html
摘要：綁定實(shí)現(xiàn)的歷史綁定的基礎(chǔ)是事件。但臟檢查機(jī)制隨之帶來的就是性能問題。是谷歌對于簡化雙向綁定機(jī)制的嘗試，在中引入。掙扎了一段時(shí)間后谷歌團(tuán)隊(duì)宣布收回的提議，并在中完全刪除了實(shí)現(xiàn)。自然全軍覆沒其他各大瀏覽器實(shí)現(xiàn)的時(shí)間也較晚。 綁定實(shí)現(xiàn)的歷史 綁定的基礎(chǔ)是 propertyChange 事件。如何得知 viewModel 成員值的改變一直是開發(fā) MVVM 框架的首要問題。主流框架的處理有一下三...
摘要：綁定實(shí)現(xiàn)的歷史綁定的基礎(chǔ)是事件。但臟檢查機(jī)制隨之帶來的就是性能問題。是谷歌對于簡化雙向綁定機(jī)制的嘗試，在中引入。掙扎了一段時(shí)間后谷歌團(tuán)隊(duì)宣布收回的提議，并在中完全刪除了實(shí)現(xiàn)。自然全軍覆沒其他各大瀏覽器實(shí)現(xiàn)的時(shí)間也較晚。 綁定實(shí)現(xiàn)的歷史 綁定的基礎(chǔ)是 propertyChange 事件。如何得知 viewModel 成員值的改變一直是開發(fā) MVVM 框架的首要問題。主流框架的處理有一下三...
摘要：只能劫持對象的屬性因此我們需要對每個(gè)對象的每個(gè)屬性進(jìn)行遍歷。屬性對于怎么拼接到和上面說到了怎么使用做數(shù)據(jù)劫持，怎么結(jié)合訂閱發(fā)布，請結(jié)合數(shù)據(jù)雙向綁定探究對照著數(shù)據(jù)劫持的部分去替換看一下。 前言 2018年11月16日，關(guān)注vue的人都知道這個(gè)時(shí)間點(diǎn)發(fā)生了什么事兒吧。vue3.0更新內(nèi)容 研究數(shù)據(jù)雙向綁定的大佬們都在開始猜測這個(gè)新機(jī)制了，用原生Proxy替換Object.definePro...
閱讀 4077·2021-09-22 16:03
閱讀 5495·2021-09-22 15:40
閱讀 1258·2021-09-06 15:02
閱讀 925·2019-08-30 15:53
閱讀 2317·2019-08-29 15:35
閱讀 1166·2019-08-23 18:22
閱讀 3412·2019-08-23 16:06
閱讀 703·2019-08-23 12:27
