小猿圈解析vue數據雙向綁定的缺點

vue是當今前端很流行的一種框架，可是vue也是有必定的缺陷的，你有過了解嗎？下面小猿圈web前端老師就爲你解析一下vue數據雙向綁定的缺陷，但願對你有所幫助，下面咱們一塊兒瞭解一下吧。

一、vue 實例建立後，再向其上添加屬性，不能監聽

當建立一個Vue實例時，將遍歷全部DOM對象，併爲每一個數據屬性添加了get和set。get和set 容許Vue觀察數據的更改並觸發更新。可是，若是你在Vue實例化後添加（或刪除）一個屬性，這個屬性不會被vue處理，改變get和set。

若是你不想建立一個新的對象，你可使用Vue.set設置一個新的對象屬性。該方法確保將屬性建立爲一個響應式屬性，並觸發視圖更新：

function addToCart (id) {
var item = this.cart.findById(id);
if (item) {
item.qty++
} else {
// 不要直接添加一個屬性，好比 item.qty = 1
// 使用Vue.set 建立一個響應式屬性
Vue.set(item, 'qty', 1)
this.cart.push(item)
}
}
addToCart(myProduct.id);

二、數組

Object.defineProperty的一個缺陷是沒法監聽數組變化。

當直接使用索引(index)設置數組項時，不會被vue檢測到：

app.myArray[index]=newVal;
然而Vue的文檔提到了Vue是能夠檢測到數組變化的，可是隻有如下八種方法,vm.items[indexOfItem]=newValue這種是沒法檢測的。

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

一樣可使用Vue.set來設置數組項：

Vue.set(app.myArray,index,newVal);

三、proxy與defineproperty

Proxy對象在ES2015規範中被正式發佈,用於定義基本操做的自定義行爲（如屬性查找，賦值，枚舉，函數調用等）。

它在目標對象以前架設一層「攔截」，外界對該對象的訪問，都必須先經過這層攔截，所以提供了一種機制，能夠對外界的訪問進行過濾和改寫。

咱們能夠這樣認爲,Proxy是Object.defineProperty的全方位增強版,具體的文檔能夠查看此處;

Proxy有多達13種攔截方法,不限於apply、ownKeys、deleteProperty、has等等，是Object.defineProperty不具有的。

Proxy返回的是一個新對象,咱們能夠只操做新的對象達到目的,而Object.defineProperty只能遍歷對象屬性直接修改。

Proxy做爲新標準將受到瀏覽器廠商重點持續的性能優化，也就是傳說中的新標準的性能紅利。
固然,Proxy的劣勢就是兼容性問題,並且沒法用polyfill磨平,所以Vue的做者才聲明須要等到下個大版本(3.0)才能用Proxy重寫。

以上就是小猿圈web前端講師給你們分享的vue數據雙向綁定的缺點，正在學習前端的或者已處工做崗位的小夥伴們有所瞭解了嗎？但願對大家們有所幫助，想要了解更多內容的小夥伴能夠登陸小猿圈官網瞭解。