001.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对象。此时已经初始化完成，脱离了创建阶段，进入到了运行阶段，最早可以在这个阶段操作ＤＯＭ节点

（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