一、Suspense 组件

• 作用：在等待异步组件加载的过程中，渲染一些额外内容，提升用户体验。
• 使用步骤：
  1. 异步引入组件：

     import {
             
              defineAsyncComponent } from 'vue'
     const Child = defineAsyncComponent(() => import('./components/Child.vue'))
     

  2. 使用 <Suspense> 包裹组件，并配置 default 和 fallback 插槽：

     <template>
       <div class="app">
         <h3>我是App组件</h3>
         <Suspense>
           <template v-slot:default>
             <Child/>
           </template>
           <template v-slot:fallback>
             <h3>加载中......</h3>
           </template>
         </Suspense>
       </div>
     </template>
     

二、新的组件

1. Fragment

• 特点：在 Vue3 中，组件可以没有根标签，内部会将多个标签包含在一个 Fragment 虚拟元素中。
• 好处：减少标签层级，减小内存占用。

2. Teleport

• 作用：将组件的 HTML 结构移动到指定位置。
• 语法：

  <teleport to="移动位置">
    <div v-if="isShow" class="mask">
      <div class="dialog">
        <h3>我是一个弹窗</h3>
        <button @click="isShow = false">关闭弹窗</button>
      </div>
    </div>
  </teleport>
  

三、响应式数据的判断

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

四、provide 与 inject

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

     setup(){
             
             
       let car = reactive({
             
             name:'奔驰',price:'40万'})
       provide('car', car)
     }
     

  2. 孙组件中：

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

五、customRef

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

  function myRef(value, delay) {
        
        
    let timer
    return customRef((track, trigger) => {
        
        
      return {
        
        
        get() {
        
        
          console.log(`有人从myRef这个容器中读取数据了，我把${
          
          value}给他了~`)
          track() // 通知 Vue 跟踪 value 的变化
          return value
        },
        set(newVal) {
        
        
          console.log(`有人把myRef这个容器中数据改为了：${
          
          newVal}`)
          clearTimeout(timer)
          timer = setTimeout(() => {
        
        
            value = newVal
            trigger() // 通知 Vue 去重新解析模板
          }, delay)
        }
      }
    })
  }
  

六、toRaw 与 markRaw

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

七、readonly 与 shallowReadonly

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

八、shallowReactive 与 shallowRef

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

九、自定义 hook 函数

• 什么是 hook：本质是一个函数，把 setup 函数中使用的 Composition API 进行了封装。
• 类似于：vue2.x 中的 mixin。
• 自定义 hook 的优势：复用代码，让 setup 中的逻辑更清楚易懂。

十、toRef

• 作用：创建一个 ref 对象，其 value 值指向另一个对象中的某个属性值。
• 语法：const name = toRef(person, 'name')
• 应用：要将响应式对象中的某个属性单独提供给外部使用时。
• 扩展：toRefs 与 toRef 功能一致，但可以批量创建多个 ref 对象，语法：toRefs(person)