Vue 3 中的常用生命周期函数使用场景详解

引言

在 Vue 3 中，虽然

setup()

函数是 Composition API 的入口点，但传统的 Options API 中的生命周期钩子仍然可用，并且它们的使用方式和 Vue 2 中非常相似。下面我们将详细解释 Vue 3 中一些常用的生命周期函数的使用场景，并通过代码示例来说明其背后的原因。

1.

beforeCreate()

** 使用场景**：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。此时组件的选项对象还未被创建，

el

和

data

都为

undefined

，无法访问到数据和 DOM。

代码示例（通常不推荐在此阶段进行任何操作，因为很多功能都不可用）：

<script>  
export default {  
  beforeCreate() {  
    // 很少在此阶段进行操作，因为组件实例尚未完全创建  
    console.log('beforeCreate 钩子被调用');  
  },  
  // ...  
}  
</script>

原因：由于此时组件实例还未完全创建，通常没有太多实际用途，但在某些高级用法中（如插件开发）可能会用到。

2.

created()

** 使用场景**：在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，以及

watch/event

事件回调。然而，挂载阶段还没开始，

$el

属性目前不可见。

代码示例：

<script>  
export default {  
  data() {  
    return {  
      message: 'Hello Vue 3!'  
    };  
  },  
  created() {  
    // 组件实例已创建，可以访问到 data 中的数据  
    console.log('created 钩子被调用', this.message);  
    // 可以在这里发起异步请求或执行初始化操作  
  },  
  // ...  
}  
</script>

原因：

created

钩子非常适合执行非 DOM 相关的初始化操作，如数据初始化、网络请求等。

3.

beforeMount()

** 使用场景**：在挂载开始之前被调用：相关的

render

函数首次被调用。此时模板编译完成，但尚未挂载到页面上，

$el

属性目前不可见。

代码示例：

<script>  
export default {  
  beforeMount() {  
    // 模板编译完成，但尚未挂载到页面上  
    console.log('beforeMount 钩子被调用');  
    // 可以在这里对即将被挂载的模板做一些处理  
  },  
  // ...  
}  
</script>

原因：

beforeMount

钩子在模板编译完成后执行，但此时 DOM 还未挂载，因此可以在此阶段对模板进行一些处理，如修改虚拟 DOM。

4.

mounted()

** 使用场景**：实例被挂载后调用，此时

el

被新创建的

vm.$el

替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个

in-document

元素，当

mounted

被调用时

vm.$el

也在文档内。

代码示例：

<script>  
export default {  
  mounted() {  
    // 组件已挂载到页面上，可以访问到 DOM  
    console.log('mounted 钩子被调用');  
    // 可以在这里执行 DOM 操作或启动第三方库  
  },  
  // ...  
}  
</script>

原因：

mounted

钩子在 DOM 挂载完成后执行，因此可以安全地访问和修改 DOM。

5.

beforeUpdate()

** 使用场景**：数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。

代码示例：

<script>  
export default {  
  beforeUpdate() {  
    // 数据更新，但 DOM 还未重新渲染  
    console.log('beforeUpdate 钩子被调用');  
    // 可以在这里访问更新前的 DOM 状态  
  },  
  // ...  
}  
</script>

原因：在

beforeUpdate

钩子中，你可以访问到更新前的 DOM 状态，这在某些需要处理更新过程中副作用的情况下非常有用。

6.

updated()

** 使用场景**：由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。

代码示例：

<template>  
  <div>{{ message }}</div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      message: 'Hello Vue 3!'  
    };  
  },  
  updated() {  
    // DOM 已更新，可以执行依赖于 DOM 的操作  
    console.log('updated 钩子被调用', this.message);  
    // 可以在这里访问更新后的 DOM 状态，并执行相关的 DOM 操作  
  },  
  methods: {  
    changeMessage() {  
      this.message = 'Hello, updated!';  
    }  
  },  
  // ...  
}  
</script>

原因：

updated

钩子在数据更新并重新渲染 DOM 后调用，因此可以访问到更新后的 DOM 状态。这在进行一些依赖于 DOM 状态的操作（如重新计算布局、更新动画等）时非常有用。但请注意，避免在此钩子中修改数据，因为这可能导致无限更新循环。

7.

beforeUnmount()

使用场景：组件实例卸载之前调用。在这个阶段，实例仍然完全可用。

代码示例：

<script>  
export default {  
  beforeUnmount() {  
    // 组件即将被卸载  
    console.log('beforeUnmount 钩子被调用');  
    // 可以在这里清理定时器、移除事件监听器等  
  },  
  // ...  
}  
</script>

原因：在组件卸载之前，我们需要确保清理掉任何可能导致内存泄漏或意外的副作用的资源。使用

beforeUnmount

可以确保这些资源在组件卸载时得到正确清理。

总结

    Vue 3 的生命周期钩子为开发者提供了在组件生命周期的不同阶段执行特定逻辑的能力。通过合理使用这些钩子，我们可以更好地管理组件的状态、DOM 操作和副作用，从而创建出更高效、更健壮的 Vue 应用程序。每个钩子都有其特定的使用场景，了解并正确使用它们可以大大提高我们的开发效率。