vue3 ref与reactive的区别

ref

  • 用途 : ref 主要用于创建对基本类型(如字符串、数字、布尔值等)的响应式引用,同时也可以用于包装对象,使其变得响应式。

  • 类型 : ref 返回一个包含单一值的响应式对象,这个对象有一个 .value 属性来存储实际值。

  • 适用场景 : 当你需要处理简单的基本类型或希望明确表示某个值是一个响应式引用时,使用 ref

javascript 复制代码
import { ref } from 'vue';
// 创建一个响应式基本类型
const count = ref(0);
// 修改值
count.value++;
// 包装对象
const state = ref({ foo: 'bar' });
// 修改对象属性
state.value.foo = 'baz';
​
console.log(count.value); // 输出: 1
console.log(state.value); // 输出: { foo: 'baz' }

reactive

  • 用途 : reactive 用于创建响应式对象,包括嵌套的对象和数组。

  • 类型 : reactive 返回一个响应式代理对象,你可以像普通对象一样直接操作它。

  • 适用场景 : 当你需要处理复杂的对象结构,包括嵌套对象和数组时,使用 reactive

javascript 复制代码
import { reactive } from 'vue';
​
// 创建一个响应式对象
const state = reactive({
  count: 0,
  nested: {
    foo: 'bar'
  }
});
​
// 修改对象属性
state.count++;
state.nested.foo = 'baz';
​
console.log(state.count); // 输出: 1
console.log(state.nested.foo); // 输出: 'baz'

主要区别

  1. 数据类型:

    • ref 适用于基本类型和希望显式管理的响应式引用。

    • reactive 适用于复杂对象和嵌套结构。

  2. 访问方式:

    • ref 的值通过 .value 属性访问。

    • reactive 的属性直接作为对象属性访问。

  3. 内部实现:

    • ref 是通过包装一个对象来实现响应式行为的,基本类型会被封装在一个对象中。

    • reactive 是通过 Proxy 代理整个对象来实现响应式的。

使用建议

  • 对于简单的基本类型值,或者你需要一个单一响应式引用时,使用 ref

  • 对于复杂的对象,尤其是包含嵌套对象或数组的情况,使用 reactive 更加自然和方便。

组合使用

在实际开发中,有时候需要将 refreactive 结合使用。例如,你可能有一个复杂的对象,但其中某些特定的属性需要单独处理为响应式引用:

javascript 复制代码
import { ref, reactive } from 'vue';
​
const state = reactive({
  count: ref(0),
  nested: {
    foo: 'bar'
  }
});
// 修改 count
state.count.value++;
// 修改 nested 对象
state.nested.foo = 'baz';
console.log(state.count.value); // 输出: 1
console.log(state.nested.foo); // 输出: 'baz'
相关推荐
excel2 小时前
ES6 中函数的双重调用方式:fn() 与 fn\...``
前端
可乐爱宅着3 小时前
全栈框架next.js入手指南
前端·next.js
你的人类朋友4 小时前
什么是API签名?
前端·后端·安全
会豪6 小时前
Electron-Vite (一)快速构建桌面应用
前端
中微子6 小时前
React 执行阶段与渲染机制详解(基于 React 18+ 官方文档)
前端
唐某人丶6 小时前
教你如何用 JS 实现 Agent 系统(2)—— 开发 ReAct 版本的“深度搜索”
前端·人工智能·aigc
中微子6 小时前
深入剖析 useState产生的 setState的完整执行流程
前端
遂心_7 小时前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
Gracemark7 小时前
高德地图-地图选择经纬度问题【使用输入提示-使用Autocomplete进行联想输入】(复盘)
vue.js
小徐_23337 小时前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts