vue3中ref与reactive具体应该怎么使用,reactive有哪些局限性

在 Vue3 中,refreactive 是 Vue3 Composition API 中两种创建响应式数据的核心工具,它们分别用于不同类型的响应式数据处理:

ref 的使用

ref 主要用于创建响应式的基本类型数据(如字符串、数字、布尔值等)或引用类型数据(如对象或数组)。当你使用 ref 时,数据会被包裹在一个带有 .value 属性的特殊对象中,访问和修改数据需要通过 .value

csharp 复制代码
import { ref } from 'vue';

// 创建一个响应式的字符串
const count = ref(0); 
console.log(count.value); // 输出初始值 0

count.value++; // 更新值

reactive 的使用

reactive 则用于创建响应式的对象或数组,它会返回一个代理对象,可以直接对其属性进行读写,无需 .value 后缀。

php 复制代码
import { reactive } from 'vue';

// 创建一个响应式的对象
const user = reactive({
  name: 'John Doe',
  age: 30,
  address: {
    street: '123 Main St',
    city: 'Anytown'
  }
});

// 直接修改对象属性
user.name = 'Jane Doe';
user.address.city = 'Othertown';

reactive 的局限性

深层变更检测reactive 会对传入的对象进行深度响应式代理,这意味着其内部的嵌套对象和数组也是响应式的。然而,如果在没有Vue系统追踪的情况下,直接替换掉 reactive 对象内部某个深层次的引用,会导致新引用的数据无法自动变为响应式。例如:

ini 复制代码
 const user = reactive({ job: { title: 'Developer' } });
 user.job = { title: 'Manager' }; // 新的job对象未经过reactive处理,内部变动不会触发视图更新

要解决这个问题,应当使用 reactiveref 重新设置整个路径:

ini 复制代码
user.job = reactive({ title: 'Manager' }); // 正确做法
  1. 非对象/数组类型reactive 不适用于基本数据类型,它只能用于对象和数组。试图将非对象或非数组类型传递给 reactive 函数将导致原始数据不受响应式系统管理。

  2. Proxy限制:Vue3 的响应式系统基于 ES6 的 Proxy,而 Proxy 有一些限制,比如不能代理不可配置的属性(configurable: false)、不能代理 Symbol 类型的属性、不能代理原型链上的属性等。

共同点与差异

  • 共同点 :两者都能创建响应式数据,且在 Vue 的模板中都可以正常工作,模板会自动解包 ref.value
  • 差异
    • ref 更适合用于基本类型或单一独立的引用类型变量,它返回的是一个带有 .value 的 ref 对象。
    • reactive 用于创建包含多个属性的对象或数组结构,它返回的是一个完整的代理对象,可以直接访问和修改其属性。

在组合式API中,为了在模板或其他地方能够像普通对象一样访问 ref 的值,可以使用 toRefs 函数将 ref 对象转化为普通的响应式对象属性。

相关推荐
行云&流水39 分钟前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
三水气象台1 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
盛夏绽放2 小时前
Vue3 中 Excel 导出的性能优化与实战指南
vue.js·excel
markyankee1016 小时前
Vue 响应式系统全面解析:从基础到高级实践
vue.js
翻滚吧键盘8 小时前
{{ }}和v-on:click
前端·vue.js
上单带刀不带妹8 小时前
手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程
开发语言·前端·javascript·vue.js·前端框架
Q_970956399 小时前
java+vue+SpringBoo校园失物招领网站(程序+数据库+报告+部署教程+答辩指导)
java·数据库·vue.js
翻滚吧键盘9 小时前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js
叹一曲当时只道是寻常10 小时前
vue中添加原生右键菜单
javascript·vue.js
markyankee10112 小时前
Vue.js 入门指南:从零开始构建你的第一个应用
vue.js