有这两个能够帮我们“打通任督二脉”的Vue3高级技巧，掌握它们，将提高我们 ** 对底层原理的理解以及解决复杂问题的能力 ** 。
封装的艺术 —— 随心所欲地创建 Composable函数 ( useXXX )
Composable 是一个利用Vue组合式API来封装和复用 ** 有状态逻辑 ** 的函数。按照惯例，我们通常以 use
开头命名，例如 useMousePosition 、 useFetch 。它不是一个特定的API，而是一种代码组织模式。
- ** 告别Mixin的混乱 ** ：相比Vue2的Mixin，
Composable的来源清晰，不存在命名冲突问题，类型推导也更友好。我们知道每一个响应式状态和方法都来自于哪个use函数。 - ** 逻辑内聚，关注点分离 ** ：我们可以将一个复杂组件中的不同逻辑（如数据请求、事件监听、动画控制）拆分到不同的
Composable中，让组件的<script setup>部分变得异常清爽，只负责“组织”逻辑，而非“实现”逻辑。
** 创建一个 useDebouncedRef **
假设我们有一个搜索框，希望在用户停止输入500毫秒后再去请求API，以避免频繁的请求。这个“防抖”逻辑在很多地方都会用到。
** 1. 创建 useDebouncedRef.ts **
** 注意： ** 这里我们顺便用到了下一个技巧的核心API
customRef，稍后会详细讲解。
** 2. 在组件中使用 **
掌控响应式 —— 玩转 customRef 与 shallowRef
在熟练掌握 ref 和 reactive
之后，随着复杂功能或优化性能的出现，需要在必要时“绕过”或“定制”Vue的默认深度响应式行为。
customRef: 创建一个自定义的ref，并对其依赖跟踪和更新触发进行显式控制。我们上面的useDebouncedRef就是最佳范例。shallowRef: 创建一个只对.value的赋值操作是响应式的ref。其内部的值不会被深层地转换为响应式对象。- **
customRef体现了我们对响应式原理的理解 ** ：我们知道响应式系统工作的两个核心是track()（依赖收集）和trigger()（更新触发）。能够使用customRef意味着我们已经从API使用者变成了API“创造者”。 - **
shallowRef是性能优化的利器 ** ：当我们有大型的、不可变的数据结构时（例如一个巨大的JSON对象、一个第三方库的实例），使用ref会对其进行深度递归代理，造成不必要的性能开销。此时shallowRef就是最佳选择。
** 使用 shallowRef 优化大型数据 **
假设我们需要引入一个庞大的图表库实例，这个实例本身有很多内部属性，但我们只关心实例本身是否被替换。
将这两个技巧融入我们的日常开发中，刻意练习，我们的代码质量和个人技术深度，必将迈上一个新的台阶。