以下內容來自英文版官方文檔:https://vuejs.org/v2/guide/list.html#Array-Change-Detection(但怎么說呢 英文其實比中文更深究一點emmm 餓 其實中文也有 在https://cn.vuejs.org/v2/guide/list.html#%E5%8F%98%E6%9B%B4%E6%96%B9%E6%B3%95 但是開始沒找到)
1.對於更改了原數組的方法,例如
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
vue是進行了監聽的重寫所以可以知道數組的變更。
2.對於返回新數組的:例如 filter()
、concat()
和 slice()
(其實還有map這種,簡稱f smc)vue 為了使得 DOM 元素得到最大范圍的重用而實現了一些智能的啟發式方法,所以用一個含有相同元素的數組去替換原來的數組是非常高效的操作。
3.Vue 無法檢測 property 的添加或移除。由於 Vue 會在初始化實例時對 property 執行 getter/setter 轉化,所以 property 必須在 data
對象上存在才能讓 Vue 將它轉換為響應式的。
在data之外定義是不行的。
4.
Vue 不能檢測以下數組的變動:
- 當你利用索引直接設置一個數組項時,例如:
vm.items[indexOfItem] = newValue
- 當你修改數組的長度時,例如:
vm.items.length = newLength
以下兩種方式都可以實現和 vm.items[indexOfItem] = newValue
相同的效果,同時也將在響應式系統內觸發狀態更新:
// Vue.set Vue.set(vm.items, indexOfItem, newValue)
// Array.prototype.splice vm.items.splice(indexOfItem, 1, newValue)
回想一下splice(斯普萊斯): 數組在前,參數是下標,刪除1,新增加的那個數組
也可以使用vm.$set
實例方法,該方法是全局方法 Vue.set
的一個別名:
可以使用this.$set(數組,id,值)來監聽
5.Vue 在更新 DOM 時是異步執行的。只要偵聽到數據變化,Vue 將開啟一個隊列,並緩沖在同一事件循環中發生的所有數據變更。如果同一個 watcher 被多次觸發,只會被推入到隊列中一次。這種在緩沖時去除重復數據對於避免不必要的計算和 DOM 操作是非常重要的。然后,在下一個的事件循環“tick”中,Vue 刷新隊列並執行實際 (已去重的) 工作
也就是說不是實時而是異步的,有一定的延遲,如果用nexttick就能馬上執行了
因為 $nextTick()
返回一個 Promise
對象,所以你可以使用新的 ES2017 async/await 語法完成相同的事情:
methods: {
updateMessage: async function () { this.message = '已更新' console.log(this.$el.textContent) // => '未更新' await this.$nextTick() console.log(this.$el.textContent) // => '已更新' } }
響應式這節課:https://cn.vuejs.org/v2/guide/reactivity.html#%E6%A3%80%E6%B5%8B%E5%8F%98%E5%8C%96%E7%9A%84%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9 (真不戳)