如果在實例創建之後添加新的屬性到實例上,他不會觸發視圖更新。
官方說明:
https://cn.vuejs.org/v2/guide/reactivity.html#%E5%A6%82%E4%BD%95%E8%BF%BD%E8%B8%AA%E5%8F%98%E5%8C%96
下面這段是官方的一段
當你把一個普通的 JavaScript 對象傳入 Vue 實例作爲 data
選項,Vue 將遍歷此對象所有的屬性,並使用 Object.defineProperty
把這些屬性全部轉爲 getter/setter;這些 getter/setter 對用戶來說是不可見的,但是在內部它們讓 Vue 能夠追蹤依賴,在屬性被訪問和修改時通知變更。
差不多的意思就是,在初始化實例時,VUE會將對象屬性轉化爲帶getter/setter的,只有setter/getter,頁面上的數據才能被監聽並修改。
這裏記一個開發中遇到的問題:
代碼如下:在回調方法裏又再次請求後端,然後又對對象內部屬性賦值,結果可以看第二張圖(瀏覽器的調試圖)
可以看到,這個menu對象的children和number屬性有值,但是沒有setter/getter方法,
渲染後的結果圖如下,第二次回調方法裏的數據未被渲染到頁面,
而要讓後面添加的數據在頁面被渲染,就要讓VUE知道我們新添加的屬性,使用vue.$set (object,key,value)方法添加屬性
修改:
調試圖:可以看到children和number已經有setter/getter方法了
渲染結果: