为什么这段代码在onupdated的时候更新了，在watch没更新<template> <div> <div> <div>封装后的多选框</div> <div> <w-checkbox-group v-model:value="checkedList" :options="plainOptions" /> </div> </div> </div> </template> <script lang="ts"> import WCheckboxGroup from "@/components/w-checkbox-group/checkboxGroup.vue"; import { defineComponent, reactive, toRefs, onUpdated, watch } from "vue"; const plainOptions = [ { label: "Apple", value: "Apple" }, { label: "Pear", value: "Pear" }, { label: "cc", value: "cc" }, ]; export default defineComponent({ components: { WCheckboxGroup }, setup() { const state = reactive({ indeterminate: true, checkAll: false, checkedList: [], }); // const onChangeOption = (val: any) => { // state.checkedList = val; // }; onUpdated(() => { console.log("checkedList changed:", state.checkedList); }); watch(state.checkedList, (newVal) => { console.log("checkedList watch:", newVal); }); return { ...toRefs(state), plainOptions }; }, }); </script>

这是因为在 Vue3 中，`watch` API 的默认参数 `immediate` 被设置为 `false`，即默认情况下不会在初始加载时执行回调函数。因此，在组件初始化时，`watch` 回调函数不会立即执行。

而 `onUpdated` 钩子函数是在组件更新之后执行的，因此在这个钩子函数中访问 `state.checkedList` 可以获取到最新的值。

如果你需要在组件初始化时就执行回调函数，可以将 `watch` 的第三个参数 `options` 中的 `immediate` 属性设置为 `true`，例如：

watch(state.checkedList, (newVal) => {
  console.log("checkedList watch:", newVal);
}, { immediate: true });