vue3中常见的组合式API

一、toRef 和 toRefs

应用：要将响应式对象中的某个属性单独提供给外部使用时。

语法：

        toRef语法：const name = toRef(person, 'name')

        toRefs语法：toRefs(person)，如果在return中直接写，需要用...(展开运算符)

二、shallowRef 与 shallowReactive（shallow浅层次的）

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

shallowReactive：只处理对象最外层属性的响应式(浅响应式)。

应用：

        如果有一个对象数据，后续功能不会修改该对象中的属性，而是生成新的对象来替换，用shallowRef。

        如果有一个对象数据，结构较深，变化时只有外层属性变化，用shallowReactive。

三、readonly 与 shallowReadonly（shallow浅层次的）

readonly：让一个响应式数据变为深层次只读（所有属性都不能被修改）。

shallowReadonly：让一个响应式数据变为浅只读（只有最外层属性不能被修改）。

应用：当一个对象定义在hook中，或者可复用的组件中，如果其中一个父组件不允许修改这个对象，就可以使用。

用法：person = readonly(person)     person = shallowReadonly(person)

四、toRaw 与 markRow

toRaw：

        作用：将一个由 reactive 生成的响应式对象转为普通对象。

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

        语法：const p = toRaw(person)

markRaw：

        作用：标记一个对象属性，使其永远不会再成为响应式。

        应用：
                （1）有些值不应被设置为响应式的，例如复杂的第三方类库等。
                （2）当渲染具有不可变数据源的大列表时，跳过响应式转换可以提高性能。

        语法：person.car = markRow(car)