当前位置：首页 > VUE

vue的ref实现

2026-03-08 17:50:45VUE

Vue 中 ref 的实现原理

Vue 的 ref 是一个用于获取 DOM 元素或组件实例的响应式引用。它通过创建一个响应式对象，将引用的值存储在 .value 属性中。

基本用法

在模板中通过 ref 属性标记元素或组件：

<template>
  <div ref="myDiv">Hello World</div>
  <ChildComponent ref="child" />
</template>

在脚本中通过 ref() 函数创建引用：

vue的ref实现

import { ref } from 'vue'

const count = ref(0)

实现机制

Vue 3 的 ref 实现基于 Proxy 和响应式系统：

当调用 ref(value) 时，会创建一个 RefImpl 实例
该实例将原始值包装在 .value 属性中
对 .value 的访问和修改会被追踪，触发响应式更新

模板 ref 的特殊处理

当在模板中使用 ref 属性时：

vue的ref实现

在组件挂载后，对应的 DOM 元素或组件实例会被自动赋值给 this.$refs 对象
如果用在 v-for 内部，$refs 会是一个数组
组合式 API 中需要通过同名变量访问

类型定义

TypeScript 中的类型定义展示了 ref 的结构：

interface Ref<T> {
  value: T
}

与 reactive 的区别

ref 可以包装基本类型（如 number, string）
reactive 只能用于对象类型
模板中使用 ref 不需要 .value，脚本中需要
ref 通过 .value 访问，reactive 直接访问属性

自定义 ref

可以通过 customRef 创建具有自定义行为的 ref：

import { customRef } from 'vue'

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