1、ref, shallowRef, triggerRef, customRef, isRef

ref：可接收泛型，也可自行推断类型，支持所有类型，深层次的响应

ref 可读取 dom 属性

ref 取值和赋值都需要.value，reactive 不需要

vue
<template>
  <div ref="form"></div>
  <button @click="getDom"></button>
</template>

<script setup lang="ts">
const form = ref<HTMLElement>();

const getDom = () => {
  cosole.log(form.value);
};
</script>

Ref：为 ref 的接口

isRef：判断对象是否为 ref 对象

shallowRef：浅层响应式性的，修改属性值时不会导致页面变化，需对 value 进行操作，只会修改到.value ref 和 shallowRef 不能一起写，不然会影响 shallowRef 造成视图的更新

triggerRef：会强制更新收集的依赖

customRef：自定义 ref

typescript
function MyRef<T>(value: T) {
  let timer: any;
  return customRef((track, trigger) => {
    return {
      get() {
        track();
        return value;
      },
      set(newVal) {
        clearTimeout(timer);
        timer = setTimeout(() => {
          value = newValue;
          trigger();
        });
      },
    };
  });
}

2、readonly，isReadonly，reactive, isReactive, shallowReactive

readonly： 只读，无法修改对象属性值

isReadonly：是否为只读属性

reactive：只接收 object 类型

isReactive；判断对象是否为 reactive 对象

shallowReactive：与 shallowRef 类似，只会修改到第一个属性，不会影响视图

3、toRef, toRefs，toRaw

toRef：只能修改响应式对象的值，修改非响应式对象的值视图无变化

toRefs：用于批量解构响应式对象，解构后的属性依然为响应式

typescript
const toRefs = (T extends object)(object: T) => {
  const map: any = {}
  for(let key in object) {
    map[key] = toRef(object, key)
  }
  return map;
}

toRaw：将 proxy 对象解构成原始对象

4、computed

监测属性值更新

vue
<template>
  <div>姓：{{ firstName }} 名：{{ lastName }}</div>
  <button @click="changeName">修改</button>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
const firstName = ref('1')
const lastName = ref('2')

// 选项式修改
const value = computed({
  get () => {
    return firstName.value + '-' + lastName.value;
  },
  set (newVal) => {
    [firstName,lastName] = newVal.split('-');
  }
})

// 函数式获取
const value = computed(() => {
  return firstName.value + '-' + lastName.value;
})

const changeName = () => {
  value.value = '3-4';
}
</script>

5、watch、watchEffect

watch：监听值的变化，其中配置项有三个参数 deep、immediate、flush deep：深度监听 immediate：立即执行回调函数 flush: pre：组件更新之前调用 sync：同步执行 post：组件更新之后执行

监听 reactive 时，immediate 默认开启 监听对象的某个属性时，需使用函数返回

watchEffect：高级监听器 传入一个函数，函数参数为一个函数，此方法在监听之前执行