[那些關於Vue 的小細節] 為什麼畫面沒有隨資料更新 | vue data array
之前在在一開始接觸框架的時候,不是很清楚響應式原理到底是什麼,一直會把它和responsive這個東西搞混,因為兩個在中文翻起來都是響應式,官網雖然有提及這個部分的說明,但小時候不懂事就給它忽略過去了。最近在用Vue做一些東西的時候,才慢慢瞭解到Reactivity的意思和重要性,在使用Vue的過程中,我們會發現當我們修改JavaScript的資料時,畫面就會自動的更新產生變化,之所以能這麼方便操作,都是由於Vue背後的響應式系統(reactivitysystem),可見Reactivity在Vue中有多重要!!也因此,錯誤的使用可能會導致Vue的data不會有即...
之前在在一開始接觸框架的時候,不是很清楚響應式原理到底是什麼,一直會把它和 responsive 這個東西搞混,因為兩個在中文翻起來都是響應式,官網雖然有提及這個部分的說明,但小時候不懂事就給它忽略過去了。
最近在用 Vue 做一些東西的時候,才慢慢瞭解到 Reactivity 的意思和重要性,在使用 Vue 的過程中,我們會發現當我們修改 JavaScript 的資料時,畫面就會自動的更新產生變化,之所以能這麼方便操作,都是由於 Vue 背後的響應式系統(reactivity system),可見 Reactivity 在 Vue 中有多重要!!
也因此,錯誤的使用可能會導致 Vue 的 data 不會有即時更新的效果。
在 Vue 當中,每個組件實例都有相對應的 watcher 實例物件 ,它會紀錄組件渲染過程中所有被觸碰到的屬性,當這些屬性的 setter 被觸發時,就會通知 watcher,進而促使組件重新渲染。
然而,有些情況下你可能會發現即使已經為 JavaScript 中的資料重新設值時,畫面卻沒有重新渲染,這有可能是受限於 JavaScript 物件底層的一些限制,讓我們來看看什麼情況下會導致資料更新了,畫面卻沒有重新渲染:
物件部分:一開始沒有被註冊到的物件不會響應式更新這是一開始在使用 Vue 或搭配 AJAX 取得資料時很容易疏忽的部分。假設我們現在要做一個計數器,分別記錄不同動物的數量,當我點擊按鈕的時候,該動物的數量就會增加,template 的部分像這樣:
<button @click="addCount(dog)">addDogs</button> <button @click="addCount(cat)">addCats&...