vue ref实现原理
Vue 3 中 ref 的实现原理
ref 是 Vue 3 响应式系统的核心 API 之一，用于将基本类型或对象转换为响应式引用。以下是其实现原理的关键点：
核心机制
ref通过创建一个包装对象（RefImpl实例）实现响应式。该对象包含一个value属性，访问或修改时会触发依赖收集和更新。- 对于基本类型（如
number、string），ref直接包装其值；对于对象类型，内部会调用reactive进行深层响应式处理。
源码简化逻辑
class RefImpl {
constructor(value) {
this._value = isObject(value) ? reactive(value) : value;
this.dep = new Set(); // 存储依赖的 effect
}
get value() {
trackRefValue(this); // 依赖收集
return this._value;
}
set value(newVal) {
if (hasChanged(this._value, newVal)) {
this._value = isObject(newVal) ? reactive(newVal) : newVal;
triggerRefValue(this); // 触发更新
}
}
}
function ref(value) {
return new RefImpl(value);
}与 reactive 的区别
ref通过.value访问数据，适合包装基本类型或需要直接替换整个对象的情况。reactive直接返回代理对象，适用于复杂对象的深层响应式转换，但无法处理基本类型。
性能优化
ref对基本类型的处理比reactive更轻量，避免不必要的代理开销。- 通过
hasChanged检查值是否变化，避免重复触发更新。
模板中的自动解包
在模板中使用 ref 时，Vue 会自动解包 .value，无需显式调用：
<script setup>
const count = ref(0);
</script>
<template>
<button @click="count++">{{ count }}</button> <!-- 自动解包 -->
</template>关键设计思想
ref 的设计解决了 JavaScript 中基本类型无法通过 Proxy 实现响应式的问题，通过包装对象的方式统一了响应式数据的访问接口，同时保持与 reactive 的协同工作能力。
