vue3 --- 其他Composition API

shallowReactive 与shallowRef

• shallowReactive：只处理对象最外层属性的响应式（浅响应式）
• shallowRef：只处理基本数据类型的响应式，不进行对象的响应式处理。
• 什么时候用？
  • 如果有一个对象数据，结构比较深，但变化的只是外层属性变化【shallowReactive】
  • 如果有一个对象数据，后续功能不会修改对象中的属性，而是生新的对象来替换【shallowRef】

readonly与shallowReadonly

• readonly：让一个响应式数据变为只读（深只读）
• shallowReadonly：让一个响应式数据变为只读的（浅只读）
• 应用场景：不希望数据被修改时。

toRaw 与 markRaw

• toRaw：
  • 作用：将一个由 reactive 生成的响应式独享转为普通对象。（ref 不可以，是undefined）
  • 使用场景：用于读取响应式对象对应的普通对象，对这个普通对象的所有操作不会引起页面更新。
• markRaw：
  • 作用：标记一个对象，使其永远不会再成为响应式对象。
  • 应用场景：
    • 有些值不应被设置成响应式的，例如复杂的第三方类库等。
    • 当渲染具有不可变数据源的大列表时，跳过响应式转换可以提高性能。

customRef

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

provide 与 inject

• 作用：实现祖与后代组件间通信
• 套路：父组件有一个 provide 选项来提供数据，后代组件有一个 inject 选项来开始使用这些数据。
• 具体写法
  • 祖组件

    setup(){
        ........
        let J= reactive({name:'ju',age:8}) 
        provide('J',J)
    
    }

  • 后代组件

    
    setup(props,context){
        ........
        let J= inject('J')
        return {J}
    .......
    }

响应式数据的判断

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