vue3中的ref toRef toRefs unRef 等等

ref

vue官方文档 接受一个内部值并返回一个响应式且可变的ref对象，该对象仅有一个.value property，指向该内部值
理解：ref把一个JS基本类型数据变为一个响应式的对象，并且如果我们访问该值，只能通过.value形式，比如
在这里插入图片描述可以看出使用ref定义的对象已经变成响应式的对象

unref

把ref定义的响应式对象转变为基本类型的数据

toRef

vue官方文档 可以用来为源响应式对象上的某个property新创建一个ref，然后，ref可以被传递，他会保持对源property的响应式链接
理解：对于reactive定义的响应式对象，如果要进行解构的话，对象的属性就会丢失响应式，如果用toRef来搞一下，就会和reactive定义的对象产生链接，就是说解构某个属性不会丢失它的响应式
不管toRef的对象有没有这个属性都可以，如果没有则.value的值为undefined
备注：ref定义的对象再使用toRef则不改变原数据源的数据
在这里插入图片描述

toRef的格式为 const toName=toRef(响应式对象，对象名)

toRefs

和toRef很像，只不过是把转换整个对象toRefs(响应式对象)
vue官网：将响应式对象转换为普通对象，其中结果对象的每个property都是指向原始对象响应的property的ref
以下是官网的例子：

const state = reactive({
  foo: 1,
  bar: 2
})

const stateAsRefs = toRefs(state)
/*
stateAsRefs 的类型:

{
  foo: Ref<number>,
  bar: Ref<number>
}
*/

// ref 和原始 property 已经“链接”起来了
state.foo++
console.log(stateAsRefs.foo.value) // 2

stateAsRefs.foo.value++
console.log(state.foo) // 3

function useFeatureX() {
  const state = reactive({
    foo: 1,
    bar: 2
  })

  // 操作 state 的逻辑

  // 返回时转换为ref
  return toRefs(state)
}

export default {
  setup() {
    // 可以在不失去响应性的情况下解构
    const { foo, bar } = useFeatureX()

    return {
      foo,
      bar
    }
  }
}
理解了toRef,toRefs就没什么好说的了，道理差不多

isRef

检查值是否为一个ref对象

自定义Ref customRef

customRef我觉得就和compute属性差不多，不过写法也有很大差别，但是都是执行数据的set函数和get函数，只不过在这个customRef中vue官方让使用track和trigger函数，不然无法实现数据变化的监听
理解：如果一个数据在变化的时候需要执行异步或者是其他的操作，可以使用cutomeRef,其实如果我们在watch中监听一个数据的变化也可以做到这种效果，而且watch的写法更加简单，不太明白vue官方出这个自定义Ref的真正意图，目前还没有发现，如果有理解的朋友情留言，谢谢。
官方代码如下：

<input v-model="text" />
function useDebouncedRef(value, delay = 200) {
  let timeout
  return customRef((track, trigger) => {
    return {
      get() {
        track()
        return value
      },
      set(newValue) {
        clearTimeout(timeout)
        timeout = setTimeout(() => {
          value = newValue
          trigger()
        }, delay)
      }
    }
  })
}

export default {
  setup() {
    return {
      text: useDebouncedRef('hello')
    }
  }
}

在这里插入图片描述上面的打印的自定义Ref,和ref其实差不多，只是改了个名字

shallowRef 和 triggerRef

使用shallowRef定义的数据，在正常情况下改变后，在watchEffect函数中时监听不到的，必须使用triggerRef再执行一下shallowRef对象
官网文档：

const shallow = shallowRef({
  greet: 'Hello, world'
})

// 第一次运行时记录一次 "Hello, world"
watchEffect(() => {
  console.log(shallow.value.greet)
})

// 这不会触发作用 (effect)，因为 ref 是浅层的
shallow.value.greet = 'Hello, universe'

// 记录 "Hello, universe"
triggerRef(shallow)

秒客网