基本用法
-
引入
ref首先，你需要从
vue包中引入ref函数：import { ref } from 'vue'; -
创建一个响应式变量
使用
ref函数来创建一个响应式变量：const count = ref(0);这里，
count是一个响应式引用对象，其.value属性初始值为0。 -
在模板中使用
在 Vue 模板中，你可以直接访问响应式引用对象的值，而不需要使用
.value：<template><div>{{ count }}</div> </template> -
在 JavaScript 中使用
在 JavaScript 代码中，你需要通过
.value来访问或修改响应式变量的值：count.value = 1; console.log(count.value); // 输出: 1
在组合式 API 中使用
ref 通常与 Vue 的组合式 API 一起使用，特别是在 setup 函数中：
import { ref } from 'vue';export default {setup() {const count = ref(0);function increment() {count.value++;}return {count,increment};}
};
在模板中：
<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：
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()。
