🧙♂️ 诸位好,吾乃诸葛妙计,编程界之翘楚,代码之大师。算法如流水,逻辑如棋局。
📜 吾之笔记,内含诸般技术之秘诀。吾欲以此笔记,传授编程之道,助汝解决技术难题。
📄 吾之文章,可使汝在编程之路上,少走弯路,更上层楼,攀技术之巅峰。
🚀 若此篇文章对阁下有所裨益, 敬请👍🏻-点赞 ⭐ - 收藏 👀 - 关注
在Vue 3中,ref
和reactive
是两种不同的响应式API,它们用于创建和管理响应式数据。尽管它们的目的相同,即使数据变化能够自动更新视图,但它们在使用方式和适用场景上有所不同。
ref
ref
用于为基本数据类型创建响应式引用。当你需要处理字符串、数字、布尔值等基本类型时,你会使用ref
。ref
返回一个包含value
属性的响应式对象,你需要通过.value
来访问或修改它的值。
import { ref } from 'vue';
const count = ref(0);
console.log(count.value); // 0
count.value++;
在模板中使用ref
时,Vue 会自动解包,所以你不需要使用.value
来访问值。
<template>
<div>{{ count }}</div>
</template>
reactive
reactive
用于创建复杂类型(如对象或数组)的响应式版本。当你想要使一个对象或数组成为响应式时,你会使用reactive
。
import { reactive } from 'vue';
const state = reactive({
count: 0,
items: ['apple', 'banana']
});
state.count++;
state.items.push('orange');
在模板中,你可以直接访问reactive
对象的属性,无需.value
。
<template>
<div>{{ state.count }}</div>
<div v-for="item in state.items" :key="item">{{ item }}</div>
</template>
主要区别
-
数据类型:
ref
通常用于基本数据类型,而reactive
用于对象和数组。 -
访问方式:
ref
返回的是一个包含value
属性的对象,你需要通过.value
来获取或设置值。reactive
返回的是一个响应式的对象,你可以直接访问或修改它的属性。 -
嵌套对象:如果你在
reactive
对象中嵌套了另一个对象,嵌套的对象也会自动变成响应式。而在ref
中嵌套对象不会自动变成响应式,除非你也对嵌套的对象使用reactive
或ref
。 -
模板解包:在模板中,Vue 会自动解包
ref
,而reactive
对象的属性可以直接访问。
选择使用ref
还是reactive
-
如果你处理的是基本数据类型,选择
ref
。 -
如果你处理的是对象或数组,并且希望它们的属性或元素也是响应式的,选择
reactive
。 -
如果你需要在响应式对象中包含基本数据类型,并且希望这些基本类型也是响应式的,可以在
reactive
对象中使用ref
。
总的来说,ref
和reactive
提供了灵活的方式来创建响应式数据,你可以根据具体的使用场景选择最合适的API。
若阁下觉此文有益,恳请施以👍🏻-点赞 ⭐ - 收藏 👀 - 关注之礼,以资鼓励。倘若有疑问或建言,亦请在评论区💬评论 赐教,吾将感激不尽。