目錄
⊙常見雙向綁定的實(shí)現(xiàn)方法
⊙基于數(shù)據(jù)劫持雙向綁定的優(yōu)點(diǎn)
⊙基于Object.defineProperty雙向綁定的兩個(gè)缺點(diǎn)
⊙Proxy實(shí)現(xiàn)雙向綁定的特點(diǎn)
一.常見雙向綁定的方法
1.KnockoutJS基于觀察者模式的雙向綁定络拌；
2.Ember基于數(shù)據(jù)模型春贸；
3.Angular基于臟檢查的雙向綁定遗遵，使用主動(dòng)遍歷
4.基于數(shù)據(jù)劫持的雙向綁定
(1)Vue現(xiàn)在使用的Object.defineProperty
(2)ES6新增的Proxy，尤大也說Vue3.0換成這個(gè)了允粤。
二.數(shù)據(jù)劫持的優(yōu)點(diǎn)
1.無需顯示調(diào)用
data.name = '懸筆e絕';就能直接觸發(fā)變更
不用像react使用setState顯示調(diào)用类垫；
2.精確得到變化數(shù)據(jù)
劫持屬性的setter，變化時(shí)可以得到newVal悉患；
否則只知道數(shù)據(jù)變了榆俺，具體需要大量的diff才能找出變化值
三.Object.defineProperty的缺點(diǎn)
1.無法監(jiān)聽數(shù)組的變化
根本原因：數(shù)組沒有setter和getter
因?yàn)閿?shù)組的長度不確定茴晋，可能會(huì)很大，出于性能考慮就沒有setter和getter市袖。
注：vue文檔說可以檢測數(shù)組變化掀虎，其實(shí)是使用了奇技淫巧付枫，
感興趣的話阐滩，我之后再補(bǔ)充。
2.只能劫持對(duì)象的屬性
我們需要對(duì)每個(gè)對(duì)象的每個(gè)屬性進(jìn)行遍歷掂榔，如果屬性值也是對(duì)象症杏，就要深度遍歷了厉颤。
所以下面要放大招了~
四.Proxy的特點(diǎn)
嚴(yán)格講proxy叫做代理穴豫，提供了一種機(jī)制能對(duì)外界訪問進(jìn)行過濾和改寫精肃，簡單理解Proxy是Object.defineProperty的全方位加強(qiáng)版
優(yōu)點(diǎn)
（1）直接監(jiān)聽整個(gè)對(duì)象帜乞，而不是屬性
（2）可以監(jiān)聽數(shù)組的變化
（3）Proxy有多達(dá)13種攔截方法，很多都是Object.defineProperty不具備的习柠。
（4）返回一個(gè)新的對(duì)象，不是像Object.defineProperty那樣直接修改對(duì)象屬性资溃；符合immortal思想烈炭；
（5）新標(biāo)準(zhǔn)的性能紅利，會(huì)受到瀏覽器廠商重點(diǎn)持續(xù)的心性能優(yōu)化
缺點(diǎn)
兼容性問題，且無法用polyfill磨平卑惜，所以尤大才說要等到大版本3.0再用Proxy重寫了。
PS:前端程序員一枚更米，熱愛分享web技術(shù)，新媒體音視頻毫痕，航拍攝影知識(shí)征峦；公眾號(hào)“懸筆e絕”
