1. shallowRef 创建基本数据类型的浅层次响应式数据

import { shallowRef } from "vue";
  // shallowRef 用于创建一个对基本数据类型的浅层次响应式引用，不会对传入的值进行深度响应式处理。
  //这意味着，如果传入的是对象，那么 shallowRef 不会对该对象内部的属性进行响应式处理。
const count = shallowRef(0);  
console.log(count.value); // 输出: 0  
count.value++;  
console.log(count.value); // 输出: 1

const obj = shallowRef({
  name: "张三",
  age: 18,
})
obj.value.name = "李四"
console.log(obj.value.name)  // 输出：张三
obj.value.age ++
console.log(obj.value.age)  // 输出：18

// 优势
使用 shallowRef 的主要优势在于可以避免不必要的响应式更新，从而提高性能。当你知道某个对象的数据结构
复杂，但只需要关心其整体变化而非内部属性的变化时，使用 shallowRef 会更加高效。

// 何时使用
// 你应该在以下情况下使用 shallowRef：

当处理一个数据结构复杂但只需关注其整体变化的对象时。
当你知道对象的内部属性不会被修改，或者即使修改了也不需要触发响应式更新时。
当你希望避免对对象内部属性进行深度响应式处理以提高性能时。
总的来说，shallowRef 是一个强大的工具，可以帮助你更精细地控制 Vue 组件中的响应式行为，从而提高应用
程序的性能和效率。

2. shallowReactive 创建一个只处理对象最外层属性响应式的浅层次响应式对象

shallowReactive 用于创建一个只处理对象最外层属性响应式的浅层次响应式对象。这意味着，当对象
的外层属性发生变化时，Vue 会触发视图更新，但对象的内部深层属性变化则不会触发更新。

import { shallowReactive } from 'vue';  
  
const state = shallowReactive({  
  name: 'John',  
  age: 25,  
  address: {  
    city: 'New York',  
    country: 'USA'  
  }  
});  
  
console.log(state.name); // 输出: 'John'  
console.log(state.age);  // 输出: 25  
  
state.name = 'Jane'; // 触发响应式更新，视图会更新  
state.age++;         // 触发响应式更新，视图会更新  
  
state.address.city = 'Los Angeles'; // 不触发响应式更新，视图不会更新

// 何时使用
你应该在以下情况下使用 shallowReactive：

当处理一个大型或深层嵌套的对象，但你只关心其最外层属性的变化时。
当你知道对象的内部深层属性不会被修改，或者即使修改了也不需要触发响应式更新时。
当你希望避免对对象内部深层属性进行深度响应式处理以提高性能时。
使用 shallowReactive 可以帮助你更精细地控制响应式行为，避免不必要的性能开销，特别是在处理复杂数据结构
时。然而，请注意，如果你需要深度响应式处理（即对象内部属性的变化也需要触发更新），那么应该使
用 reactive 而不是 shallowReactive。

3.Teleport

Teleport 是一种能够将组件html结构移动到指定的位置
<template>
    to="???"  里面可以写 标签名及选则器---
    <Teleport to="body">
        <div class="model" v-show="isShow">
            <h2>我是一个弹窗</h2>
            <p>我是弹窗中的内容</p>
            <button>确定</button>
            <button>取消</button>
        </div>
    </Teleport>
</template>

4. Suspense （异步组件）
   Vue 3 中的 Suspense 是一个内置组件，主要用于在异步组件加载完成前显示占位符，以避免页面出现空白或显示错误信息。它旨在在组件树中协调对异步依赖的处理，使得在异步依赖项解析完成前，可以展示一个加载状态，从而提升用户体验。

Suspense 的工作原理基于异步组件和插槽。在初始渲染时，Suspense 会在内存中渲染其默认的插槽内容。如果在这个过程中遇到任何异步依赖（如异步组件或数据），Suspense 会进入挂起状态，并展示后备内容（fallback slot）。一旦所有异步依赖完成解析，Suspense 将进入完成状态，并展示出默认插槽的内容。

使用 Suspense 时，需要注意以下几点：

Suspense 组件只能包含一个异步组件，否则会抛出错误。
fallback 插槽中的内容只能是一个单独的元素，否则会抛出错误。
异步组件必须通过 defineAsyncComponent 方法定义，否则无法使用 Suspense 组件。
为了提高用户体验，建议在 fallback 插槽中显示一个占位符，如“Loading...”，以便在异步组件加载时给用户一个明确的反馈。

虽然 Suspense 目前是一个实验性功能，可能在未来的 Vue 版本中会有所变化，但它为处理异步组件和数据的加载提供了一种有效的方式，使得开发者能够更灵活地控制组件的渲染过程。