vue ref实现
Vue 中 ref 的实现
ref 是 Vue 3 中用于创建响应式数据的基础 API，它可以包装基本类型或对象，使其成为响应式引用。以下是 ref 的实现原理和使用方法。
基本用法
ref 接受一个内部值并返回一个响应式且可变的 ref 对象，该对象具有 .value 属性用于访问或修改内部值。
import { ref } from 'vue';
const count = ref(0);
console.log(count.value); // 0
count.value++; // 修改值实现原理
ref 的核心是通过 reactive 包装一个对象，并将值存储在 value 属性中。以下是简化的实现逻辑：
function ref(value) {
return {
get value() {
// 依赖收集
track(this, 'value');
return value;
},
set value(newValue) {
value = newValue;
// 触发更新
trigger(this, 'value');
}
};
}与 reactive 的区别
ref可以包装基本类型（如number、string），而reactive只能处理对象。ref通过.value访问值，reactive直接访问属性。ref在模板中会自动解包（无需.value），但在脚本中需要显式使用.value。
模板中的自动解包
在模板中，ref 的值会自动解包，无需使用 .value：
<template>
<div>{{ count }}</div>
</template>
<script setup>
import { ref } from 'vue';
const count = ref(0);
</script>响应式原理
ref 的响应式依赖于 Vue 的依赖收集和触发机制：
- 读取
.value时，触发getter并收集依赖。 - 修改
.value时，触发setter并通知依赖更新。
使用场景
- 包装基本类型数据（如数字、字符串）。
- 需要明确区分响应式对象和普通对象时。
- 需要将值传递给函数或组件时（保持响应性）。
注意事项
- 在脚本中操作
ref时必须使用.value。 - 避免在
reactive中嵌套ref时重复解包（Vue 会自动处理）。 - 对于对象或数组，优先考虑使用
reactive，除非需要替换整个引用。
