开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第18天，点击查看活动详情

前言

前面我们学习了ref()等工具函数，vue中还有其他工具函数，在vue官方文档中属于进阶类的，下面我们来学下常用几种的含义与用法。

shallowRef()

shallowRef():返回一个浅层的ref对象，ref对象会自动将嵌套数据都响应化，浅层的意思就是只有第一层数据有响应式，也就是ref.value的值改变才会触发更新。

    import { shallowRef, watch } from 'vue';
    const obj = shallowRef({
      name: 'tpsz',
    });
    watch(obj, (newVal, oldVal) => {
      console.log(newVal); //只打印一次 tpsz1
    });
    obj.value.name = 'sss';
    obj.value = { name: 'tpsz1' };

watch创建的obj常量，只有obj.value改变时才能被监听到触发更新。

triggerRef()

triggerRef():针对于浅层ref对象，会强制触发更新，上面例子我们修改深层次数据是不会触发更新，这时候用triggerRef()就能触发更新，执行回调函数。

    const obj = shallowRef({
      name: 'tpsz',
    });
    watch(obj, (newVal, oldVal) => {
      console.log(newVal); //{name:sss}
    });
    obj.value.name = 'sss';
    triggerRef(obj)

shallowReactive()

shallowReactive():返回浅层的reactive，跟shallowRef一样，创建的数据都是浅层的响应式。最关键的是它不会对ref对象进行解包。

    const age = ref(20);
    const student = reactive({ age: age, name: 'tpsz' });
    const student1 = shallowReactive({ age: age, name: 'tpsz' });
    console.log(student1.age.value); // 20 没有解包需要用value读取值
    console.log(student.age); // 20

shallowReadonly()

shallowReadonly():返回浅层的readonly()，只有浅层的是只读属性，深层次的不受只读限制能够被修改。同样它也不会对ref对象进行解包。

    const student = shallowReadonly({ name: 'tpsz', other: { age: 20 } });
    //提示Cannot assign to 'name' because it is a read-only property
    student.name = 'tasz';
    //可以正常修改
    student.other.age = 30;

toRaw()

toRaw():返回代理的原始对象，也就是目标对象。该方法可以用于读取数据，不去引起响应变化，但尽量不要去赋值保存，要根据具体的需求去使用它，比如做类型判断、相等判断等。

    const name = 'tpsz';
    const refName = ref(name);
    console.log(toRaw(name));//tpsz

除了ref，reactive，readonly等都能返回对应的原始对象。

markRaw()

markRaw():将对象设置为不可代理，也就是说用该函数后，再用ref、reactive等去设置响应对象，就不会成功。

    const name = markRaw({ realName: 'tpsz' });
    const refName = ref(name);
    console.log(isRef(name)); //false

markRaw设置的是对象，不能对基础数据类型做限制，我们看下ts类型就知道啦。

  //继承对象类型
   function markRaw<T extends object>(value: T): T

总结

以上就是vue响应式API中进阶的几个函数，具体的我们可以看下官方文档。总的来说这些函数都是围绕着响应式功能的，所以我们一定要理解响应式原理。

vue学习——进阶函数

前言