vue学习总结三：理解vue生命周期

盗用vue官网对于生命周期的流程图：说实话你直接拿着这张图给一个新手讲vue生命周是怎样怎样，balabala一大堆估计会把人整懵逼的，开始我也是看不懂这张流程图，要真正理解vue生命周期的话，个人觉得最好的方法就是写代码做测试，在每个钩子函数里面打印一个东西，执行以下就可以一幕了然的看到函数的执行顺序了

vue生命周期函数主要有以下10个：

1. beforeCreate:表示组件实例刚刚被创建，组件属性计算之前，如data属性等
2. created:表示组件实例创建完成，属性已经绑定但是页面上的dom元素还未生成，$el属性还不存在
3. beforeMount:表示组模板编译和挂载之前
4. mounted:表示组模板编译和挂载之前
5. beforeUpdate:表示组件更新之前
6. updated:表示组件更新之后
7. beforeDestory:表示组件销毁之前
8. destoryed:表示组件组件销毁之后
9. activated:表示组件被激活时候触发，常与keep-alive联系
10. deactivated:表示组件被移除的时候触发，常与keep-alive联系

这样解释估计大多数新手还是不怎么了解的，接下来直接上代码看钩子执行顺序：

<template>
  <div id="app">
    <!--<router-view/>-->
    {{message}}
    <button type="button" @click="changeMessgae">更新数据</button>
  </div>
</template>

<script>
  export default {
    name: 'App',
    data() {
      return {
        message: 'hello vue!'
      }
    },
    methods:{
      changeMessgae(){
        this.message="数据改变了";
      }
    },
    beforeCreate() {
      console.group('beforeCreate 创建前状态===============》');
      console.log("%c%s", "color:red" , "el     : " + this.$el); //undefined
      console.log("%c%s", "color:red","data   : " + this.$data); //undefined
      console.log("%c%s", "color:red","message: " + this.message)
    },
    created() {
      console.group('created 创建完毕状态===============》');
      console.log("%c%s", "color:red","el     : " + this.$el); //undefined
      console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
      console.log("%c%s", "color:red","message: " + this.message); //已被初始化
    },
    beforeMount() {
      console.group('beforeMount 挂载前状态===============》');
      console.log("%c%s", "color:red","el     : " + (this.$el)); //已被初始化
      console.log(this.$el);
      console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
      console.log("%c%s", "color:red","message: " + this.message); //已被初始化
    },
    mounted() {
      console.group('mounted 挂载结束状态===============》');
      console.log("%c%s", "color:red","el     : " + this.$el); //已被初始化
      console.log(this.$el);
      console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
      console.log("%c%s", "color:red","message: " + this.message); //已被初始化
    },
    beforeUpdate() {
      console.group('beforeUpdate 更新前状态===============》');
      console.log("%c%s", "color:red","el     : " + this.$el);
      console.log(this.$el);
      console.log("%c%s", "color:red","data   : " + this.$data);
      console.log("%c%s", "color:red","message: " + this.message);
    },
    updated() {
      console.group('updated 更新完成状态===============》');
      console.log("%c%s", "color:red","el     : " + this.$el);
      console.log(this.$el);
      console.log("%c%s", "color:red","data   : " + this.$data);
      console.log("%c%s", "color:red","message: " + this.message);
    },
    beforeDestroy() {
      console.group('beforeDestroy 销毁前状态===============》');
      console.log("%c%s", "color:red","el     : " + this.$el);
      console.log(this.$el);
      console.log("%c%s", "color:red","data   : " + this.$data);
      console.log("%c%s", "color:red","message: " + this.message);
    },
    destroyed() {
      console.group('destroyed 销毁完成状态===============》');
      console.log("%c%s", "color:red","el     : " + this.$el);
      console.log(this.$el);
      console.log("%c%s", "color:red","data   : " + this.$data);
      console.log("%c%s", "color:red","message: " + this.message)
    },
    activated() {
      console.log('activated执行了');
    },
    deactivated() {
      console.log('deactivated执行了');
    }
  }
</script>
<style>
</style>

效果图如下：

从图中我们可以看出在：

1. beforeCreate阶段：el,data,message都是undefined，用户拿不到
2. created阶段：el仍然是undefined，但是data数据和定义在data里面的字段message已经生成了，可供用户使用
3. beforeMount阶段：el仍然是undefined，但是data数据和定义在data里面的字段message已经生成了，可供用户使用
4. mounted阶段：el模板已经生成，并且dom已经挂载到页面上去了，data数据和定义在data里面的字段message已经生成了，可供用户使用

再看看beforeUpdate,updated生命周期函数，当我们点击按钮的时候执行了一个改变message内容的函数

methods:{
  changeMessgae(){
    this.message="数据改变了";
  }
},

再看看页面上打印的效果：

我们看到页面上之前的hello world被改变成"数据改变了"，同时打印太重也触发了beforeUpdate和updated函数，并且页面没有再次执行之前的beforeCreate、created、beforeMount、mounted函数，也就是说这四个生命周期函数只会执行一次