當vue中data里聲明或者已經賦值過的對象、數組時,向對象中添加新的屬性,如果更新此屬性的值,頁面不會更新視圖。
舉個栗子:當我點擊按鈕想要改變message中的值時
此時當我點擊按鈕,頁面並不會發生改變。
官方定義:如果在實例創建之后添加新的屬性到實例上,它不會觸發視圖更新。
當頁面初始化時候,vue會遍歷data對象所有的屬性,並使用object.defineProperty把這些屬性全部轉化為getter/setter,所以屬性必須在 data 對象上存在才能讓 Vue 轉換它,這樣才能讓它是響應的。
Vue官方文檔給我們提供了兩種方法:Vue.set()和this.$set()
兩種方法作用一樣,參數也是一致的。
區別:Vue.set 可以設置實例創建之后添加的屬性,而this.$set只能設置實例創建后存在的屬性