vue是當今前端很流行的一種框架，但是vue也是有一定的缺陷的，你有過了解嗎？下面小猿圈web前端老師就為你解析一下vue數(shù)據(jù)雙向綁定的缺陷，希望對你有所幫助，下面我們一起了解一下吧。
1、vue 實例創(chuàng)建后，再向其上添加屬性，不能監(jiān)聽
當創(chuàng)建一個Vue實例時，將遍歷所有DOM對象，并為每個數(shù)據(jù)屬性添加了get和set。get和set 允許Vue觀察數(shù)據(jù)的更改并觸發(fā)更新。但是，如果你在Vue實例化后添加（或刪除）一個屬性，這個屬性不會被vue處理，改變get和set。
如果你不想創(chuàng)建一個新的對象，你可以使用Vue.set設置一個新的對象屬性。該方法確保將屬性創(chuàng)建為一個響應式屬性，并觸發(fā)視圖更新：
function addToCart (id) {
var item = this.cart.findById(id);
if (item) {
item.qty++
} else {
// 不要直接添加一個屬性，比如 item.qty = 1
// 使用Vue.set 創(chuàng)建一個響應式屬性
Vue.set(item, 'qty', 1)
this.cart.push(item)
}
}
addToCart(myProduct.id);
2、數(shù)組
Object.defineProperty的一個缺陷是無法監(jiān)聽數(shù)組變化。
當直接使用索引(index)設置數(shù)組項時，不會被vue檢測到：
app.myArray[index]=newVal;
然而Vue的文檔提到了Vue是可以檢測到數(shù)組變化的，但是只有以下八種方法,vm.items[indexOfItem]=newValue這種是無法檢測的。
push();
pop();
shift();
unshift();
splice();
sort();
reverse();
同樣可以使用Vue.set來設置數(shù)組項：
Vue.set(app.myArray,index,newVal);
3、proxy與defineproperty
Proxy對象在ES2015規(guī)范中被正式發(fā)布,用于定義基本操作的自定義行為（如屬性查找，賦值，枚舉，函數(shù)調用等）。
它在目標對象之前架設一層“攔截”，外界對該對象的訪問，都必須先通過這層攔截，因此提供了一種機制，可以對外界的訪問進行過濾和改寫。
我們可以這樣認為,Proxy是Object.defineProperty的全方位加強版,具體的文檔可以查看此處;
Proxy有多達13種攔截方法,不限于apply、ownKeys、deleteProperty、has等等，是Object.defineProperty不具備的。
Proxy返回的是一個新對象,我們可以只操作新的對象達到目的,而Object.defineProperty只能遍歷對象屬性直接修改。
Proxy作為新標準將受到瀏覽器廠商重點持續(xù)的性能優(yōu)化，也就是傳說中的新標準的性能紅利。
當然,Proxy的劣勢就是兼容性問題,而且無法用polyfill磨平,因此Vue的作者才聲明需要等到下個大版本(3.0)才能用Proxy重寫。
以上就是小猿圈web前端講師給大家分享的vue數(shù)據(jù)雙向綁定的缺點，正在學習前端的或者已處工作崗位的小伙伴們有所了解了嗎？希望對你們們有所幫助，想要了解更多內容的小伙伴可以登錄小猿圈官網了解。
