码迷,mamicode.com
首页 > 其他好文 > 详细

对vue官网生命周期、实际项目中vue执行顺序的理解

时间:2020-02-21 16:24:50      阅读:74      评论:0      收藏:0      [点我收藏+]

标签:钩子函数   对象   初始化   vue生命周期   def   打印   响应式   计算   data   

vue实际项目中会遇到很多对于画面显示及各个部分配合的顺序问题,后来发现是对vue生命周期没有理解透彻,现将vue生命周期简洁版理解记录如下:

我们都知道,vue的生命周期钩子函数有 beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed

那么这些钩子函数在实际项目中怎么是什么时间调用的呢?可以结合官网的vue实例模块去理解

一、

new vue()

此时实例化对象 、初始化事件和生命周期。

二、

beforeCreate

在初始化之后 也就是说、此时我们还无发的到 data、computed、methods、watch的值、一般用于非响应式初始化使用、

接下来就是我们的computed计算属性 在beforeCreate 与 Created之间调用、

三、

created

此时实例创建完成 在此时我们可以得到计算属性以及data等数据、因此我们做页面初始化时候 init方法一般都在created钩子中调用、

但是此时没有挂在到dom上不能访问$el 和$ref属性 ,此时调用$el会打印出undefined ,调用$ref会打印出空数组

接下来要判断有没有el如果没有的话生命周期停止,如果有el会去判断有没有template模版、如果有就会将template模版编译成render函数,如果没有就会把外部的HTML编译

四、

beforeMount

此时是挂载dom之前,我们已经找到了对应的template,此时$ref上有数据但是还没有在页面中显示,因此此时我们页面上的{{ }}还是没有被替换掉。

五、

Mounted

此时实例已经挂载dom 可以通过dom访问dom节点 $ref可以访问到属性

六、

beforeUpdate

此钩子函数是我们的组件更新之前调用 、数据已经发生改变 但是页面还没有变化、

适合在组件更新前访问已有的dom   可以在这个时点 添加画面项目等监听

七、

updated

此时组件dom已经更新完成 、页面已经发生改变、可执行依赖dom的操作了

八、

beforeDestroy

在实例销毁之前我们仍可以使用之前存在的实例

九、

destroyed

实例被销毁  跟实例有关的监听等都会销毁

 

对vue官网生命周期、实际项目中vue执行顺序的理解

标签:钩子函数   对象   初始化   vue生命周期   def   打印   响应式   计算   data   

原文地址:https://www.cnblogs.com/lmz545432913/p/12341708.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!