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

DiracKeeko / 38 /

ChatGPT 可用网址,仅供交流学习使用,如对您有所帮助,请收藏并推荐给需要的朋友。
https://ckai.xyz

image.png
image.png

贴出代码,看看结果。

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

二、如果watch开启了 immediate: true选项那么这个immediate的watch的执行会提升到created之前
image.png

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

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

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

四、而如果immediate: true的watch监听了一个computed属性值,这个computed属性值执行会被提升到watch (immediate: true)之前。
image.png

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

完结。

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


[Vue] watch, computed与生命周期钩子函数的执行先后关系
作者
DiracKeeko
许可协议
CC BY 4.0
发布于
2023-09-16
修改于
2024-04-07
Bonnie image
尚未登录