vue ref实现
Vue 中 ref 的实现
在 Vue 中，ref 是一个用于创建响应式引用的 API。它可以用于基本类型、对象或组件实例，并确保其值是响应式的。
基本用法
import { ref } from 'vue'
const count = ref(0)
console.log(count.value) // 0
count.value++
console.log(count.value) // 1实现原理
ref 的核心是通过一个对象包装原始值，利用 Vue 的响应式系统跟踪变化。当访问或修改 .value 时，会触发依赖收集和更新。
function ref(value) {
return {
get value() {
track(this, 'value') // 依赖收集
return value
},
set value(newVal) {
value = newVal
trigger(this, 'value') // 触发更新
}
}
}在模板中使用
在模板中，ref 会自动解包，无需使用 .value：
<template>
<div>{{ count }}</div>
<button @click="count++">Increment</button>
</template>
<script setup>
const count = ref(0)
</script>与 reactive 的区别
ref 适用于基本类型或需要直接替换整个对象的情况，而 reactive 适用于对象或数组。ref 通过 .value 访问，reactive 直接访问属性。
const objRef = ref({ foo: 1 })
const objReactive = reactive({ foo: 1 })
objRef.value.foo = 2
objReactive.foo = 2在组件上使用
ref 可以用于获取组件实例：
<template>
<ChildComponent ref="child" />
</template>
<script setup>
import { ref } from 'vue'
const child = ref(null)
onMounted(() => {
console.log(child.value) // 组件实例
})
</script>类型定义 (TypeScript)
在 TypeScript 中，ref 可以明确指定类型：
const count = ref<number>(0)
const user = ref<{ name: string }>({ name: 'Alice' })注意事项
- 在组合式 API 中始终通过
.value访问ref的值 - 在模板中会自动解包，无需
.value - 避免在
reactive对象中直接替换整个ref，应替换.value
