我在学习组合式api遇到了些问题,还请各位大佬瞅瞅。

我们知道shallowRef 是浅作用形式的

  type obj={
    name:string
  }
const message:Ref<obj> = shallowRef({
    name:"您好 world"
})
//这里修改值但是浏览器是不会响应式显示的
message.value.name= " 我不好"

在使用customRef时,当我创建了一个防抖的ref 并使用它时,是正常的

function myref<T = any>(value:T,time=2000){
  let timeout:any;
  return customRef((track ,trigger )=>{
    return {
      get(){
        track()
        return value
      },
      set(newval: T){
        clearTimeout(timeout);
        timeout = setTimeout(()=>{
          console.log('触发了set')
          value = newval
          trigger()
        },time)
      }
    }
  })
}
const xiaozhang = myref("张三")

但是当 customRef 和 shallowRef 用在一起就出现了一个小问题
这里我写了一个点击函数用于修改 message 和 xiaozhang 这两个变量 ,神奇的事情发生了 message响应式的更新了 这个自定义ref就像是强制更新了shallowRef一样 但是用vue的ref就不会发生这样的事情


const clicks = ()=>{
message.value.name= " 我不好"
xiaozhang.value = "老王"
}

// template
<button @click="clicks ">change<button>
<div class="heizi">
    {{message.name}}{{xiaozheng}}
  </div>

你把template的内容写到render里面然后给render来个断点或者控制台输出就知道为什么了

setup(){
  return () => h('div',{},[h('button',{onClick:clicks()}), /*....*/]) 
}
// 或者
{
  //setup() .... ,
  render() {
    return h(/****/)
  }
}

自己试一下你会恍然大悟
渲染机制 | Vue.js (vuejs.org)