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

橙子主题打折出售

其实我不卖,主要是这里是放广告的,所以就放了一个
毕竟主题都没做完,卖了也是坑.

购买它
本文为原创文章,请注意保留出处!

热门文章

Navicat Premium 12.0.22 安装与破解 一、安装  NavicatPremium12.0.22的下载链接:https://pan.ba...NavicatPremium12.0.22安装与破解 作者:Pastore Antonio
1516 浏览量
C# JArray与JObject 的使用 STEP1、usingNewtonsoft.Json.Linq;STEP2、如何获取json里的...C#JArray与JObject的使用 作者:Pastore Antonio
1466 浏览量
解决mysql的配置ONLY_FULL_GROUP_BY引起的错误 由于自己的本地网站环境使用了mysql8.0的版本,在测试一个groupby的sql查...解决mysql的配置ONLY_FULL_GROUP_BY引起的错误 作者:Pastore Antonio
1449 浏览量
Windows server 2016 英文服务器安装中文语言包教程 1、下载windowsserver2016语言包下载地址:https://pan.baidu....Windowsserver2016英文服务器安装中文语言包教程 作者:Pastore Antonio
1407 浏览量
《荒野猎人》经典语录 电影《荒野猎人》讲述19世纪的一个皮草猎人休·格拉斯在一次打猎中受了重伤,而后两个被船长雇用照顾他的人为了夺取他的财产,杀害了他的儿子,并把他丢在荒野中自生自灭。格拉斯在荒野中度过了艰难的几个月后开始了复仇。电影《荒野猎人》由迈克尔·彭克同名小说改编而成,夺得第73届金球奖和第88届奥斯卡金像奖多项大奖,男主角莱昂纳多凭借这部作品终于得到奥斯卡小金人。 作者:Pastore Antonio
1396 浏览量