Ref isRef customRef shallowRef triggerRef

Ref

1. 接受一个内部值并返回一个响应式且可变的 ref 对象。ref 对象仅有一个 .value property，指向该内部值。
2. 如果将对象分配为 ref 值，则它将被 reactive 函数处理为深层的响应式对象。
3. template 内使用 ref 对象，会自动解包。

示例代码

<template>
  <div>
    {{Reftest}}
  </div>
</template>
<script lang='ts' setup>
import { ref,isReactive } from 'vue';
const Reftest = ref('test')
console.log(Redf.value);
</script>

在阅读源码后知道了Ref在接收对象和数组这些引用类型数据时自己也会调用Reactive，相对比shallowRef则没有调用。

isRef

1. 检查值是否为一个 ref 对象。

<script lang='ts' setup>
import { isRef } from 'vue';
// ()内例子是上面的。
console.log(isRef(Reftest));
</script>

cusomRef

1. 创建一个自定义的 ref，并对其依赖项跟踪和更新触发进行显式控制。它需要一个工厂函数，该函数接收 track 和 trigger 函数作为参数，并且应该返回一个带有 get 和 set 的对象。

<script lang='ts' setup>
import { useDebouncedRef } from 'vue';
function useDebouncedRef(value, delay = 200) {
  let timeout;
  return customRef((track, trigger) => {
    return {
      get() {
        return value
      },
      set(newValue) {
        // 此处可以做一系列操作进行数据处理。
        // 例子1：使用自定义 ref 通过 v-model 实现 debounce 的示例：
        clearTimeout(timeout)
        timeout = setTimeout(() => {
          value = newValue
          trigger()
        }, delay)
      }
    }
  })
}
let a23 = useDebouncedRef('hello')
</script>

shallowRef

1. 如字面意思，浅响应式，如果传入的是基本类型跟 ref 没区别。
2. 如果传入的是引用类型，.value值将不会是响应式的数据，ref的 value 属性则会是响应式的。

<script lang='ts' setup>
import { shallowRef,isReactive } from 'vue';
const foo = shallowRef({a:1})
// 改变 ref 的值是响应式的
foo.value = {b:2}
// 但是这个值不会被转换。
isReactive(foo.value) // false
</script>

在阅读源码之后知道了shallowRef没有调用Reactive，这就导致shallowRef只能浅层次的监听，例如数组、对象这些引用类型里的值发生改变则不能监听到，从而进行响应。

triggerRef

1. 手动执行与 shallowRef 关联的任何作用 (effect)。
2. 简单讲就是配合 shallowRef 用的，并且 shallowRef 传入的是个引用类型。

<script lang='ts' setup>
import { shallowRef,watchEffect,triggerRef } from 'vue';
const shallow = shallowRef({
  greet: 'Hello, world'
})
watchEffect(() => {
  // 第一次运行时记录一次 "Hello, world"
  console.log(shallow.value.greet)
})
shallow.value.greet = 'Hello, universe'

// 首先 watchEffect 追踪的是响应式数据，shallowRef 是浅层的，  
// 所以当是{}的时候，无法触发 effect ，每次操作 shallow.value 的时候，则需要 triggerRef(shallow) 主动触发执行。  
// 记住，是每次操作，都需要 triggerRef() 一下
triggerRef(shallow)
</script>

ref底层实现的时候自己就调了该方法，但是shallowRef没有，所以在使用时ref和shallowRef不要一起用