Ref全家桶

相当于vue2的data return中定义的数据，是数据的响应式。

ref

1
2
3
4
5
6
7
import {ref, Ref} from "vue";

//不同写法
//Ref的包装，复杂自定义类型时可以使用
let msg:Ref<string> = ref('hello world')
//让ref自己做类型推导
let msg = ref('hello world')

改为ref后，在<script>中需要通过.value来进行取值或赋值（在<template>中不需要）

isRef

判断是否为ref对象

shallowRef

浅层响应，只跟随.value响应，对于.value.属性的更改不响应

ref与shallowRef的使用不能混在一起，否则会导致shallowRef的浅层响应受到影响而更新。

这是因为二者的更新在底层都是调用的triggerRef，shallow在创建是被收集了依赖，而triggerRef调用时会更新所有依赖的修改，因此，无论隐式或显示地调用了triggerRef，所有值已更改的shallowRef都会在页面中更新

triggerRef

强制更新，将一个shallowRef的对象传入，也会使其对已修改的值进行更新。

customRef

自定义ref，可以做防抖

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
const myRef = <T=any>(value:T) => {
  let timer:any;
  return customRef((track, trigger) => {
    return {
      get() {
        track();
        return value;
      },
      set(newValue) {
        clearTimeout(timer);
        timer = setTimeout(() => {
          console.log('myRef触发')
          value = newValue;
          trigger();
        }, 500)
      }
    }
  });
}

let testMyRef = myRef({name:'ler-jiu'})

const changeMyRef = () => {
  testMyRef.value = {name: 'sb'}
}

延迟500ms更新，每次进入set会清除上一次的计时任务，频繁多次点击不会多次执行，只会执行最后一次

这里写的是浅层响应