ref

在 setup() 可创建一个静态的数据，如 const count = 0;
而使用 ref 可以接受一个内部值，返回一个响应式且可变的 ref 对象
ref 对象具有指向内部单个 property: .value

  1. import { ref } from 'vue';
  3. // 响应式返回一个 "RefImpl" 的 ref 对象，值存储在内部 .value 属性上，且可变
  4. const count = ref(0);
  6. count increment = () => {
  7.     count.value ++;
  8. }

这是解决 reactive 不支持原始值数据，ref 支持 string、number、boolean 原始值数据，同时也能作用于对象。

  1. const obj = ref({
  2.     name: 'Mr.Lee',
  3.   age: 100
  4. });
  6. // obj.value 下返回还是 reactive 的 proxy, obj 本身还是 RefImpl
  7. console.log(obj.value);
  8. console.log(obj.value.name);

在 setup() 返回时，不需要显式指明 .value , Vue 会自动解开

  1. return {
  2.     count,
  3. }

isRef

判断是否为 ref 对象

unref

如果参数是一个 ref，则返回内部值，否则返回参数本身
val = isRef(val) ? val.value : val 的语法糖
如果不是知道是 ref 对象与否，使用 unref 一定是解包的对象或值

toRef

可以将源响应式对象的 property 创建一个 ref 对象，
toRef 是引用操作，当修改数据时，原数据也会被修改

  1. const obj = reactive({
  2.     name: 'Mr.Lee',
  3.   age: 100
  4. });
  6. const ageRef = toRef(obj, 'age'); // 返回响应的 ref 对象引用
  8. ageRef.value++
  9. console.log(obj.age) // 101
  11. state.foo++
  12. console.log(ageRef.value) // 102

可以用来为源响应式对象上的某个 property 新创建一个 ref。然后，ref 可以被传递，它会保持对其源 property 的响应式连接。

toRefs

与 toRef 相似，但对象内所有 property 都会是 ref 对象

customRef

自定义 ref，并对其依赖项跟踪和更新触发进行显式控制。
需要一个工厂函数 function(track, trigger) {}

  • track() 和 trigger() 函数
  • 返回带有 get 和 set 的对象
    1. function useDebouncedRef(value, delay = 200) {
    2. let timeout;
    3. return customRef((track, trigger) => {
    4.   return {
    5.     get() {
    6.       track();
    7.       return value;
    8.     },
    9.     set(newValue) {
    10.       clearTimeout(timeout);
    11.       timeout = setTimeout(() => {
    12.         value = newValue;
    13.         trigger();
    14.       }, delay)
    15.     }
    16.   }
    17. })
    18. }

    shallowRef

    创建一个只跟踪自身 .value 变化的 ref, 但 value 不会变成 reactive。即如果是用 ref，value 是对象时会转为 reactive 对象。而 shallowRef 就不会
    1. const foo = shallowRef({})
    2. // 改变 ref 的值是响应式的
    3. foo.value = {}
    4. // 但是这个值不会被转换。
    5. isReactive(foo.value) // false

    triggerRef

    手动触发与 shallowRef 关联的任何副作用 ```vue

```