Vue.js 2 vs Vue.js 3的實現 – 雲棲社區
vue.js核心團隊已經討論過將在Vue3實現的變化。雖然API不會改變，但是數據響應機制（譯者注：對數據改變的監聽和通知）發生了變化。這意味着什么呢，同時它對你意味着什么呢？
Vue 2 實現
Vue.js 2 中是通過在Object.defineProperty方法中定義的getters和setters來實現數據響應的。我們看下Vue的響應機制簡化版。
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get:function(){
return value;
},
set:function(newValue){
if(value !== newValue){
value = newValue;
tellTheWorldIhaveChanged(); //somebody is watching!
}
}
});
使用這種類型的設置，每當我們改變屬性，它會通知監聽者和依賴者，讓其知道這里發生了變化。此屬性設置是在初始化模型和顯式調用Vue.set/vm.$set時發生的。
然而采用這種設置，以下這些操作需要額外的幫助：
- 數組按照索引進行更新
data(){
return {
names:[]
}
}
...
this.persons[0] = 'John Elway';
你可能知道這不會觸發更新。事實上， the holy guide of Vue明確提到關於數組的警告。為什么會這樣的呢？因為數組的setter沒辦法檢測到按照索引賦值的操作。
解決它的一個辦法就是使用Vue.set
Vue.set(this.names, 0, 'John Elway');
不過，Vue已經封裝了幾個數組方法給我們，因此我們可以通過這些數組方法來更新我們的數組。
this.names.push('John Elway');
2. 動態添加屬性
data(){
return {
names:[]
}
}
...
this.$data.lastAddedName = 'John Elway';
不是很好的例子，對嗎？這里我可能提前知道這個屬性已經存在，但也有可能我們連屬性的名稱都不知道。JavaScript 松散的類型允許我們很輕易地添加屬性。然而Vue的響應機制並不知道我們添加了這個屬性。
讓我來拯救這一切! — Vue.set
Vue.set(this.$data,'lastAddedName','John Elway');
如果我們有辦法不用vue.set來解決這些問題，而是直接使用數組索引就好了。
Vue 3 實現
歡迎來到通過代理（proxy）實現的響應世界。代理是在ES6（又名ES2015）中引入的一個特性（所以其實它已經出現很久了）。由此，我很確定你已經了解它了，但可能無法在生產環境中使用它們。因為他們是沒有替代方法的。沒有polyfill，在舊瀏覽器中無法用別的方式替代。
幸運地是，語法並不荒謬。事實上，這有點眼熟。
let data = {
names:[]
};
data.names = new Proxy(data.names,{
set:function(obj, prop, value){
if(obj[prop] !== value){
obj[prop] = value;
tellTheWorldIhaveChanged();
}
}
});
這個代理不僅會捕捉我們前面提到的數組索引，而且當數組方法被調用時也會觸發。並且不需要包裝器。
動態添加屬性會怎樣？
data = new Proxy(data,{
set:function(obj, prop, value){
if(obj[prop] !== value){
obj[prop] = value;
tellTheWorldIhaveChanged();
}
}
});
data.lastAddedName = 'John Elway'; //tellTheWorldIhaveChanged()
天哪，真是太棒了。讓我們在Change.org上申請，快速創建一個吧！
總結
我在即將發布的2.5版本之前不久寫的這篇文章。Vue 3沒有被談論很多，但我真的很期待上述提到的變化。也就是說，我不能在短期內在工作項目上使用它。為什么？Vue 3不能用於Internet Explorer，並且Babel不能解決兼容問題。
盡管存在兼容性問題，采用新的響應機制有以下幾個長遠的好處。
-
簡化源 代碼— 這種改寫讓團隊對數組函數進行封裝，減少他們做類型檢查的次數。
-
新手容易學習 — 從響應機制中去掉之前版本里的注意事項將有助於那些學習Vue的新手。論壇上關於數組響應性的一系列問題就會消失。
-
更好的性能* — 我聽說有些人認為這將加快響應系統的速度。但是它現在已經很快了，所以我還沒有完全接受這一觀點。
感謝閱讀！如果您發現任何錯誤，請讓我知道。
更新
據說這個使用代理的版本將在當前版本號后面添加 _ -next_ （就像esnext），而不是用“Vue 3”。此更新可能跟Vue 2.6同時發布。所以，將會發行Vue2.6和Vue 2.6-next。這將消除對API的困惑。
本文轉載自：眾成翻譯
譯者：foreverjiangting
審校: huangxiaolu
鏈接：http://www.zcfy.cc/article/4369
原文：https://blog.cloudboost.io/reactivity-in-vue-js-2-vs-vue-js-3-dcdd0728dcdf