Vue 3 中的响应式系统:ref 与 reactive 的对比与应用

Vue 3 的响应式系统是其核心特性之一,它允许开发者以声明式的方式构建用户界面。Vue 3 引入了两种主要的响应式 API:refreactive。本文将详细介绍这两种 API 的用法、区别以及在修改对象属性和修改整个对象时的不同表现,并提供完整的代码示例。

1. ref 和 reactive 的定义

1.1 ref

ref 用于定义基本类型数据和对象类型数据。使用 ref 创建的变量必须通过 .value 属性访问和修改其值。

javascript 复制代码
import { ref } from 'vue';

const count = ref(0); // 基本类型数据
const user = ref({ name: 'Alice', age: 20 }); // 对象类型数据

console.log(count.value); // 0
console.log(user.value.name); // Alice

1.2 reactive

reactive 用于定义对象类型数据。它返回一个响应式对象,可以直接访问和修改其属性,而不需要通过 .value

javascript 复制代码
import { reactive } from 'vue';

const user = reactive({ name: 'Alice', age: 20 });

console.log(user.name); // Alice

2. ref 和 reactive 的区别

2.1 创建变量的方式

  • ref 创建的变量必须使用 .value 访问。
  • reactive 创建的对象可以直接访问其属性。

2.2 重新分配对象

  • reactive 重新分配一个新对象会失去响应式(可以使用 Object.assign 去整体替换)。
  • ref 可以通过 .value 重新分配整个对象,且保持响应式。

3. 使用原则

3.1 基本类型数据

若需要一个基本类型的响应式数据,必须使用 ref

javascript 复制代码
const count = ref(0);

3.2 对象类型数据

  • 若需要一个响应式对象,层级不深,refreactive 都可以。
  • 若需要一个响应式对象,且层级较深,推荐使用 reactive
javascript 复制代码
const user = reactive({
  name: 'Alice',
  age: 20,
  address: {
    city: 'New York',
    zip: '10001'
  }
});

4. 修改对象属性和修改整个对象的区别

4.1 修改对象属性

当使用 reactive 创建响应式对象时,直接修改其属性会触发视图更新。

javascript 复制代码
import { reactive } from 'vue';

const student = reactive({
  name: 'Alice',
  age: 20
});

student.name = 'Bob'; // 触发视图更新
student.age = 21;    // 触发视图更新

4.2 修改整个对象

当使用 reactive 创建响应式对象时,重新分配一个新对象会失去响应式,需要使用 Object.assign 去整体替换。

javascript 复制代码
import { reactive } from 'vue';

const student = reactive({
  name: 'Alice',
  age: 20
});

// 错误的做法,会失去响应式
student = { name: 'Bob', age: 21 };

// 正确的做法
Object.assign(student, { name: 'Bob', age: 21 }); // 触发视图更新

4.3 使用 ref 修改对象和属性

当使用 ref 创建响应式对象时,需要通过 .value 访问和修改其属性。

javascript 复制代码
import { ref } from 'vue';

const studentRef = ref({
  name: 'Alice',
  age: 20
});

// 修改属性
studentRef.value.name = 'Bob'; // 触发视图更新
studentRef.value.age = 21;    // 触发视图更新

// 修改整个对象
studentRef.value = { name: 'Charlie', age: 22 }; // 触发视图更新

5. 完整代码示例

以下是一个简单的 Vue 3 应用示例,展示了如何使用 refreactive 创建响应式数据,并演示了修改对象属性和修改整个对象的区别。

html 复制代码
<template>
  <div>
    <p>Student (ref): {{ studentRef.value.name }}, {{ studentRef.value.age }}</p>
    <button @click="updateStudentRef">Update Student (ref)</button>
    <p>Student (reactive): {{ studentReactive.name }}, {{ studentReactive.age }}</p>
    <button @click="updateStudentReactive">Update Student (reactive)</button>
  </div>
</template>

<script>
import { ref, reactive } from 'vue';

export default {
  setup() {
    // 使用 ref 创建响应式数据
    const studentRef = ref({
      name: 'Alice',
      age: 20
    });
    const updateStudentRef = () => {
      studentRef.value.name = 'Bob';
      studentRef.value.age = 21;
    };

    // 使用 reactive 创建响应式数据
    const studentReactive = reactive({
      name: 'Alice',
      age: 20
    });
    const updateStudentReactive = () => {
      studentReactive.name = 'Bob';
      studentReactive.age = 21;
    };

    return {
      studentRef,
      updateStudentRef,
      studentReactive,
      updateStudentReactive
    };
  }
};
</script>

6. 总结

Vue 3 的 refreactive 提供了灵活的响应式数据管理方式。ref 适合基本类型数据和需要显式访问 .value 的场景,而 reactive 适合对象类型数据,特别是层级较深的对象。理解它们的区别和使用场景,可以帮助开发者更有效地构建响应式应用。

通过本文的介绍和示例代码,希望你能更好地理解 Vue 3 中的响应式系统,并在实际项目中灵活运用 refreactive

相关推荐
中微子2 分钟前
React状态管理最佳实践
前端
烛阴12 分钟前
void 0 的奥秘:解锁 JavaScript 中 undefined 的正确打开方式
前端·javascript
中微子19 分钟前
JavaScript 事件与 React 合成事件完全指南:从入门到精通
前端
Hexene...27 分钟前
【前端Vue】如何实现echarts图表根据父元素宽度自适应大小
前端·vue.js·echarts
初遇你时动了情29 分钟前
腾讯地图 vue3 使用 封装 地图组件
javascript·vue.js·腾讯地图
dssxyz33 分钟前
uniapp打包微信小程序主包过大问题_uniapp 微信小程序时主包太大和vendor.js过大
javascript·微信小程序·uni-app
华子w90892585943 分钟前
基于 SpringBoot+VueJS 的农产品研究报告管理系统设计与实现
vue.js·spring boot·后端
天天扭码1 小时前
《很全面的前端面试题》——HTML篇
前端·面试·html
xw51 小时前
我犯了错,我于是为我的uni-app项目引入环境标志
前端·uni-app
!win !1 小时前
被老板怼后,我为uni-app项目引入环境标志
前端·小程序·uni-app