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'
相关推荐
孤水寒月1 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀2 小时前
html初学者第一天
前端·html
脑袋大大的3 小时前
JavaScript 性能优化实战:减少 DOM 操作引发的重排与重绘
开发语言·javascript·性能优化
速易达网络4 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
耶啵奶膘4 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
JoJo_Way4 小时前
LeetCode三数之和-js题解
javascript·算法·leetcode
视频砖家5 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
lyj1689975 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
小白变怪兽6 小时前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头6 小时前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github