Vue 'updated' 生命週期鉤子
示例
使用 updated 生命週期鉤子，在每次 DOM 樹更新時向控制檯寫入一條訊息。
export default {
data() {
return {
sliderVal: 50,
renderCount: 0
}
},
updated() {
this.renderCount++;
console.log('Updated ' + this.renderCount + ' times.')
}
}
定義和用法
updated 生命週期鉤子發生在 DOM 樹更新之後。
如果在 updated 鉤子中修改了某個屬性或執行了其他會觸發新渲染的操作，那麼在新的渲染之後 updated 鉤子將再次被呼叫，這很可能會建立一個無限迴圈。
為了避免無限迴圈，我們應該始終考慮使用 beforeUpdate 生命週期鉤子，而不是 updated 生命週期鉤子。
this.$nextTick() 或 nextTick() 函式也可以用來在 DOM 更新後執行程式碼。
注意：在上面的示例中，我們將渲染計數寫入控制檯，因為修改檢視會重新啟用 updated 鉤子並導致無限迴圈。
相關頁面
Vue 教程：Vue 生命週期鉤子
Vue 教程： 'beforeUpdate' 鉤子
Vue 參考：Vue 'beforeUpdate' 生命週期鉤子
Vue 參考：Vue $nextTick() 方法
