[Vue] watch, computed与生命周期钩子函数的执行先后关系

[Vue] watch, computed与生命周期钩子函数的执行先后关系_第1张图片
image.png

贴出代码,看看结果。

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

二、如果watch开启了 immediate: true选项那么这个immediate的watch的执行会提升到created之前
[Vue] watch, computed与生命周期钩子函数的执行先后关系_第2张图片

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

再看下面这段代码
[Vue] watch, computed与生命周期钩子函数的执行先后关系_第3张图片
[Vue] watch, computed与生命周期钩子函数的执行先后关系_第4张图片

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

四、而如果immediate: true的watch监听了一个computed属性值,这个computed属性值执行会被提升到watch (immediate: true)之前。
[Vue] watch, computed与生命周期钩子函数的执行先后关系_第5张图片

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

完结。

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

你可能感兴趣的:([Vue] watch, computed与生命周期钩子函数的执行先后关系)