vue ref实现原理
Vue ref 的实现原理
Vue 中的 ref 是一个核心特性，用于在模板或 JavaScript 中直接访问 DOM 元素或组件实例。其实现原理主要基于响应式系统和虚拟 DOM 机制。
响应式包装
ref 在 JavaScript 中通过 ref() 函数创建一个响应式引用。内部使用 Proxy 或 Object.defineProperty（Vue 2）对值进行包装，使其能够触发依赖收集和更新。
const count = ref(0);
// 内部实现类似：
function ref(value) {
return reactive({ value });
}模板中的 ref
在模板中通过 ref 属性标记 DOM 或组件，Vue 会在渲染过程中将这些引用收集到组件的 $refs 对象中。实现过程分为以下阶段：
- 编译阶段：模板编译为渲染函数时，识别
ref属性并生成对应的vnode数据。 - 挂载阶段：在
patch过程中，将 DOM 节点或组件实例赋值到$refs对象。
<template>
<div ref="myDiv"></div>
</template>
<script>
export default {
mounted() {
console.log(this.$refs.myDiv); // 获取 DOM 节点
}
}
</script>动态 ref 与函数 ref
Vue 支持动态 ref 和函数形式的 ref，用于更灵活的场景。函数 ref 会在每次更新时调用，接收 DOM 节点或组件实例作为参数。
<template>
<div :ref="(el) => { dynamicRef = el }"></div>
</template>
<script>
export default {
data() {
return { dynamicRef: null }
}
}
</script>与 React ref 的差异
Vue 的 ref 是响应式对象，而 React 的 useRef 返回的是可变对象（{ current: value }）。Vue 的模板 ref 自动处理引用赋值，React 需要手动通过 ref.current 访问。
性能注意事项
频繁操作 $refs 可能绕过 Vue 的响应式系统，建议优先使用数据驱动的方式。在组合式 API 中，ref() 更适合管理基本类型的响应式状态。
