为什么推荐使用ref而不是reactive

为什么推荐使用ref而不是reactive

  • 局限性问题: reactive本身存在一些局限性,可能会在开发过程中引发一些问题。这需要额外的注意力和处理,否则可能对开发造成麻烦。
  • 数据类型限制: reactive声明的数据类型仅限于对象,而ref则更加灵活,可以容纳任何数据类型。这使得ref更适合一般的响应式状态的声明。
  • 官方推荐: 官方文档强烈建议使用ref()作为声明响应式状态的首选。这是因为ref更简单、更直观,同时避免了reactive可能引发的一些问题。

使用方法上的对比

reactive的局限性

1. 只能声明引用数据类型(对象)ref() 可以声明任意类型

js 复制代码
let obj = reactive({  
  name: '小明',  
  age: 18  
})

// 对象  
const state = ref({})  
// 数组  
const state2 = ref([])

2. reactive 使用不当会失去响应

  • 赋值给 reactive 一个整个对象或 reactive 对象
js 复制代码
let state = reactive({ count: 0 })  
// 这个赋值将导致 state 失去响应  
state = { count: 1 }
// 并不会触发修改 DOM ,说明失去响应了  
state = reactive({ count: 11 });

解决方法

  1. 不要直接整个对象替换,一个个属性赋值
  2. 使用 Object.assign
  3. 使用 ref 定义对象
  4. 使用数组的 push 方法
js 复制代码
let state = reactive({ count: 0 })  
// state = { count: 1 }  ×
state.count = 1   
state = Object.assign(state, { count: 1 }) 

let state = ref({ count: 0 })  
state.value = { count: 1 } 
  • reactive 对象解构会失去响应,ref定义对象解构也会失去响应式
js 复制代码
let state = reactive({ count: 0 })  
// 普通解构,count 和 state.count 失去了响应性连接  
let { count } = state  
count++ // state.count 值依旧是 0

解决方案:

  1. 使用 toRefs 解构,解构后的属性是 ref 的响应式变量
  2. ref定义对象解构也需要toRefs
js 复制代码
const state = reactive({ count: 0 })  
// 使用 toRefs 解构,后的属性为 ref 的响应式变量  
let { count } = toRefs(state)  
count.value++ // state.count 值改变为 1
  • reactive 对象的属性赋值给变量(断开连接/深拷贝) ,对该变量的赋值不会影响原来对象的属性值。
js 复制代码
let state = reactive({ count: 0 })  
// 赋值给 n,n 和 state.count 不再共享响应性连接  
let n = state.count  
// 不影响原始的 state  
n++  
console.log(state.count) // 0
相关推荐
艾小逗39 分钟前
vue3中的effectScope有什么作用,如何使用?如何自动清理
前端·javascript·vue.js
小小小小宇3 小时前
手写 zustand
前端
Hamm4 小时前
用装饰器和ElementPlus,我们在NPM发布了这个好用的表格组件包
前端·vue.js·typescript
小小小小宇5 小时前
前端国际化看这一篇就够了
前端
大G哥5 小时前
PHP标签+注释+html混写+变量
android·开发语言·前端·html·php
whoarethenext5 小时前
html初识
前端·html
小小小小宇5 小时前
一个功能相对完善的前端 Emoji
前端
m0_627827525 小时前
vue中 vue.config.js反向代理
前端
Java&Develop5 小时前
onloyoffice历史版本功能实现,版本恢复功能,编辑器功能实现 springboot+vue2
前端·spring boot·编辑器
白泽talk5 小时前
2个小时1w字| React & Golang 全栈微服务实战
前端·后端·微服务