vue的ref实现

Vue 中 ref 的实现原理

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

基本用法

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

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

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

import { ref } from 'vue'

const count = ref(0)

实现机制

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

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

模板 ref 的特殊处理

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

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

类型定义

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

interface Ref<T> {
  value: T
}

与 reactive 的区别

1. ref 可以包装基本类型（如 number, string）
2. reactive 只能用于对象类型
3. 模板中使用 ref 不需要 .value，脚本中需要
4. 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)
      }
    }
  })
}

性能考虑

1. 避免过度使用模板 ref，优先考虑 props 和事件
2. 大量使用 ref 可能影响性能，特别是在频繁更新的场景
3. 组合式 API 中的 ref 比选项式 API 的 $refs 更灵活

常见使用场景

1. 访问 DOM 元素进行直接操作
2. 调用子组件的方法
3. 表单输入的双向绑定
4. 需要响应式的基本类型值
5. 与第三方库集成时需要 DOM 引用