Vuejs03--声明周期

最新推荐文章于 2022-10-18 17:42:55 发布

名字越长技术越强

最新推荐文章于 2022-10-18 17:42:55 发布

阅读量132

点赞数

分类专栏：前端文章标签： vue

原文链接：https://www.cnblogs.com/sminocence/p/10407631.html

版权

前端专栏收录该内容

26 篇文章 0 订阅

订阅专栏

转载：原创连接
一、Vue 生命周期
Vue的生命周期即是实例从创建到销毁的一个过程。之前在学习Vue的时候，看过官网的教程，但是经常用到的是mounted，所以对其他生命周期方法不是很熟悉，这里有空做个总结，也方便以后查阅。

二、Vue生命周期方法
主要方法有：beforeCreate，created，beforeMount，mounted，beforeUpdate，updated，beforeDestroy，Destroyed。还有两个不常用的actived，deactivated，这两个方法用于被包裹的动态组件。使用组件包裹的话，则涉及到页面缓存。下面开始一一介绍每个生命周期方法。

1.beforeCreate
在实例初始化之后，在数据观测（data observer）和event/watcher事件配置之前被调用，此时data和$el都没有初始化，全部为undefined。
可以在此时加一些loading效果，然后在created移除，可以用在进入请求时间较长的页面，给用户提示，提高用户体验。

2.created
在实例创建完成后立即被调用，在这一步，实例已完成以下配置：数据观测（data observer），属性和方法的运算，watch/event事件回调，然而挂载阶段还没开始，$el属性目前不可见。

3.beforeMount
在挂载开始之前被调用：相关的render函数首次被调用。此时，data和$el都已经存在，但是DOM为虚拟DOM，仍然没有被加载完。

4.mounted
el被新创建的vm. $e l 所替换，并挂载到实例上去调用该钩子。这时候可以执行异步请求，请求数据初始化页面。此时 d a t a 和$ el都已经存在，DOM也已经加载完成，完成挂载。