Vue生命周期

概述

Vue生命周期函数主要包含8个部分，按顺序分别是：

1. beforeCreate（创建前）
2. created （创建后）
3. beforeMount (载入前)
4. mounted （载入后）
5. beforeUpdate （更新前）
6. updated （更新后）
7. beforeDestroy（销毁前）
8. destroyed （销毁后）

生命周期函数详细介绍

beforeCreate()

Vue创建前，此阶段为实例初始化之后，this指向创建的实例，数据观察，数据监听事件机制都未形成，不能获得DOM节点。data，computed，watch，methods 上的方法和数据均不能访问，注：data和methods的数据都还未初始化。

可在此处安装全局事件总线。

如下所示

const vm = new Vue({
  el: "#root",
  data: {
    n:1
  },
  computed: {
    n1(){
      return n+1
    }
  },
  beforeCreate(){
    console.log(this)
    console.log(this.n)
    console.log(this.n1)
    debugger
  }
});

created()

Vue创建后，此阶段为实例初始化之后，data、props、computed的初始化导入完成，注：要调用methods中的方法，或者操作data中的数据，最早只能在Created中操作。此时能访问 data computed watch methods 上的方法和数据，初始化完成时的事件写这个里面，但此阶段还未挂载DOM。

const vm = new Vue({
  el: "#root",
  data: {
    n:1
  },
  methods: {
    n1(){
      return this.n+1
    }
  },
  created(){
    console.log(this.n)
    console.log(this.n1())
    console.log(this.$el)
    debugger
  }
});

beforeMount()

Vue载入前，阶段执行时，模板已经在内存中编译好了，但是未挂载到页面中。在这一阶段，虽然页面还是旧的，但vue挂载的根节点已经创建，下面vue对DOM的操作将围绕这个根元素继续进行。

<body>
  <div id="root">
    <h1>{{n}}</h1>
    <button @click="n++">点我+1</button>
  </div>
</body>
<script>
  const vm = new Vue({
    el: "#root",
    beforeMount(){
      console.log(this.$el)
      debugger
    },
  });
</script>

mounted()

Vue载入后，(完成创建vm.$el，和双向绑定)；只要执行完mounted,就表示整个Vue实例已经初始化完成了，此时组件已经脱离里了创建阶段，进入到了运行阶段。

(使用较多，反正我使用较多- -，因为此阶段组件算是正式完成了构建，通常用来做初始化，比如一些数据结构较为复杂，不想做响应式的全局变量)

beforeUpdate()

Vue更新前，当执行beforeUpdate的时候，页面中显示的数据还是旧的，此时data数据是最新的，页面尚未和最新数据数据保持同步。但是DOM中的数据会改变，这是vue双向数据绑定的作用，可在更新前访问现有的DOM，如手动移出添加的事件监听器。

<body>
  <div id="root">
    <h1>{{n}}</h1>
    <button @click="n++">点我+1</button>
  </div>
</body>
<script>
  const vm = new Vue({
    el: "#root",
    data:{
      n:1
    },
    beforeUpdate(){
      console.log("beforeUpdate...")
      console.log(this.n)
      debugger
    },
  });
</script>

updata()

更新完成后。

注意：不要再此函数中操作数据，否则会陷入死循环

beforeDestroy()

组件销毁前，会先执行beforeDestroy。此时所有date和methods以及过滤器和指令都是处于可用状态，还没有真正的执行销毁过程。

<body>
  <div id="root">
    <h1>{{n}}</h1>
    <button @click="$destroy()">销毁</button>
  </div>
</body>
<script>
  const vm = new Vue({
    el: "#root",
    data:{
      n:1
    },
    beforeDestroy(){
      console.log("即将销毁。。。")
      console.log(this.n)
      debugger
    },
  });
</script>