关于VueUse中useVModel返回值的问题

在做商城项目的checkBox的时候，按照自己的思路使用useVModel出现问题，返回值一直为true，代码如下

//我的代码
const checked = useVModel(props, "modelValue", emit);
    const changeChecked = () => {
      checked.value = !checked.value;
     //因为传过来的modelValue为true，这里我认为是可以取反赋值的
    //然而log输出的一直为false
      console.log(checked);    
      emit("change", checked.value);
    };  

//文档代码  
const checked = useVModel(props, 'modelValue', emit)
    const changeChecked = () => {
      const newVal = !checked.value
      checked.value = newVal
      emit('change', newVal)
    }

我当时还不理解，为什么要定义一个中间变量newVal，我觉得我的操作和文档的是一样的，因为我理解赋值之后 newVal  === checked.value，所以我回传了修改之后的checked.value，发现是不生效的。

我将其修改为 !checked.value，生效

//修改后生效代码
const checked = useVModel(props, "modelValue", emit);
    const changeChecked = () => {
      checked.value = !checked.value;
      emit("change", !checked.value);
    };

 

查阅文档得知，并log打印得知，useVModel返回的是计算属性，而不是ref，并不能直接修改check.value的值

 

一开始传checked.value一直为true的原因就是不可直接修改值

其实一想也对：直接修改就等于是改了props的值，这在Vue中是不允许的，需要emit通知父组件改值

 

文档的意思是

 const checked = useVModel(props, 'modelValue', emit)
    const changeChecked = () => {
      const newVal = !checked.value
      // 通知父组件，所以是可以直接修改值的
      checked.value = newVal
      // 让组件支持change事件
      emit('change', newVal)
    }

为什么不直接change事件即可？

 

12-26：做到另一个类似的功能的时候，终于大致有了些模糊的理解：

      // 单纯通知父组件，本组件的值在函数结束前并不会立即变化
      checked.value = newVal
      // 让组件支持change事件，这是为了让父组件能拿到子组件的值，还可以拿到自己的值作为参数传递
      emit('change', newVal)