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'
相关推荐
烛阴9 分钟前
Promise无法中断?教你三招优雅实现异步任务取消
前端·javascript
GUIQU.16 分钟前
【Vue】单元测试(Jest/Vue Test Utils)
前端·vue.js
暮乘白帝过重山32 分钟前
Ollama 在本地分析文件夹中的文件
前端·chrome·ollama
一只小风华~1 小时前
Web前端开发:CSS Float(浮动)与 Positioning(定位)
前端·css·html·html5·web
前端张三1 小时前
vue3中ref在js中为什么需要.value才能获取/修改值?
前端·javascript·vue.js
moyu841 小时前
前端从后端获取数据的流程与指南
前端
爱的叹息1 小时前
解决 Dart Sass 的旧 JS API 弃用警告 的详细步骤和解决方案
javascript·rust·sass
涛哥码咖1 小时前
Rule.resourceQuery(通过路径参数指定loader匹配规则)
前端·webpack
夕水2 小时前
这个提升效率宝藏级工具一定要收藏使用
前端·javascript·trae
会飞的鱼先生2 小时前
vue3 内置组件KeepAlive的使用
前端·javascript·vue.js