04.vue的生命周期

每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如，实例需要配置数据观测(data observer)、编译模版、挂载实例到 DOM ，然后在数据变化时更新 DOM 。在这个过程中，实例也会调用一些 生命周期钩子 ，这就给我们提供了执行自定义逻辑的机会。例如：

<template>
  <div>
    <p>{{a}}</p>
    <a href="javascript:" @click='change'>修改文本内容</a>
    <a href="javascript:" @click='del'>销毁vue对象</a>
  </div>
</template>
<script>
export default {
  data(){
    return {
      a : 'vue.js'
    }
  },
  methods:{
    change:function(){
      this.a = 'VUE.JS';
    },
    del:function(){
      this.$destroy();  //销毁vue对象
    }
  },
  beforeCreate:()=>{
      console.log('创建实例之前');
  },
  created:()=>{
      console.log('实例已被创建');
  },
  beforeMount:()=>{
      console.log('插入数据到html之前');
  },
  mounted:()=>{
      console.log('已插入数据到html');
  },
  beforeUpdate : ()=>{
      console.log('修改数据之前');
  },
  updated:()=>{
      console.log('数据已被修改');
  },
  beforeDestroy:()=>{
      console.log('对象销毁之前');
  },
  destroyed:()=>{
      console.log('对象已被销毁');
  },
}
</script>

输出 ：

创建实例之前
实例已被创建
插入数据到html之前
已插入数据到html

当我们点击 ”修改文本内容“ 时，则输出 ：

修改数据之前
数据已被修改

而点击 ”销毁vue对象“ 时，输出 ：

对象销毁之前
对象已被销毁

下图说明了实例的生命周期。你不需要立马弄明白所有的东西，不过以后它会有帮助。