其他Composition API

1. shallowReactive与shallowRef

• shallowReactive：只处理对象最外层属性的响应式（浅响应式）
• shallowRef：只处理基本数据类型的响应式，不进行对象类型的响应式处理

• 使用场景：

  • 如果有一个对象数据，结构比较深，但变化时只是第一层（外层）属性变化 ---> shallowReactive
  • 如果有一个对象数据，后续功能不会修改该对象中的属性，而是生成一个新的对象来替换 ---> shallowRef

2. readOnly与shallowReadOnly

• readOnly：让一个响应式数据变为只读的（深只读）
• shallowReadOnly：让一个响应式数据变为只读的（浅只读）
• 应用场景：不希望数据被修改时（如：使用的数据是别人传过来的）

3. toRaw与markRaw

• toRow：

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

• markRaw：

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

  • 应用场景：

    • 有些值不应被设置为响应式的，如复杂的第三方类库
    • 当渲染的对象是不可变数据源的复杂/大列表时，跳过响应式转换可以提高性能

4. customRef

• 作用：自定义 ref ，并对其依赖项跟踪和更新触发进行显示控制

• 实现防抖效果：

  <template>
    <br>
    <input type="text" v-model="keyWord">
    <h3>{{keyWord}}</h3>
  </template>
  
  <script>
  import {customRef, ref} from "vue";
  
  export default {
    name: 'MyDemo',
    setup() {
      //数据
      //Vue提供的ref
      //let keyWord = ref('你好')
  
      function myRef(value, delay) {
        return customRef((track, trigger) => {
          let timer
          return {
            get() {
              console.log(`有人从自定义的myRef容器中读取了数据，value:[${value}]`)
              //通知Vue追踪value的变化
              track()
              //2.读取
              return value
            },
            set(newValue) {
              console.log(`有人修改了自定义myRef容器中的数据，newValue:[${newValue}]`)
              clearTimeout(timer)
              timer = setTimeout(() => {
                //1.设置值
                value = newValue
                //3.通知Vue重新解析模板
                trigger()
              }, delay)
            }
          }
        })
      }
  
      //使用自定义的ref
      let keyWord = myRef('你好', 500)
  
      return {
        keyWord
      }
    }
  }
  </script>
  
  <style scoped>
  
  </style>

5. provide与inject

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

• 实现：

  <!-- 祖组件 -->
  setup() {
      ......
      let car = reactive({name: '马自达', price: '10w'})
      //给后代组件传递数据
      provide('car', car)
      ......
  }
  
  <!-- 后代组件 -->
  setup() {
      ......
      let car = inject('car')
      return {car}
      ......
  }

6. 响应式数据的判断

• isRef：检查是否是 ref 对象
• isReactive：检查是否是 reactive 对象
• isReadOnly：检查一个对象是否是由 readOnly 创建的只读代理对象
• isProxy：检查一个对象是否是由 reactive 或 readOnly 创建的代理对象