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

引言

1. beforeCreate()

2. created()

3. beforeMount()

4. mounted()

5. beforeUpdate()

6. updated()

7. beforeUnmount()

总结

引言

在 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 可以确保这些资源在组件卸载时得到正确清理。