為什麼vue.js使用apply操作this.list陣列，無法觸發檢視變化？

貘吃饃香2017-03-01 13:12:41

瀉藥

你加個

console。log（this。list。push。toString（））

就知道了

這個push是個同名方法

並非 native 的 array push

只有用它這個“假”方法才能執行監聽函式更新檢視

你直接用 Array。prototype。push。apply

這種陣列的原生方法就繞過監聽去了

檢視肯定不會變化

施宏華2017-03-01 13:33:15

因為vue對陣列的繫結實現是透過重寫陣列的方法實現的。

https：//

github。com/vuejs/vue/bl

ob/dev/src/core/observer/array。js

this。list。push方法呼叫的時候會在呼叫Array。prototype。push之外呼叫dep。notify通知這一變更，但是如果用Array。prototype。push。apply來運算元組的話，呼叫的是原生的方法，是無法通知這一變更的。

那為啥有了this。list。push（‘pear’）之後，Array。prototype。push。apply操作的部分也生效了呢？因為vue的檢視重新整理不是同步的。可以看一下dep。notify方法實際上是觸發了元件內部一個watcher佇列的update方法，而update方法在不設定同步為sync的情況下，會先將這個watcher放到一個要變更的佇列裡，然後nextTick呼叫一次性觸發所有的資料更新，再用虛擬dom重新整理檢視。

因此demo中的呼叫順序就變成了 list。push => 通知update => 再次push => nextTick中觸發資料更新及檢視變更。

張正誠2017-03-03 13:02:33

因為vue。js對你掛在data上的陣列的push方法進行了包裝。換句話說，你這裡用的push不是它包裝的那個push。

moran2017-06-12 10:43:44

vue已經對陣列操作進行封裝，可以使用this。list = this。list。concat（newComing）

bellalulu2017-10-26 15:45:24

最近也出現了這個問題，正好找到答案~感謝

也可以用es6的擴充套件運算子。。。

this。list = this。list。push（。。。newComing）；