Vue3其他组合API

1. shallowReactive和shallowRef

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

2. readonly与shallowReadonly

1. readonly: 让一个响应式数据变为只读的(深只读)
2. shallowReadonly: 让一个响应式数据变为只读的(浅只读)
3. 应用场景：不希望数据被修改时。比如使用别人的组件，别人的数据传过来是响应式的但是不希望使用者修改

3. toRaw与markRaw

1. toRaw:

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

2. markRaw:

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

4. customRef

• 作用： 创建一个自定义的ref, 并对其依赖项跟踪和更新触发进行显示控制。
• 实现防抖效果

<template>
  <input type="text" v-model="keyWord">
  <br />
  {{ keyWord }}
</template>

<script>
import { ref, reactive, customRef } from 'vue'

export default {
  name: 'UseCustormRef',
  setup(props, context) {
    // let keyWord = ref('')
    function myRef(orgValue, delay) {
      let timer
      return customRef((track, trigger) => {
        return {
          get() {
            console.log('有人在myRef中读取数据')
            track() // 通知Vue追踪orgValue的变化
            return orgValue
          },
          set(newValue) {
            clearTimeout(timer)
            console.log('有人在myRef中修改数据')
            timer = setTimeout(()=>{
              orgValue = newValue
              trigger() // 通知Vue重新解析模版
            }, delay)
          }
        }
      })
    }
    let keyWord = myRef('hello', 500)
    return {
      keyWord
    }
  }
}   
</script>

5. 响应式数据的判断API

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