Vue updated hook與watch的差異

Vue
hook
DOM

參考大神的回應


Updated hook

updated() 針對DOM的改變去執行後續的操作,


亦即在virtual DOM被re-render後呼叫

(通常DOM改變了,data也會跟著變)


在updated hook中,通常是針對重新渲染後的DOM做操作


不要在這個hook去更動state data (想要的話請用computed或watch)


此外,updated並不保證全部的子組件均已被re-render

(官網說明,不懂為啥不保證,遇到再說)


要等全部子組件都被重新渲染的話,要使用$nextTick

updated: function () {
 this.$nextTick(function () {
  // Code that will run only after the
  // entire view has been re-rendered
 })
}


Watcher

watch針對data的改變觸發重新渲染,


換言之,watch將在component re-render前捕捉到data的改變。


官網流程機制如下:


© 2021 Hamsterism. All rights reserved github