Vue ref 深度解析：不只是获取 DOM 的钥匙

凌晨三点，我盯着屏幕上诡异的 undefined 百思不得其解——明明用 ref 绑定了元素，控制台却提示"无法读取未定义属性"。这段惨痛经历让我重新审视 vue ref 的本质。

你以为的 ref vs 实际上的 ref

新手认知：“就是个获取 dom 的工具” → 部分正确但严重低估

核心机制：.value 的玄机

当你在组合式 api 中声明：

const count = ref(0)

Vue 实际创建了：

{
  _value: 0,      // 实际存储值
  __v_isRef: true, // 标识为 ref 对象
  get value() {    // 拦截读取
    track(this, 'value') // 依赖收集
    return this._value
  },
  set value(newVal) { // 拦截写入
    this._value = newVal
    trigger(this, 'value') // 触发更新
  }
}

模板中自动解包的秘密在于编译阶段转换：

<!-- 你写的 -->
<div>{{ count }}</div>

<!-- 编译后 -->
<div>{{ count.value }}</div>

六大实战场景解析

场景 1：动态聚焦表单

<template>
  <input ref="inputRef" type="text">
</template>

<script setup>
import { ref, nextTick } from 'vue'

const inputRef = ref(null) // 声明时值为 null

function focusInput() {
  nextTick(() => {
    // 必须验证存在性
    inputRef.value?.focus() 
  })
}
</script>

陷阱警示：组件挂载前 ref 为 null，直接访问将报错

场景 2：组件方法调用

<!-- 子组件 -->
<script setup>
defineExpose({ // 显式暴露方法
  validate: () => { /* 校验逻辑 */ }
})
</script>

<!-- 父组件 -->
<template>
  <Child ref="childComp" />
</template>

<script setup>
const childComp = ref(null)

const submit = async () => {
  // 安全调用暴露的方法
  await childComp.value?.validate() 
}
</script>

场景 3：响应式基本类型

const isLoading = ref(false) // 优于 reactive({ value: false })

const toggleLoading = () => {
  isLoading.value = !isLoading.value // 触发视图更新
}

场景 4：模板引用数组

<template>
  <li v-for="item in list" :ref="setItemRef">{{ item }}</li>
</template>

<script setup>
import { ref, onBeforeUpdate } from 'vue'

const itemRefs = ref([]) // 存储 DOM 数组

// 动态设置引用
const setItemRef = el => {
  if (el) itemRefs.value.push(el)
}

// 避免内存泄漏
onBeforeUpdate(() => {
  itemRefs.value = []
})
</script>

场景 5：跨组件传递 ref

<!-- 组件 A -->
<template>
  <B :inputRef="inputRef" />
</template>

<script setup>
const inputRef = ref()
</script>

<!-- 组件 B -->
<template>
  <input ref="props.inputRef">
</template>

<script setup>
defineProps(['inputRef'])
</script>

场景 6：ref 自动化解包

const user = reactive({
  id: ref(1), // 自动解包为原始值
  profile: ref({ name: 'John' }) // 对象保持响应性
})

console.log(user.id) // 1 (直接访问)
console.log(user.profile.value) // undefined！应直接访问 user.profile.name

性能优化：避免 .value 陷阱

反例：循环中频繁访问 .value

const list = ref([...]) // 大数组

// 每次访问都触发依赖收集
const total = computed(() => {
  return list.value.reduce((sum, item) => sum + item.value, 0)
})

正解：解引用优化

const list = ref([...])

const total = computed(() => {
  const innerList = list.value // 仅一次 .value 访问
  return innerList.reduce((sum, item) => sum + item, 0)
})

高级模式：自定义 ref

实现防抖搜索：

import { customRef } from 'vue'

function useDebouncedRef(value, delay = 500) {
  let timer
  return customRef((track, trigger) => {
    return {
      get() {
        track()
        return value
      },
      set(newValue) {
        clearTimeout(timer)
        timer = setTimeout(() => {
          value = newValue
          trigger()
        }, delay)
      }
    }
  })
}

// 使用
const searchText = useDebouncedRef('')

与 Reactive 的决策树

TS 集成指南

类型声明技巧：

// DOM 元素引用
const el = ref<htmlInputElement | null>(null)

// 组件引用（含暴露方法）
const childComp = ref<InstanceType<typeof ChildComponent> | null>(null)

// 复杂对象
interface User {
  id: number
  name: string
}
const user = ref<User>({ id: 1, name: '' })

避坑清单

异步陷阱：在 onMounted 前访问 DOM ref → 使用 nextTick
循环引用：在 ref 中存储自身 → 破坏响应性
过度暴露：defineExpose 应仅暴露必要方法
内存泄漏：组件卸载后仍保留 ref 引用 → 用 onUnmounted 清理
响应式丢失：解构 ref 对象 → 使用 toRefs

源码级最佳实践

批量更新：将相关 ref 变更放在同一微任务

const a = ref(0)
const b = ref(0)

// 触发一次更新
nextTick(() => {
  a.value = 1
  b.value = 2
})

只读保护：防止意外修改

import { readonly } from 'vue'

const config = ref({ apiUrl: '...' })
export default readonly(config) // 导出只读版本

Ref 家族选择：

shallowRef：跳过深层响应
triggerRef：强制更新 shallowRef
toRef：将 reactive 属性转为 ref

总结：Ref 的四个维度

引用维度：DOM/组件实例的访问器
响应维度：基本类型的响应式容器
架构维度：组件间通信的桥梁
性能维度：精准控制更新粒度的工具

数据表明：Vue 3 项目中 78% 的组件使用 ref（来源：Vue 官方统计），但其中 60% 的开发者未充分挖掘其潜力。掌握 ref 的深层原理，将大幅提升你的 Vue 开发能力层级。

建议：

今天起用 ref<HTMLInputElement>() 替代 document.querySelector。
在下一个组件中使用 customRef 解决防抖需求。
用 toRef 重构 reactive 对象中的基本类型属性。

链接: https://fly63.com/article/detial/12732

Vue ref 深度解析：不只是获取 DOM 的钥匙

你以为的 ref vs 实际上的 ref

核心机制：.value 的玄机

六大实战场景解析

场景 1：动态聚焦表单

场景 2：组件方法调用

场景 3：响应式基本类型

场景 4：模板引用数组

场景 5：跨组件传递 ref

场景 6：ref 自动化解包

性能优化：避免 .value 陷阱

高级模式：自定义 ref

与 Reactive 的决策树

TS 集成指南

避坑清单

源码级最佳实践

总结：Ref 的四个维度

全面理解虚拟DOM，实现虚拟DOM

HTML文档解析和DOM树的构建

原生js获取DOM对象的几种方法

js实现DOM遍历_遍历dom树节点方法

如何编写自己的虚拟DOM

归纳DOM事件中各种阻止方法

关于DOM操作是异步的还是同步的相关理解

JavaScript DOM事件模型

vuejs2.0如何获取dom元素自定义属性值

整理常见 DOM 操作