Vue 3中＜script setup＞与生命周期钩子函数的详细解析

最新推荐文章于 2025-05-27 20:06:13 发布

原创

最新推荐文章于 2025-05-27 20:06:13 发布 · 1.5k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

Vue 3中 `<script setup>` 与生命周期钩子函数的详细解析

Vue 3 引入了 <script setup> 语法糖，这是一种简化和集成组件逻辑的新方式。尽管 <script setup> 简化了组件的编写，但仍然可以利用 Vue 提供的生命周期钩子函数来管理组件的生命周期。本文将深入探讨在 <script setup> 中如何使用和执行 Vue 生命周期钩子函数的方法和注意事项。

1. `<script setup>` 中的生命周期钩子函数

在 <script setup> 中，你可以通过导入 Vue 提供的生命周期钩子函数来执行特定阶段的操作。常用的生命周期钩子函数包括 onBeforeMount、onMounted、onBeforeUpdate、onUpdated、onBeforeUnmount 和 onUnmounted。以下是一个示例：

<template>
  <div>{
  
  { message }}</div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

const message = ref('Hello, Vue!');

onMounted(() => {
  console.log('Component mounted');
});

onUnmounted(() => {
  con