Vue Ref 对象是什么
在 Vue 3 中,Ref 是一种特殊的对象,用于创建响应式数据。当你创建一个 Ref 对象时,你可以使用它的 .value
属性获取或设置其值。当你改变了 Ref 的 .value
,Vue 将会自动检测到这个改变,并更新所有依赖这个 Ref 的地方。
以下是 Ref 的基本用法:
import { ref } from 'vue'
export default {
setup() {
const count = ref(0) // 创建一个 Ref 对象,初始值为 0
function increment() {
count.value++ // 改变 Ref 的值
}
return {
count,
increment
}
}
}
在这个例子中,我们首先调用 ref(0)
创建了一个 count
Ref 对象,然后定义了一个 increment
函数,用于增加 count.value
。
在你的模板中,你可以直接访问 count
来获取其当前值:
<template>
<div>{{ count }}</div>
<button @click="increment">Increment</button>
</template>
当你点击按钮时,increment
函数将被调用,count.value
将会增加,同时页面上显示的 count
值也会被更新。