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'
相关推荐
腾讯TNTWeb前端团队6 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰10 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪10 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪10 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy11 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom11 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom11 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom12 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom12 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom12 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试