Vue 组件生命周期-JavaScript中文网-JavaScript教程资源分享门户

Vue 组件生命周期指的是 Vue 组件从创建到销毁的整个过程中所经历的一系列状态和事件。理解 Vue 组件生命周期可以帮助我们更好地掌握组件的渲染和交互行为，从而更好地开发和维护 Vue 应用。

Vue 组件生命周期图示

如上图所示，Vue 组件生命周期可以分为 8 个阶段：

创建阶段（Creation）：从父组件传递 props 到子组件，实例化子组件对象，调用子组件 beforeCreate 和 created 钩子函数。
挂载阶段（Mounting）：将子组件插入到父组件中，调用子组件 beforeMount 和 mounted 钩子函数。
更新阶段（Updating）：当子组件的 props 或者 data 发生变化时，重新渲染子组件，调用子组件 beforeUpdate 和 updated 钩子函数。
销毁阶段（Destroying）：当组件被销毁时，调用子组件 beforeDestroy 和 destroyed 钩子函数。

Vue 组件生命周期详解

1. 创建阶段

在创建阶段中，Vue 组件会依次执行以下钩子函数：

beforeCreate：在实例初始化之后，数据观测和 event/watcher 事件配置之前调用。在这个阶段，实例的属性和方法都不能访问。
created：在实例创建完成后立即调用。在这个阶段，实例的属性和方法已经可以访问，但是 $el 属性还没有被创建。

2. 挂载阶段

在挂载阶段中，Vue 组件会依次执行以下钩子函数：

beforeMount：在挂载开始之前被调用。在这个阶段，$el 属性已经被创建，但是还没有被替换成真实的 DOM。
mounted：在挂载完成之后被调用。在这个阶段，$el 属性已经被替换成真实的 DOM。在这个阶段，我们可以访问到子组件的 DOM 元素，并且可以进行 DOM 操作。

3. 更新阶段

在更新阶段中，Vue 组件会依次执行以下钩子函数：

beforeUpdate：在数据更新之前被调用。在这个阶段，我们可以通过 $data 属性访问到组件的数据，但是此时 DOM 还没有被更新。
updated：在数据更新之后被调用。在这个阶段，DOM 已经被更新，我们可以进行一些 DOM 操作。

4. 销毁阶段

在销毁阶段中，Vue 组件会依次执行以下钩子函数：

beforeDestroy：在实例销毁之前调用。在这个阶段，我们可以进行一些清理工作。例如，清除定时器、取消网络请求等。
destroyed：在实例销毁之后调用。在这个阶段，实例的所有数据都已经被销毁，我们不能再访问到实例的属性和方法。

Vue 组件生命周期示例代码

下面是一个简单的 Vue 组件示例代码，演示了组件生命周期的不同阶段如何被触发：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
  <title>Vue 组件生命周期示例</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
  </div>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        title: 'Vue 组件生命周期示例',
        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');
      }
    });
  </script>
</body>
</html>

在控制台中打开开发者工具，可以看到组件的不同钩子函数的输出结果。例如，当页面加载完成后，控制台输出如下内容：

beforeCreate
created
beforeMount
mounted

当我们更新组件的数据时，例如将 message 的值改为 "Hello, World!"，控制台输出如下内容：

beforeUpdate
updated

最后，当我们销毁组件时，控制台输出如下内容：

beforeDestroy
destroyed

结语

Vue 组件生命周期是 Vue 组件开发中非常重要的概念。理解 Vue 组件生命周期可以帮助我们更好地掌握组件的渲染和交互行为，从而更好地开发和维护 Vue 应用。本文对 Vue 组件生命周期进行了详细的介绍，并提供了示例代码，希望能对 Vue 组件开发者有所帮助。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d86114a941bf7134edd2ef

Vue 组件生命周期