前端之vue3的toRef、toRef、shallowReactive、shallowRef、toRaw、markRaw、customRef

toRef

生成reactive对象的某个属性的ref, 这样可以在模板总只写简短的属性名, 而且是响应式的.

处理一个对象的一个属性
toRef存在引用关系, 改变时会改变源数据
格式

toRef(对象,'对象的某个属性')
返回该对象这个属性的引用

toRefs

处理一个对象的多个属性
返回一个对象(包含对象的所有属性)

实例 – toRef

setup内的返回值

  setup() {
    let person = reactive({
      name: "李四",
      age: 18,
      job: {
        salary: 10,
      },
    });
    return {
      name: toRef(person, "name"),
      age: toRef(person, "age"),
      salary: toRef(person.job, "salary"),
      person,
    };
  },

改进实例 – toRefs √

  setup() {
    let person = reactive({
      name: "李四",
      age: 18,
      job: {
        salary: 10,
      },
    });
    return {
      ...toRefs(person),
      ...toRefs(person.job),
      person,
    };
  },

总结

浅响应 shallowReactive (了解)

只对对象的第一层属性进行响应式

shallowRef (了解)

不求人, 不调用reactive进行对象响应式
ref 会请 reactive 帮忙

总结

readonly和shallowReadonly

不让改 和 不让改第一层

用法: 将别人的数据拿过来用, 设置为只读

toRaw和markRaw(后一个用的更多)

原始 raw

toRaw(响应式数据)
返回把响应式数据Proxy.target

markRaw则直接让非响应式(target)不能被改成响应式数据,
也就是可以改,但是不会渲染
总结

customRef

指定延迟显示时间，防抖