vue全家桶进阶之路13：生命周期

Vue2的生命周期是指Vue实例从创建、挂载、更新、销毁等各个阶段中所经历的一系列过程。Vue2的生命周期共有8个阶段，分别是：

1. beforeCreate：Vue实例被创建之前的阶段，此时Vue实例的数据和事件都还未初始化。

2. created：Vue实例被创建之后的阶段，此时Vue实例的数据已经初始化，但是此时模板还未挂载到页面上。

3. beforeMount：Vue实例模板被挂载到页面之前的阶段。

4. mounted：Vue实例模板被挂载到页面之后的阶段，此时Vue实例已经可以访问DOM元素。

5. beforeUpdate：Vue实例数据更新之前的阶段，此时Vue实例中的数据已经更新，但是页面上的DOM还未被更新。

6. updated：Vue实例数据更新之后的阶段，此时Vue实例中的数据已经更新，并且页面上的DOM也已经被更新。

7. beforeDestroy：Vue实例被销毁之前的阶段，此时Vue实例的数据和事件都还可以被访问。

8. destroyed：Vue实例被销毁之后的阶段，此时Vue实例的数据和事件已经被销毁，无法再被访问。

Vue2的生命周期钩子函数可以用于在Vue实例不同的生命周期阶段中执行相应的操作。例如，在created阶段可以对数据进行初始化，而在mounted阶段可以执行一些需要访问DOM元素的操作。在Vue组件中，也可以使用组件的生命周期钩子函数来执行一些组件级别的操作。

下面是一个Vue实例的生命周期示例：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="updateMessage">更新消息</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  beforeCreate() {
    console.log('Vue实例被创建之前')
  },
  created() {
    console.log('Vue实例被创建之后')
  },
  beforeMount() {
    console.log('Vue实例模板被挂载到页面之前')
  },
  mounted() {
    console.log('Vue实例模板被挂载到页面之后')
  },
  beforeUpdate() {
    console.log('Vue实例数据更新之前')
  },
  updated() {
    console.log('Vue实例数据更新之后')
  },
  beforeDestroy() {
    console.log('Vue实例被销毁之前')
  },
  destroyed() {
    console.log('Vue实例被销毁之后')
  },
  methods: {
    updateMessage() {
      this.message = 'Hello World!'
    }
  }
}
</script>

 

在上面的代码中，我们使用了Vue实例的生命周期钩子函数，并在控制台中输出相应的生命周期钩子函数调用时机的信息。当运行上面的代码时，在控制台中可以看到以下信息：

Vue实例被创建之前
Vue实例被创建之后
Vue实例模板被挂载到页面之前
Vue实例模板被挂载到页面之后

这是因为在这个示例中，我们只在Vue实例的创建和挂载阶段中使用了生命周期钩子函数。如果在页面上点击"更新消息"按钮，会触发Vue实例的updated生命周期钩子函数，并在控制台中输出相应的信息。

总之，Vue2的生命周期钩子函数可以帮助我们在Vue实例不同的生命周期阶段中执行相应的操作，从而实现更加灵活和高效的开发。同时，需要注意生命周期钩子函数的使用时机和相应的调用顺序。

// 手动销毁Vue实例 app.$destroy();