vue3中一些不常见的属性

1. shallowReactive 与 shallowRef

shallowReactive：只处理对象最外层（第一层）属性的响应式（浅响应式）。

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

应用场景：

如果有一个对象数据，结构比较深, 但变化时只是外层属性变化 ===> shallowReactive。如果有一个对象数据，后续功能不会修改该对象中的属性，而是生新的对象来替换 ===> shallowRef。 2. readonly 与 shallowReadonly readonly: 让一个响应式数据变为只读的（深只读）。shallowReadonly：让一个响应式数据变为只读的（浅只读，只有第一层属性是可读的，深层次的属性还是可以修改的）。应用场景: 不希望数据被修改时。 3. toRaw 与 markRaw

toRaw

作用：将一个由reactive生成的响应式对象转为普通对象。使用场景：用于读取响应式对象对应的普通对象，对这个普通对象的所有 *** 作，不会引起页面更新。

markRaw

作用：标记一个对象，使其永远不会再成为响应式对象。应用场景: 有些值不应被设置为响应式的，例如复杂的第三方类库等。当渲染具有不可变数据源的大列表时，跳过响应式转换可以提高性能。 4. customRef

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

案例：在输入框输入的内容，延时显示在h3标签中

5. provide 与 inject

 

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

套路：父组件有一个 provide 选项来提供数据，后代组件有一个 inject 选项来接收使用这些数据

父组件：

setup(){
	......
    let car = reactive({name:'奔驰',price:'40万'})
    provide('car',car) // 给自己的后代组件传递数据
    ......
}

后代组件（一般是孙组件，父子组件传参用props）：

setup(props,context){
	......
    const car = inject('car') // 拿到祖先的数据
    return {car}
	......
}

6. 响应式数据的判断

isRef: 检查一个值是否为一个 ref 对象isReactive: 检查一个对象是否是由 reactive 创建的响应式代理isReadonly: 检查一个对象是否是由 readonly 创建的只读代理isProxy: 检查一个对象是否是由 reactive 或者 readonly 方法创建的代理