本文參考自:https://www.w3cplus.com/vue/vue-reactivity-and-pitfalls.html
1、概述
當創建一個Vue實例時,每個數據屬性、組件屬性等都是可以遍歷的,並為每個數據屬性添加了getter
和setter
。getter
和setter
允許Vue觀察數據的更改並觸發更新。
如果你在Vue實例化后添加(或刪除)一個屬性(例如在方法或生命周期鈎子中),Vue是不知道它的。
2、更新響應式對象
使用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);