vue3组合式 API 基础

生命周期

• setup

  替代beforeCreat和Created
  

• onBeforeMount

  虚拟 DOM 已经生成完成，但尚未挂载到实际的 DOM 中
  

• onMounted

  虚拟 DOM 已挂载到实际的 DOM 中，可以进行 DOM 操作
  

• onBeforeUpdate

  组件的响应式数据更新之前（访问的更新前的数据）
  

• onUpdated

  组件的响应式数据更新并重新渲染 DOM 之后
  

• onBeforeUnmount

  组件实例销毁之前
  

• onUnmounted

  组件实例销毁之后（组件实例销毁后已无法获取到组件相关数据，但仍可访问全局数据）
  

基础使用

<template>
  <div>
    <p>{{ message }}</p>
    <p>Current Time: {{ currentTime }}</p>
    <button @click="updateMessage('Hello, Vue 3!')">Update Message</button>
  </div>
</template>

<script>
import { ref, defineComponent, onMounted, onBeforeMount, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue';

export default defineComponent({
  props: {
    initialMessage: {
      type: String,
      default: 'Hello, default message!'
    }
  },
  setup(props, {attrs, slots, emit}) {
    const message = ref(props.initialMessage);
    const currentTime = ref('');
    let timer;
    
    // 更新当前时间

    const updateTime = () => {
      currentTime.value = new Date().toString();
    };

    // 在组件挂载到 DOM 之前调用
    onBeforeMount(() => {
      console.log('onBeforeMount: Component is about to mount.');
    });

    // 在组件挂载到 DOM 之后调用
    onMounted(() => {
      console.log('onMounted: Component has been mounted.');
      
      // 设置并启动定时器
      updateTime();
      timer = setInterval(updateTime, 1000);
    });

    // 在组件的响应式数据更新之前调用
    onBeforeUpdate(() => {
      console.log('onBeforeUpdate: Component is about to update.');
    });

    // 在组件的响应式数据更新并且 DOM 更新之后调用
    onUpdated(() => {
      console.log('onUpdated: Component has been updated.');
    });

    // 在组件实例销毁之前调用
    onBeforeUnmount(() => {
      console.log('onBeforeUnmount: Component is about to be unmounted.');
    });

    // 在组件实例销毁之后调用
    onUnmounted(() => {
      console.log('onUnmounted: Component has been unmounted.');
      // 清理定时器
      clearInterval(timer);
    });

    // 示例事件触发
    const updateMessage = (newMessage) => {
      emit('update-message', newMessage);
      message.value = newMessage;
    };

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