基本用法
-
引入
ref
首先,你需要从
vue
包中引入ref
函数:javascriptimport { ref } from 'vue';
-
创建一个响应式变量
使用
ref
函数来创建一个响应式变量:javascriptconst count = ref(0);
这里,
count
是一个响应式引用对象,其.value
属性初始值为0
。 -
在模板中使用
在 Vue 模板中,你可以直接访问响应式引用对象的值,而不需要使用
.value
:html<template> <div>{{ count }}</div> </template>
-
在 JavaScript 中使用
在 JavaScript 代码中,你需要通过
.value
来访问或修改响应式变量的值:javascriptcount.value = 1; console.log(count.value); // 输出: 1
在组合式 API 中使用
ref
通常与 Vue 的组合式 API 一起使用,特别是在 setup
函数中:
javascript
import { ref } from 'vue';
export default {
setup() {
const count = ref(0);
function increment() {
count.value++;
}
return {
count,
increment
};
}
};
在模板中:
html
<template>
<div>
<p>{{ count }}</p>
<button @click="increment">Increment</button>
</div>
</template>
ref
与原始类型
ref
可以用于基本数据类型(如数字、字符串、布尔值)以及对象和数组。对于对象和数组,ref
会使其变得"响应式",即对象的属性或数组的元素发生变化时,Vue 也能检测到并更新视图。
ref
与 reactive
ref
和 reactive
都是 Vue 3 中的响应式 API,但它们有不同的使用场景:
ref
用于基本数据类型和保存单一对象的引用。reactive
用于创建响应式的对象或数组。
简单来说,如果你有一个基本数据类型或者想要一个明确的引用,使用 ref
;如果你有一个对象或数组,并且想要使其内部属性和元素也响应式,使用 reactive
。
toRef
和 toRefs
有时候你可能需要将一个响应式对象中的某个属性转换为 ref
,这时候可以使用 toRef
或 toRefs
:
javascript
import { reactive, toRef, toRefs } from 'vue';
const state = reactive({
count: 0,
name: 'Vue'
});
const countRef = toRef(state, 'count');
const { name } = toRefs(state);
总结
ref()
是 Vue 3 中非常强大的一个工具,它使得创建和管理响应式数据变得更加简单和直观。通过合理使用 ref
,你可以更好地组织你的代码,使其更加模块化和可维护。希望这篇深入教程能帮助你更好地理解和使用 ref()
。