持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第11天，点击查看活动详情

前言

在vue3的响应式系统中，除了上一节介绍的经常使用的一些api，还有一些辅助api来帮助我们更好地完成开发工作。这些辅助api包括：

isRef
isReactive
isReadonly
isProxy
unref
toRef
toRefs

下面我们来介绍下这些api的使用场景。

isRef

用来检查一个值是否为ref对象
有的时候我们接受的值可能是基本数据类型值或者是一个ref对象，这个时候就需要通过判断来做不同的逻辑处理。

// isRef
const count = ref(1);
console.log(isRef(count));
console.log(isRef(123));
console.log(isRef(count) ? count.value : count);

isReactive

用来检查一个对象是否是由reactive创建的响应式对象。
和ref一样，我们有的时候也需要检查是否是一个reactive

// isReactive
const state = reactive({
  name: "tom",
  age: 123,
});
console.log(isReactive(state));

isReadonly

检查一个对象是否是由 readonly 创建的只读代理。
有的时候我们设置了readonly，为了避免不必要的错误，可以提前进行校验是否可以做修改

const state = reactive({
  name: "tom",
  age: 123,
});
// isReadonly
const obj = readonly(state);
console.log(isReadonly(obj));

isProxy

检查一个对象是否是由 reactive 还是 readonly 方法创建的代理。
用来区分ref、reactive、readonly

const count = ref(1);
const state = reactive({
  name: "tom",
  age: 123,
});
const obj = readonly(state);
// isProxy
console.log(isProxy(count));
console.log(isProxy(state));
console.log(isProxy(obj));

unref

如果参数是一个 ref 则返回它的 value，否则返回参数本身。它是 val = isRef(val) ? val.value : val 的语法糖。
有了这个函数，我们就不需要通过isRef来进行校验了，因为它帮助我们处理了校验过程，更加方便

// unref
const count = ref(1);
let num = 10;
console.log(unref(count));
console.log(unref(num));

toRef

toRef()函数用来将 reactive 对象的一个属性创建为一个 ref，并且这个 ref 具有响应性，可以被传递。
我们可以对普通对象进行转换，也可以对响应式对象中某个属性进行响应式转换，使其在解偶之后继续保持响应式。

const state = reactive({
  name: "tom",
  age: 123,
});
// toRef
const ageRef = toRef(state, "age"); //reference 引用
ageRef.value++;
console.log(state.age);
console.log(ageRef.value);

toRefs

toRefs()函数用来将 reactive 对象创建为一个普通对象，但该普通对象的每个属性都是一个ref，并且这个 ref 具有响应性，可以被传递。
有的时候我们想在页面使用我们定义的reactive的某个属性时，需要xxx.xxx进行使用，如果对reactive的属性进行解偶，则不能保持响应式，使用toRef需要一个一个进行响应式转换，很不方便。通过toRefs可以快速对reactive对象中的数据进行解偶并且每个属性都具备响应式特性

setup() {
  const state = reactive({
    name: "tom",
    age: 123,
  });
  // toRefs
  const stateRef = toRefs(state);
  state.age++;
  stateRef.age.value++;
  console.log(state.age);
  console.log(stateRef.age.value);
  const change = () => {
    state.age++;
  };
  return {
    // ...state, //使用展开运算符，响应式结构就没有了
    ...toRefs(state), // 使用toRefs转换，此时具有响应式
    change,
  };
}

总结

以上就是对于响应式工具集的介绍，其实还有很多高级的工具集，由于项目上用的不是很多，这里就不做介绍了，大家可以通过查阅文档继续深入研究。

vue3入门05 - 响应式系统工具集

前言

isRef

isReactive

isReadonly

isProxy

unref

toRef

toRefs

总结