image.png
image.png
贴出代码,看看结果。

一、在watch的基本用法下,执行先后关系如下。
create
beforeMount
mounted
watch

二、如果watch开启了 immediate: true选项,(上面一张图中msg1部分取消注释)那么这个immediate的watch的执行会提升到created之前
image.png

执行顺序为
watch (immediate: true)
create
beforeMount
mounted
watch (immediate: false)

再看下面这段代码
image.png
image.png

三、加入了基础的computed后,现阶段的执行顺序是
watch (immediate: true)
create
beforeMount
computed
mounted
watch (immediate: false)

四、而如果watch监听了一个computed属性值(无论这个watch是immediate: true 还是 immediate: false),这个computed的执行都会被提升到created之前。

immediate: false;
image.png

immediate: true;
image.png

执行顺序变为
computed (被watch监听的computed)
watch (监听computed的watch; immediate: true)
create
beforeMount
computed
mounted
watch

同步更新到自己的语雀:
https://www.yuque.com/dirackeeko/blog/wodm99shfex9srp0


DiracKeeko
125 声望2 粉丝