001.Vue的生命周期
Posted Ruovan
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了001.Vue的生命周期相关的知识,希望对你有一定的参考价值。
VUE的生命周期
01. 什么是vue生命周期?
- Vue 实例从创建到销毁的过程,就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程,称之为 Vue 的生命周期
02. vue生命周期的作用是什么?
- 生命周期中有多个事件钩子,可以让我们在控制整个Vue实例的过程时更容易形成好的逻辑,可以在不同阶段添加自己的代码
03. vue生命周期总共有几个阶段?
- 它可以总共分为8个阶段:创建前/后, 载入前/后,更新前/后,销毁前/销毁后
(1)Create
beforeCreate
:数据观测前,data和methods中的数据都还没有初始化created
:完成数据观测,data 和 methods都已经被初始化好了,最早可以在这个阶段操作数据或者方法
(2)Mount
beforeMount
:在内存中已经编译好了模板了,但是还没有挂载到页面中,此时,页面还是旧的Mounted
:Vue实例挂载完成,内存中编译好的模板替换el属性指向的DOM对象。此时已经初始化完成,脱离了创建阶段,进入到了运行阶段,最早可以在这个阶段操作DOM节点
(3)Update
-
beforeUpdate
:发生在虚拟DOM重新渲染和打补丁之前,页面中的显示的数据还是旧的,data中的数据是更新后的, 页面还没有和最新的数据保持同步, -
Updated
:页面显示的数据和data中的数据已经保持同步了,都是最新的,可以执行依赖于DOM的操作应避免在此期间更改状态,因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用
(4)Destory
beforeDestory
:从运行阶段进入到了销毁阶段,数据还处于可用状态,还没有真正被销毁Destroyed
:所有内容处于不可用状态,组件已经被销毁,调用后,所有的事件监听器会被移除,所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用
04.额外的周期
(1)activated
- 在
keep-alive
组件激活时才调用,该钩子函数在服务器端渲染期间不被调用
(2)deactivated
- 在
keep-alive
组件停用时调用
(3)errorCaptured
- 当捕获一个来自子孙组件的错误时被调用
05. 第一次页面加载会触发哪几个钩子?
- 会触发下面这几个
beforeCreate, created, beforeMount, mounted
06. DOM 渲染在哪个周期中就已经完成?
- DOM 渲染在
mounted
中就已经完成了
07. 获取数据在哪一个周期函数?
- 一般在
created
周期就可以获取数据了 - 如果涉及到需要页面加载完成之后就在
mounted
周期进行数据获取
08. created和mounted的区别?
-
created
:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图 -
mounted
:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作
-
挂载到节点上的初始化方法通常用mounted去操作,主动调起的用methods里面封装的方法
-
数据初始化一般放到
created
里面,这样可以及早发请求获取数据
-
如果有依赖dom必须存在的情况,就放到
mounted
里mounted(){ this.$nextTick(() => { // do something }) }
09. 如何重新执行created钩子函数?
- 通过切换
v-if
的状态,组件会重新经历销毁、加载的过程
10.嵌套组件的生命周期
(1)挂载阶段
- father.beforeCreate ——> father.created ——> father.beforeMount ——> son.beforeCreate ——> son.created ——> son.beforeMount ——>son.mounted ——> father.mounted
(2)更新阶段
- father.beforeUpdate ——> son.beforeUpdate ——> son.updated——> father.updated
(3)异步组件
- father.beforeCreate ——> father.created ——> father.beforeMount ——> father.mounted ——> father.beforeUpdate ——> son.beforeCreate ——> son.created ——> son.beforeMount ——> son.mounted ——> father.updated
以上是关于001.Vue的生命周期的主要内容,如果未能解决你的问题,请参考以下文章