Vue3 其它Composition API

一、shallowReactive 与shallowRef

1、shallowReactive: 只处理对象最外层属性的响应式（浅响应式）

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

3、什么时候使用？

如果一个对象数据，结构比较深，但变化时只是外层属性变化 ===》shallowReactive

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

二、readonly与shallowReadonly

1、readonly：让一个响应式数据变成只读的（深只读）

2、shallowReadonly：让一个响应式数据变为只读的（浅只读）

3、应用场景：不希望数据被修改时

三、toRaw与markRaw

1、toRaw

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

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

2、markRaw

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

应用场景：

1、有些值不应被设置为响应式的，例如复杂的第三方类库等

2、当渲染具有不可变数据源的大列表时，跳过响应式转换可以提高性能

四、customRef

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

代码：

五、provide与inject

1、作用：实现祖与后代组件间通信

2、套路：父组件有一个provide选项来提供数据，后代组件有一个inject选项来开始使用这些数据。

3、具体写法

1、祖组件中

javascript 复制代码

setup() {
    let car = reactive({name: '1', price: '2'})
    provide('car', car)
}

2、后代组件中

javascript 复制代码

setup(props, context) {
    const car = inject('car')
    return {car}
}

六、响应式数据的判断

isRef：检查一个值是否为一个ref对象

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

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

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