Vue ref 类型总结

在 Vue 中，ref 是非常重要的 API，用于在模板或组件中引用 DOM 元素或组件实例。Vue 不同版本中提供了多种类型的 ref，包括选项式 API 和组合式 API 形式。下面是对几种 ref 类型的总结及其适用场景：

一、几种常见的 ref 类型

二、使用场景详解

1. 模板中 DOM 或子组件访问：

<template>
  <input ref="inputEl" />
</template>

<script>
export default {
  mounted() {
    this.$refs.inputEl.focus();
  }
}
</script>

📌 适用场景：需要直接操作 DOM 或调用子组件的方法（Vue 2 和 Vue 3 中都适用）。

2. 响应式数据定义（组合式 API）：

import { ref } from 'vue';
const count = ref(0);

📌 适用场景：在组合式 API 中创建响应式数据，适合任何响应式变量的定义。

3. 对象属性解构保持响应式：

const state = reactive({ a: 1, b: 2 });
const { a, b } = toRefs(state);

📌 适用场景：从响应式对象中提取多个属性时，保持响应性。

4. 浅层响应式对象引用（性能优化）：

const shallow = shallowRef({ a: 1 });

📌 适用场景：避免深层响应式开销，适用于大型对象或第三方库数据。

5. 自定义响应式逻辑（如节流防抖）：

const debounced = customRef((track, trigger) => {
  let value;
  return {
    get() {
      track();
      return value;
    },
    set(newVal) {
      value = newVal;
      debounce(() => trigger(), 200)();
    }
  };
});

📌 适用场景：实现复杂响应式控制，如防抖、节流、验证等。

6. 判断与解包工具：

• isRef(x)：判断是否是 ref
• unref(x)：取值，自动判断是否为 ref

总结建议

如需具体代码示例或配合 reactive/watch 等 API 使用，可继续告诉我。