Vue3 组合式 API：生命周期钩子（三）

1、onMounted()

onMounted() 会在组件挂载到 DOM 后立即调用，此时 DOM 已经渲染完毕，可以进行相关的 DOM 操作或发起网络请求。

export default {
     
  setup() {
     
    // 可以在这里定义响应式状态、计算属性等  
    onMounted(() => {
     
      // 组件挂载到 DOM 后执行的代码  
      console.log('组件已挂载到 DOM');  
      // 在这里可以进行 DOM 操作或发起网络请求等  
    });  
    // 返回需要暴露给模板的响应式状态或方法等  
    return {
     
      // ...  
    };  
  },  
};

2、onUpdated()

在组件因为响应式状态变更而更新其 DOM 树之后调用。

<script setup>
import {
    ref, onUpdated