vue ref实现
Vue 中 ref 的实现
在 Vue 3 中，ref 是一个用于创建响应式数据的核心 API。它可以将基本类型或对象包装为一个响应式引用，通过 .value 访问或修改其值。
基本用法
import { ref } from 'vue';
const count = ref(0); // 创建一个响应式引用
console.log(count.value); // 访问值
count.value++; // 修改值实现原理
ref 的核心是通过 ReactiveEffect 和依赖收集实现响应式。以下是简化版的实现逻辑：
function ref(value) {
return {
get value() {
track(this, 'value'); // 收集依赖
return value;
},
set value(newVal) {
value = newVal;
trigger(this, 'value'); // 触发更新
}
};
}模板中使用
在模板中，ref 会自动解包，无需使用 .value：
<template>
<button @click="count++">{{ count }}</button>
</template>与 reactive 的区别
ref适用于基本类型或对象，通过.value访问。reactive仅适用于对象，直接访问属性。
实际应用场景
- 表单输入绑定：
const inputValue = ref(''); - 组件引用：
<child-component ref="childRef" />const childRef = ref(null);
注意事项
- 在组合式 API 中，
ref是响应式编程的基础工具。 - 在选项式 API 中，
this.$refs用于访问模板引用，与组合式 API 的ref不同。
