Logo

vue中created、beforeMount、mounted、computed、watch、methods区别与执行顺序

photo

2022年05月31日

1、正常的顺序执行

create
beforeMount
computed
mounted
watch

created执行时挂载阶段还没有开始,模版还没有渲染成html,所以无法获取元素。created钩子函数主要用来初始化数据。
beforeMount 这一步的时候,模版已经在内存中编译好了,但是尚未挂载到页面中去。
computed是在DOM执行完成后立马执行(如:赋值)
mounted钩子函数一般用来向后端发起请求,拿到数据后做一些业务处理。该函数在模版渲染完成后才被调用。DOM操作一般是在mounted钩子函数中进行。
watch用于检测vue实例上数据的变动
默认加载的时候先computed再watch,不执行methods;等触发某一事件后,则是:先methods再watch。
methods方法有一定的触发条件,如click等。
所有方法都应该在methods里定义,在mounted或created里面使用this调用,用这种方法实现初始化。

2、设置了watch immediate:true 他的优先级会提到最前面

watch:immediate
create
beforeMount
computed
mounted
watch

3、设置了watch immediate:true,监听的是计算属性的值 他的优先级应该会提到最前面,但是vue默认先computed 再执行watch

computed:(watch监听的)
watch:immediate
create
beforeMount
computed
mounted
watch

watch的原理图
在这里插入图片描述

了解计算属性的原理
https://segmentfault.com/a/1190000016368913

当前文章所有附件
在这里插入图片描述
本文为原创文章,请注意保留出处!
修复群晖Synology Drive client右键菜单缺失问题 本教程主要解决windows10右键菜单中没有SynologyDrive菜单的问题,整体思路是找到...修复群晖SynologyDriveclient右键菜单缺失问题 作者:Pastore Antonio
1809 浏览量
docker如何查看一个镜像内部的目录结构及其内部都有哪些文件 前言:有时候我们会在docker上下载一个镜像,或者是上传一个镜像到docker上,甚至有时候就是在...docker如何查看一个镜像内部的目录结构及其内部都有哪些文件 作者:Pastore Antonio
1786 浏览量
configure: error: Package requirements (oniguruma) were not met configure:error:Packagerequirements(oniguruma)...configure:error:Packagerequirements(oniguruma)werenotmet 作者:Pastore Antonio
1526 浏览量
Adobe Acrobat Pro 激活 这里记录了一些AdobeAcrobat的激活教程和组件。浏览量:1,677 作者:Pastore Antonio
1522 浏览量
追寻日出,找回自己 为什么我要去追寻日出?其实我是一个很懒的人,每次都起不来,直到有一次我在租房中睡到了大天亮,阳光照...追寻日出,找回自己 作者:Pastore Antonio
1493 浏览量