vue 页面生命周期

// Vue 页面生命周期示例代码

// 定义一个 Vue 组件
new Vue({
  el: '#app',
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  // 在创建实例时调用，此时实例已完成数据观测 (data observer)、属性和方法的运算，但尚未挂载元素
  beforeCreate() {
    console.log('beforeCreate: 实例刚刚被创建，data 和 event 还未初始化');
  },
  // 在 created 钩子函数中，可以执行依赖 data 的操作
  created() {
    console.log('created: 实例已经创建完成，data 和 event 已经初始化');
  },
  // 模板编译/挂载之前调用，el 属性还未挂载到 DOM 中
  beforeMount() {
    console.log('beforeMount: 模板编译之前，el 属性还未挂载到 DOM 中');
  },
  // 模板编译/挂载之后调用，此时 el 已经挂载到 DOM 中
  mounted() {
    console.log('mounted: 模板编译完成，el 已经挂载到 DOM 中');
  },
  // 数据更新之前调用，此时可以访问新的和旧的属性值
  beforeUpdate() {
    console.log('beforeUpdate: 数据更新之前');
  },
  // 数据更新之后调用，此时视图已经更新完毕
  updated() {
    console.log('updated: 数据更新之后，视图已经更新完毕');
  },
  // 实例销毁之前调用，此时实例仍然完全可用
  beforeDestroy() {
    console.log('beforeDestroy: 实例销毁之前');
  },
  // 实例销毁之后调用，此时实例的所有指令都已解绑，所有事件监听器都被移除，所有子实例也都被销毁
  destroyed() {
    console.log('destroyed: 实例销毁之后');
  }
});

// HTML 结构
/*
<div id="app">
  <p>{{ message }}</p>
</div>
*/

解释说明：

• beforeCreate: 实例刚刚被创建，data 和 event 还未初始化。
• created: 实例已经创建完成，data 和 event 已经初始化，可以执行依赖 data 的操作。
• beforeMount: 模板编译之前，el 属性还未挂载到 DOM 中。
• mounted: 模板编译完成，el 已经挂载到 DOM 中。
• beforeUpdate: 数据更新之前，可以访问新的和旧的属性值。
• updated: 数据更新之后，视图已经更新完毕。
• beforeDestroy: 实例销毁之前，此时实例仍然完全可用。
• destroyed: 实例销毁之后，所有指令都已解绑，所有事件监听器都被移除，所有子实例也都被销毁。