proxy的觀察者模式探索

vueconf大會，尤小右實錘vue3.0將改defineprototype為proxy。

1.在vue中，object.defineproperty無法監控到陣列下標的變化，導致直接通過陣列的下標給陣列設定值，不能實時響應。為了解決這個問題，經過vue內部處理後可以使用以下幾種方法來監聽陣列。（事實上，object.defineproperty本身是可以監控到陣列下標的變化的，參vue為什麼不能檢測陣列變動）

123

4567

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

由於只針對了以上八種方法進行了hack處理,所以其他陣列的屬性也是檢測不到的，還是具有一定的侷限性。

object.defineproperty只能劫持物件的屬性,因此我們需要對每個物件的每個屬性進行遍歷。vue裡，是通過遞迴以及遍歷data 物件來實現對資料的監控的，如果屬性值也是物件那麼需要深度遍歷,顯然如果能劫持乙個完整的物件，不管是對操作性還是效能都會有乙個很大的提公升。

而要取代它的proxy有以下兩個優點;

可以劫持整個物件，並返回乙個新物件

有13種劫持操作

vue2.x之前之所以不用proxy，主要proxy是es6提供的新特性，相容性不好，最主要的是這個屬性無法用polyfill來相容。

■ observer: 基於proxy處理**，當屬性修改時通知dep。

■ compile: 解析指令，訂閱資料變化，繫結更新函式。根據對應指令繫結相應watcher。

■ dep: 為全域性物件subscribe新增對應屬性,當資料變化，通知watcher，呼叫相關update方法

■ watcher: 主要update方法，修改相關node節點資料。

1. 頁面結構

123

4567

8910

您輸入的是：

2. 參照vue呼叫

123

4567

891011

1213

new proxyvue(,
methods: 
}});

proxyvue實現

123

4567

891011

1213

1415

1617

1819

2021

2223

2425

2627

2829

3031

3233

3435

3637

3839

4041

4243

4445

4647

4849

5051

5253

5455

5657

5859

6061

6263

6465

6667

6869

7071

7273

7475

7677

7879

8081

8283

8485

8687

8889

9091

9293

9495

// 渲染todolist列表
const render = 
},addlist: function (val) 
};class proxyvue ,
this.$methods = this.$options.methods;
const data = (this._data = this.$options.data);
// subscribe物件結構：
this.subscribe = {}; 
this.observe(data);
this.compile(options.el);
} observe(data) )
return res;}}
this.$data = new proxy(data, handel);
} compile(el));
}if (node.hasattribute('v-bind')) 
if (node.hasattribute('v-click')) 
})} // 訂閱訊息
publish(watcher) 
this.subscribe[watcher.property].push(watcher);
}}class watcher
update()

proxy的觀察者模式探索

ES6 Proxy 實現觀察者模式

python觀察者模式 python 觀察者模式

觀察者模式

proxy的觀察者模式探索

ES6 Proxy 實現觀察者模式

python觀察者模式 python 觀察者模式

觀察者模式

相關推薦