Vue 生命周期

Vue.js 的生命周期是指 Vue 实例从创建到销毁的整个过程，这个过程可以分为以下几个阶段：

创建阶段（Creation）:

beforeCreate: 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。此时，data 属性和 methods 都还不可访问。

编译阶段（Compilation）:

created: 在实例创建完成后被调用，此时可以访问到 data 属性和 methods，但还未开始编译模板。

挂载阶段（Mounting）:

beforeMount: 在挂载开始之前被调用，相关的 $el 属性还不可访问。

mounted: 挂载完成后调用，此时可以访问到 DOM 元素。

运行阶段（Running）:

这个阶段是 Vue 实例正常运行的阶段，数据变化会触发视图更新。

更新阶段（Updating）:

beforeUpdate: 当数据变化时，视图更新之前调用。

updated: 视图更新完成后调用。

销毁阶段（Destruction）:

beforeDestroy: 实例销毁之前调用，实例仍然可以访问到，但是不能被重新渲染。

destroyed: 实例销毁后调用，此时实例已经不能访问。

错误处理阶段（Error Handling）:

errorCaptured: 捕获一个来自子孙组件的错误。

服务器端渲染（Server-Side Rendering）:

serverPrefetch: 在服务器端渲染期间，请求发送之前调用。

Vue 的生命周期钩子允许你在实例的不同阶段执行代码，这对于处理 DOM 更新、数据获取、事件监听等任务非常有用。以下是如何在 Vue 实例中使用生命周期钩子的示例：

new Vue({
  data: {
    message: 'Hello Vue!'
  },
  beforeCreate: function() {
    console.log('beforeCreate');
  },
  created: function() {
    console.log('created');
  },
  beforeMount: function() {
    console.log('beforeMount');
  },
  mounted: function() {
    console.log('mounted');
  },
  beforeUpdate: function() {
    console.log('beforeUpdate');
  },
  updated: function() {
    console.log('updated');
  },
  beforeDestroy: function() {
    console.log('beforeDestroy');
  },
  destroyed: function() {
    console.log('destroyed');
  }
});

了解和正确使用 Vue 生命周期钩子是构建复杂应用的关键。它可以帮助开发者在正确的时间执行代码，确保应用的稳定性和性能。