Vue2.x的生命周期应用学习

Vue生命周期

项目中一直有使用mounted、created等几个函数，却没有深入的挖掘之间的相互关系。近段时间系统的过了下这些内容，现在将学习的心得整理如下。
Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

生命周期图示

先盗用下官方流程图，过程还是蛮清楚的。

钩子函数

由上图可看出在vue一整个的生命周期中会有很多钩子函数，不同的钩子函数作用于VUE生命周期不同的时刻。下面代码块是Vue所有的钩子函数:

<template>
  <div class="main"></div>
</template>
<script>
export default {
  components: {},//组件
  data() {return {};},  //数据容器
  computed: {},//监听属性 类似于data概念
  watch: {},// 监控data中的数据变化
  methods: {},  //方法集合
  beforeCreate() {}, //生命周期 - 创建之前
  created() {},  //生命周期 - 创建完成（可以访问当前this实例）
  beforeMount() {}, //生命周期 - 挂载之前
  mounted() {},  //生命周期 - 挂载完成（可以访问DOM元素）
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
  deactivated() {},
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
};
</script>
<style lang="scss" scoped>
  .main{}
</style>

官方Api详解

1. beforeCreate() {}, //生命周期 - 创建之前

• 实例：当前状态下，this还不能使用，故data中的数据，methods中的方法不能调用。

  beforeCreate() {
    console.log("页面名称：" + this.title); // undefined
    this.fristMethod(); // undefined
  }, //生命周期 - 创建之前

用途：暂时未用到。

2. created() {}, //生命周期 - 创建完成（可以访问当前this实例）

• 实例：当前阶段可以调用data中的数据，methods中的方法，当前不能操作dom。

 created() {
    console.log("页面名称：" + this.title); //原始标题
    this.fristMethod(); //修改标题
    console.log("修改之后的页面名称：" + this.title); //修改后的标题
    let main = document.getElementsByClassName("main")[0];
    main.style.backgroundColor = "red";
 }, //生命周期 - 创建完成（可以访问当前this实例）

用途：页面数据的初始化赋值。

3. beforeMount() {}, //生命周期 - 挂载之前
4. mounted() {}, //生命周期 - 挂载完成（可以访问DOM元素）

• 实例：当前阶段可以操作dom。

mounted() {
    let main = document.getElementsByClassName("main")[0];
    console.log("修改前页面的背景色：" + main.style.backgroundColor);
    main.style.backgroundColor = "red";
    console.log("修改后页面的背景色：" + main.style.backgroundColor);
}, //生命周期 - 挂载完成（可以访问DOM元素）

用途：页面控件元素初始化赋值。

5. beforeUpdate() {}, //生命周期 - 更新之前
6. updated() {}, //生命周期 - 更新之后

• 实例：当前阶段是页面重新渲染或者更新时候调用。

  updated() {
       console.log("页面标题更新：" + this.title); // undefined
  }, //生命周期 - 更新之后

用途：页面数据更新需要保存到后台，数据编辑的应用功能。

7. activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
8. deactivated(){},//被 keep-alive 缓存的组件停用时调用。
9. beforeDestroy() {}, //生命周期 - 销毁之前
10. destroyed() {}, //生命周期 - 销毁完成

• 实例：当前阶段实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。

  destroyed() {
       console.log("页面注销：" + this.title); // undefined
  }, //生命周期 - 销毁完成

用途：页面数据更新需要保存到后台，保存最后数据。