Vue实例生命周期

Vue实例的生命周期就是Vue实例从创建到销毁的全过程。在这个过程中，经历了创建、初始化数据、编译模板、挂载Dom(beforeCreate(){}、created(){}、beforeMount(){}、mounted(){})、渲染→更新→渲染(beforeUpdate(){}、updated(){})、卸载(beforeDestroy(){}、destroyed(){})等阶段。

new Vue()： 每个Vue应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的，new Vue()也是Vue实例生命周期的开始：

var vm = new Vue({
    ...
})

1、beforeCreate()

在此钩子函数之前，init只初始化了event和lifestyle，el和data都没有被初始化，所以无法通过实例访问data中的数据，也无法通过$el获取关联的DOM元素。

<div>
    <h3>当前n值为：{{n}}</h3>
    <button @click="add">n+1</button>
  </div>
  
<script>
export default {
  name: `test`,
  data(){
    return {
      n:1,
    }
  },
  methods:{
    add(){
      this.n+=1
    }
  },
  beforeCreate(){
    console.log('初始化前')
    console.log(this.n)
    console.log(this.$el)
  }
}
</script>

运行结果：

2、created()

此钩子函数执行之前的init阶段进行数据初始化，数据监测、数据代理。但此时还是虚拟DOM，真实DOM还没有生成，$el还不可用，此时可以调用data和methods中的数据和方法，所以在这里，可以开始调用方法进行数据请求了。

created(){
    console.log('初始化后')
    console.log(this.n)
    console.log(this.$el)
  }

运行结果：

3、beforeMount()

beforeMount()之前的阶段开始解析模板，生成虚拟DOM，在此阶段中，先判断当前是否有el参数，如果没有则调用vm.$mount(el)，确保有了el之后，再判断是否有template参数，如果有，把template编译到render函数中，如果没有，直接将获取到的el编译成template，然后将这个template转换成render函数。

实际上，从created到beforeMount中间这个阶段，最主要的工作是将template或el转换为render函数。

4、mounted()

mounted()之前，虚拟DOM已渲染为真实DOM，但是还是会将虚拟DOM保存（用于后续数据发生变化时，新老DOM对比），然后用真实DOM替换掉原来的vm.$el。

mounted(){
    console.log('挂载后')
    console.log(this.n)
    console.log(this.$el)
  }

运行结果：

至此，初始化过程结束。实例目前静静躺在内存中

5、beforeUpdate()

当数据状态发生变化时(点击n+1按钮时)，才会触发该函数，要开始将改变后的数据渲染到页面之前，此时数据时新的，但是页面是旧的。

beforeUpdate(){
    console.log('更新前')
    console.log(this.n)
    console.log(this.$el)
    debugger;
  },

运行结果：点击n+1按钮后，n值更新，但是页面并未更新

6、updated()

updated()之前，根据新的数据生成新的虚拟DOM(Vnode)，与旧DOM进行比较，进行一个diff计算，算出最小的更新范围，从而更新render中的部分数据，再将更新后的render函数渲染成真实DOM，最终完成页面更新。然后执行updated()，可以在updated()中写操作。

7、beforeDestroy()

当vm.$destroy()被调用时，在实例销毁之前执行该函数，在这个函数中依然可以操作实例，但是一般不会再操作数据了，因为即使操作了，也不会触发更新流程了。一般在此函数中执行一些收尾操作，如清除定时器等等。

8、destroyed()

destroy()函数执行之前是销毁阶段，销毁后自定义事件会失效，但原生DOM事件依然有效（DOM元素还存在（即vue实例的工作成果还在），但没有vue控制了）；销毁后，借助Vue开发工具看到的信息也会停止更新。实例销毁后调用destroyed()。