十一、其它Composition API

（一）toRef

1.作用

• 创建一个 ref 对象
• 其 value 值指向另一个对象中的某个属性

2.语法

const name = toRef(person, "name");

3.应用

• 要将响应式对象中的某个属性单独提供给外部使用时，且不丢失响应式

4.扩展

• toRefs 与 toRef 功能一致，但可以批量创建多个 ref 对象

1）语法

• toRefs(person)

2）应用

return { ...toRefs(person) };

（二）shallowReactive 与 shallowRef

1.shallowReactive

• 只处理对象最外层属性的响应式（ 浅响应式 ）

2.shallowRef

• 只处理基本数据类型的响应式，不进行对象的响应式处理

3.使用

• 如果有一个对象数据，结构比较深，但变化时只是外层属性变化
  • 使用 shallowReactive
• 如果有一个对象数据，后续功能不会修改该对象中的属性，而是生成新的对象来替换
  • 使用 shallowRef

（三）readonly 与 shallowReadonly

1.readonly

• 让一个响应式数据变为只读的（深只读）

2.shallowReadonly

• 让一个响应式数据变为只读的（浅只读）

3.使用

• 不希望数据被修改时
• 如：引入外部文件暴露的数据，只想做展示不希望被修改时

（四）toRaw 与 markRaw

1.toRaw

1）作用

• 将一个由 reactive 生成的 响应式对象 转为 普通对象
• ref 无效

2）使用

• 用于读取响应式对象对应的普通对象
• 对这个普通对象的所有操作不会引起页面更新

2.markRaw

1）作用

• 标记一个对象，使其永远不会再成为响应式对象

2）使用

• 有些值不应被设置为响应式的，例如复杂的第三方类库等
  • 如：日期转换库、生成随机数
• 当渲染具有不可变数据源的大列表时，跳过响应式转换可以提高性能

（五）customRef

1.作用

• 创建一个自定义的 ref，并对其依赖项跟踪和更新触发进行显示控制

2.应用

• 实现防抖效果

<template>
  <input v-model="keyWord" type="text" />
  <h3>{{ keyWord }}</h3>
</template>

<script>
  import { ref, customRef } from "vue";

  export default {
    name: "App",
    setup() {
      // 使用Vue提供的ref
      // let keyWord = ref("Hello");

      // 自定义一个ref——myRef
      function myRef(value, delay) {
        let timer;
        // 通过customRef实现自定义
        return customRef((track, trigger) => {
          return {
            get() {
              // 通知Vue追踪数据（return的数据）的变化
              track();
              return value;
            },
            set(newValue) {
              // 防抖效果
              clearTimeout(timer);
              timer = setTimeout(() => {
                value = newValue;
                // 通知Vue更新界面
                trigger();
              }, delay);
            },
          };
        });
      }
      // 使用自定义的ref
      let keyWord = myRef("Hello", 500);

      return {
        keyWord,
      };
    },
  };
</script>

（六）响应式数据的判断

1.isRef

• 检查一个值是否为一个 ref 对象

2.isReactive

• 检查一个对象是否是由 reactive 创建的响应式代理

3.isReadonly

• 检查一个对象是否是由 readonly 创建的只读代理

4.isProxy

• 检查一个对象是否是由 reactive 或者 readonly 方法创建的代理