Vue 3中ref和reactive的区别

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

摘要：

本文将详细介绍Vue 3中ref和reactive的区别，探讨它们的使用场景和优缺点。

引言：

在Vue 3中，响应式系统是其核心特性之一。Vue 3提供了两种方法来实现响应式数据：ref和reactive。本文将对比分析这两种方法，帮助大家更好地理解它们的特点和适用场景。

正文：

1️⃣ ref

• 定义：ref用于创建一个响应式的数据对象。它通常用于创建基本数据类型的响应式数据。
• 使用方法：通过调用ref函数并传入一个初始值来创建一个响应式数据对象。在模板中访问时，ref对象会自动解构，无需通过.value属性访问。
• 特点：ref对象在模板中自动解构，方便使用；同时，ref也可以用于创建复杂对象的响应式数据。

以下是一些简单的 ref 代码案例：

1. 创建一个 ref：

const count = ref(0);

2. 通过 ref 访问 DOM 元素：

const input = ref(null);
console.log(input.value); // 输出：null

3. 在模板中使用 ref：

<template><div><input ref="input" v-model="count" /><button @click="handleClick">Click me</button></div>
</template><script>
export default {setup() {const count = ref(0);function handleClick() {console.log(count.value); // 输出：1}return {count,handleClick,};},
};
</script>

4. 在生命周期钩子中使用 ref：

import { ref, onMounted } from 'vue';export default {setup() {const count = ref(0);function handleClick() {count.value++;}onMounted(() => {console.log(count.value); // 输出：0});return {count,handleClick,};},
};

这些案例展示了 ref 在 Vue.js 中的基本用法。ref 是 Vue.js 3.x 中一个新的响应式系统，它允许我们更灵活地操作 DOM 和管理状态。

2️⃣ reactive

• 定义：reactive用于创建一个响应式的对象。它通常用于创建复杂对象的响应式数据。
• 使用方法：通过调用reactive函数并传入一个对象来创建一个响应式数据对象。在模板中访问时，需要通过对象属性访问。
• 特点：reactive适用于创建复杂对象的响应式数据；同时，reactive对象在模板中不会自动解构，需要通过对象属性访问。

以下是一些简单的 reactive 代码案例：

1. 创建一个 reactive 对象：

const state = reactive({count: 0,message: 'Hello, Vue!'
});

2. 修改 reactive 对象：

state.count++; // 自动触发视图更新
state.message = 'Hello, reactive!'; // 自动触发视图更新

3. 在模板中使用 reactive 对象：

<template><div><p>Count: {{ state.count }}</p><p>Message: {{ state.message }}</p><button @click="handleClick">Click me</button></div>
</template><script>
export default {setup() {const state = reactive({count: 0,message: 'Hello, Vue!'});function handleClick() {state.count++;state.message = 'Hello, reactive!';}return {state,handleClick};},
};
</script>

4. 在生命周期钩子中使用 reactive 对象：

import { reactive, onMounted } from 'vue';export default {setup() {const state = reactive({count: 0,message: 'Hello, Vue!'});function handleClick() {state.count++;state.message = 'Hello, reactive!';}onMounted(() => {console.log(state.count); // 输出：0console.log(state.message); // 输出：Hello, Vue!});return {state,handleClick};},
};

这些案例展示了 reactive 在 Vue.js 中的基本用法。reactive 是 Vue.js 3.x 中一个新的响应式系统，它允许我们更灵活地操作 DOM 和管理状态。

3️⃣ ref与reactive对比

• 使用场景：ref适用于创建基本数据类型和复杂对象的响应式数据；reactive适用于创建复杂对象的响应式数据。
• 自动解构：ref在模板中自动解构，方便使用；reactive不会自动解构，需要通过对象属性访问。
• 适用性：ref可以用于创建基本数据类型和复杂对象的响应式数据，更加灵活；reactive适用于创建复杂对象的响应式数据，更加专注。

以下是 ref 和 reactive 的对比表格：

特性	ref	reactive
定义	用于创建一个响应式的数据对象，通常用于基本数据类型	用于创建一个响应式的对象，通常用于复杂对象
使用方法	调用ref函数并传入初始值	调用reactive函数并传入对象
模板访问	自动解构，无需.value	不自动解构，需通过对象属性访问
适用场景	基本数据类型和复杂对象	复杂对象
自动解构	在模板中自动解构	不自动解构
适用性	灵活，可用于多种数据类型	专注，适用于复杂对象
用途	创建基本数据类型的响应式数据，或作为复杂对象属性的响应式代理	创建整个复杂对象的响应式数据

从表格中可以看出，ref 和 reactive 都有各自的优缺点。在实际项目中，可以根据具体需求和团队技术栈选择合适的方案。

总结：

ref和reactive是Vue 3中实现响应式数据的两种方法，各有优缺点。了解它们的区别，有助于我们在实际项目中根据需求选择合适的方法。

参考资料：

• Vue Team. The Introduction to Vue 3[EB/OL]. https://v3.vuejs.org/guide/reactivity.html#ref-and-reactive.