vue3 钩子

// Vue 3 钩子示例代码

<template>
  <div id="app">
    <p>{{ message }}</p>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

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

export default {
  name: 'App',
  setup() {
    const message = ref('Hello Vue 3!');

    // onMounted 钩子在组件挂载时调用
    onMounted(() => {
      console.log('Component is mounted');
    });

    // onUnmounted 钩子在组件卸载时调用
    onUnmounted(() => {
      console.log('Component is unmounted');
    });

    const updateMessage = () => {
      message.value = 'Updated message!';
    };

    return {
      message,
      updateMessage
    };
  }
};
</script>

<style scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

解释说明

1. ref: 用于声明响应式变量。在这个例子中，message 是一个响应式变量，初始值为 'Hello Vue 3!'。
2. onMounted: 这是一个组合式 API 钩子，在组件挂载完成后调用。你可以在这里执行一些初始化操作，比如发送网络请求、订阅事件等。
3. onUnmounted: 这是另一个组合式 API 钩子，在组件卸载之前调用。你可以在这里清理资源，比如取消订阅、清除定时器等。
4. setup 函数: 这是组合式 API 的入口函数，所有的组合式 API 钩子和逻辑都在这里定义。它返回的对象中的属性和方法可以直接在模板中使用。

这个示例展示了如何使用 Vue 3 的组合式 API 钩子来管理组件的生命周期。