001.Vue的生命周期

Posted Ruovan

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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对象。此时已经初始化完成,脱离了创建阶段,进入到了运行阶段,最早可以在这个阶段操作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的生命周期的主要内容,如果未能解决你的问题,请参考以下文章

调用 replace() 时片段的生命周期是啥?

在不存在的片段上调用片段生命周期和 onCreate 的问题

Android片段生命周期:onResume调用了两次

导航上的片段生命周期重叠

Android 片段生命周期

关于片段生命周期,何时调用片段的 onActivityResult?