为什么这段代码在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>
时间: 2023-06-17 15:08:11 浏览: 37
这是因为在 Vue3 中,`watch` API 的默认参数 `immediate` 被设置为 `false`,即默认情况下不会在初始加载时执行回调函数。因此,在组件初始化时,`watch` 回调函数不会立即执行。
而 `onUpdated` 钩子函数是在组件更新之后执行的,因此在这个钩子函数中访问 `state.checkedList` 可以获取到最新的值。
如果你需要在组件初始化时就执行回调函数,可以将 `watch` 的第三个参数 `options` 中的 `immediate` 属性设置为 `true`,例如:
```js
watch(state.checkedList, (newVal) => {
console.log("checkedList watch:", newVal);
}, { immediate: true });
```
相关问题
为什么这段代码checkelist数据更新了但是页面渲染没更新<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); }, { immediate: true } ); return { ...toRefs(state), plainOptions }; }, }); </script>
可能是因为 `checklist` 是响应式数据,而 `watch` 函数默认只会对响应式数据进行浅层比较,如果新旧值的引用地址相同,就不会触发回调函数。可以尝试在 `watch` 函数中手动指定深层比较选项,例如:
```js
watch(
() => state.checkedList,
(newVal, oldVal) => {
console.log("checkedList watch:", newVal);
},
{ deep: true, immediate: true }
);
```
另外,`onUpdated` 钩子只在组件的 VDOM 更新完成后才会触发,因此可能不适用于检测响应式数据的变化。如果希望在 `checkedList` 发生变化时立即得到通知,可以使用 `watch` 函数。
请帮我看下这段代码为什么父组件接收到checkedList但是页面没有渲染<template> <div> <div> <div>封装后的多选框</div> <div> <w-checkbox-group v-model:value="checkedList" :options="plainOptions" @changeOption="onChangeOption" /> </div> </div> </div> </template> <script lang="ts"> import WCheckboxGroup from "@/components/w-checkbox-group/checkboxGroup.vue"; import { defineComponent, reactive, toRefs, onUpdated } 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); }); return { ...toRefs(state), plainOptions, onChangeOption }; }, }); </script>
这段代码看起来没有明显的问题,可以尝试检查以下几个方面来确定问题所在:
1. 确保父组件中正确引入了子组件 `WCheckboxGroup`,且引入路径正确。
2. 检查子组件 `WCheckboxGroup` 的实现是否正确,是否正确响应了 `v-model`。
3. 确保父组件中正确绑定了 `options` 和 `changeOption` 事件。
4. 检查父组件中是否正确渲染了子组件。
如果以上步骤都没有问题,可以尝试在父组件中加入一个 `watch` 监听 `checkedList` 的变化,以确保 `checkedList` 确实被修改了,例如:
```js
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, onChangeOption };
},
});
```
这样可以确保 `checkedList` 确实被修改了,如果仍然无法渲染页面,可以考虑在子组件中加入一些调试信息,例如在子组件的 `mounted` 中输出 `options` 和 `checked`,以确定子组件是否正确响应了 `v-model`,例如:
```js
export default {
name: "WCheckboxGroup",
props: {
value: Array,
options: Array,
},
data: function () {
return {
checked: this.value,
};
},
mounted() {
console.log("options:", this.options);
console.log("checked:", this.checked);
},
watch: {
value: function (newVal) {
this.checked = newVal;
},
checked: function (newVal) {
this.$emit("input", newVal);
},
},
};
```
如果以上步骤仍然无法解决问题,可以提供更多上下文信息或者代码片段,方便排查问题。