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'
相关推荐
浩龙不eMo几秒前
✅ Lodash 常用函数精选(按用途分类)
前端·javascript
小old弟2 分钟前
momentjs 两个时间比较大小
前端
爱分享的程序员9 分钟前
前端面试专栏-算法篇:17. 排序算法
前端·javascript·node.js
lichenyang45310 分钟前
react案例动态表单(受控组件)
前端
Jackson_Mseven10 分钟前
面试官:useEffect 为什么总背刺?我:闭包、ref 和依赖数组的三角恋
前端·react.js·面试
哎呦你好27 分钟前
【CSS】Grid 布局基础知识及实例展示
开发语言·前端·css·css3
盛夏绽放36 分钟前
接口验证机制在Token认证中的关键作用与优化实践
前端·node.js·有问必答
zhangxingchao1 小时前
Jetpack Compose 之 Modifier(中)
前端
JarvanMo1 小时前
理解 Flutter 中 GoRouter 的context.push与context.go
前端
pe7er1 小时前
使用 Vue 官方脚手架创建项目时遇到 Node 18 报错问题的排查与解决
前端·javascript·vue.js