vue2的生命周期及相关总结

一、概述

（1）定义

​ vue实例有一个完整的vue页面的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom到渲染、更新到渲染、卸载等一系列过程。

（2）作用

​ 生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程中更容易形成好的逻辑。

（3）8个阶段

​ 初始化
​ beforeCreate、created

​ 创建期
​ beforeMount、mounted

​ 更新期
​ beforeUpdate、updated

​ 销毁期
​ beforeDestroy、destroyed

（4）新增

​ 在 vue-v2.5 版本新增的,处理异常的钩子函数，errorCaptured

​ 在 vue-v2.6 的版本中,处理ssr的函数，serverPrefetch

二、常用生命周期使用

（1）created 用于获取后台数据

（2）Dom渲染在 mounted 中就已经完成了，用于dom挂载完后做一些dom操作

（3）在 beforeDestroy 或 destroyed 清除定时器以及解绑事件等

注意：

（1）beforeDestroy 和 destroyed 只能监听到页面间的跳转，无法监听到页面刷新和关闭标签页。

（2）mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以在 mounted 内使用 this.$nextTick()

三、keep-alive

​ keep-alive是vue内置的一个组件，可以使被包含的组件保留状态，避免重新渲染DOM，使用场景几乎和渲染有关系。配合keep-alive 使用的两个函数 activated、deactivated。

​ 页面第一次加载时，会触发 beforeCreate , created , beforeMount , mounted，activated；退出时，触发deactivated；再次进入（前进或者后退）时，只触发activated

四、父子组件顺序

（1）加载渲染过程

​ beforeCreate->父created->父beforeMount->子beforeCreate->子created-> 子beforeMount->子mounted->父mounted

（2）子组件更新过程

​ 父beforeUpdate->子beforeUpdate->子updated- >父updated

（3）销毁过程

​ 父beforeDestroy->子beforeDestroy- >子destroyed->父destroyed

**总结：**子组件总是比父组件先完成

五、nextTick

nextTick 不算生命周期，但有些场景下可配合使用

触发时机

​ 在同一事件循环中的数据变化后，DOM完成更新，立即执行nextTick(callback)内的回调。

应用场景

​ 需要在视图更新之后，基于新的视图进行操作。

实例1：mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以用 vm.$nextTick 替换掉 mounted

mounted: function () {
  this.$nextTick(function () {
    // Code that will run only after the
    // entire view has been rendered
  })
}

实例2：点击按钮显示原本以 v-show = false 隐藏起来的输入框，并获取焦点。

showsou(){
  this.showit = true
  this.$nextTick(function () {
    // DOM 更新了
    document.getElementById("keywords").focus()
  })
}

实例3：点击获取元素宽度。

<div id="app">
    <p ref="myWidth" v-if="showMe">{{ message }}</p>
    <button @click="getMyWidth">获取p元素宽度</button>
</div>

getMyWidth() {
    this.showMe = true;
    //this.message = this.$refs.myWidth.offsetWidth;
    //报错 TypeError: this.$refs.myWidth is undefined
    this.$nextTick(()=>{
        //dom元素更新后执行，此时能拿到p元素的属性
        this.message = this.$refs.myWidth.offsetWidth;
  })
}