vue的ref实现
Vue 的 ref 实现原理
Vue 中的 ref 是一个用于创建响应式引用的函数，可以用于基本类型或对象类型的数据。其核心原理基于 Vue 的响应式系统，通过 Proxy 或 Object.defineProperty 实现数据劫持。
基本实现方式
ref 函数会将传入的值包装为一个带有 value 属性的对象。当访问或修改 value 时，会触发依赖收集和派发更新。
function ref(value) {
return {
get value() {
track(this, 'value'); // 依赖收集
return value;
},
set value(newValue) {
if (newValue !== value) {
value = newValue;
trigger(this, 'value'); // 派发更新
}
}
};
}响应式处理
对于对象类型的值，Vue 会递归调用 reactive 进行深层响应式处理：
function ref(value) {
if (isObject(value)) {
value = reactive(value);
}
return {
__v_isRef: true,
get value() {
track(this, 'value');
return value;
},
set value(newValue) {
if (newValue !== value) {
value = isObject(newValue) ? reactive(newValue) : newValue;
trigger(this, 'value');
}
}
};
}模板中的解包
在模板中使用 ref 时，Vue 会自动解包，无需通过 .value 访问：
<template>
<div>{{ count }}</div> <!-- 自动解包 -->
</template>
<script setup>
const count = ref(0);
</script>ref 与 reactive 的区别
ref 适用于基本类型和对象类型，需要通过 .value 访问；reactive 仅适用于对象类型，可直接访问属性。
const num = ref(0); // 需要 num.value
const obj = reactive({ count: 0 }); // 直接 obj.count实现注意事项
ref对象具有__v_isRef标识属性，用于判断是否为 ref- 嵌套对象会被自动转换为
reactive对象 - 在模板和
reactive对象中会自动解包 - 通过
track和trigger实现依赖收集和更新派发
性能优化
对于频繁访问的 ref 值，Vue 会进行缓存优化，避免重复触发 getter 函数。同时，批量更新机制可以合并多个 ref 变更，减少不必要的渲染。
