1. 基本知识

Vue.js 的生命周期是指 Vue 实例从创建到销毁的一系列过程，这些过程中会触发一些钩子函数，在这些钩子函数中执行自定义的逻辑

Vue 的生命周期包括创建阶段、挂载阶段、更新阶段和销毁阶段

1. 创建阶段
   beforeCreate: 实例被创建之初，初始化完成之前被调用，此时数据观测 (data observer) 和事件配置 (event watchers) 之前未被设置
   created: 实例已经创建完成，此时已经完成了数据观测 (data observer)，属性和方法的运算，事件回调函数的设置。但是挂载阶段还没开始，$el 属性目前不可见

2. 挂载阶段
   beforeMount: 在挂载开始之前被调用，相关的 render 函数首次被调用
   mounted: 实例被挂载后调用，这时 el 元素已经挂载到实例上，可以进行 DOM 操作，实例上的 $refs 属性可以访问子组件

3. 更新阶段
   beforeUpdate: 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前，可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程
   updated: 在数据更改导致的虚拟 DOM 重新渲染和打补丁之后调用，调用时，组件 DOM 已经更新，可以执行依赖于 DOM 的操作

4. 销毁阶段
   beforeDestroy: 实例销毁之前调用，在这一步，实例仍然完全可用
   destroyed: 实例销毁后调用，此时，所有的事件监听器和子实例都已被移除，Vue 实例的所有指令、观察者等都被解绑，组件被销毁

2. Demo

其html文件如下：

<div id="app">
  <p>{{ message }}</p>
</div>

其js文件如下：

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  },
  beforeCreate: function () {
    console.log('Before create hook');
  },
  created: function () {
    console.log('Created hook');
  },
  beforeMount: function () {
    console.log('Before mount hook');
  },
  mounted: function () {
    console.log('Mounted hook');
  },
  beforeUpdate: function () {
    console.log('Before update hook');
  },
  updated: function () {
    console.log('Updated hook');
  },
  beforeDestroy: function () {
    console.log('Before destroy hook');
  },
  destroyed: function () {
    console.log('Destroyed hook');
  }
});

// 模拟更新数据
setTimeout(function () {
  app.message = 'Updated message';
}, 2000);

// 模拟销毁实例
setTimeout(function () {
  app.$destroy();
}, 4000);