为什么推荐使用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
相关推荐
z_mazin30 分钟前
Chrome开发者工具实战:调试三剑客
前端·javascript·chrome·网络爬虫
sen_shan2 小时前
Vue3+Vite+TypeScript+Element Plus开发-04.静态菜单设计
前端·javascript·typescript·vue3·element·element plus·vue 动态菜单
旧识君2 小时前
移动端1px终极解决方案:Sass混合宏工程化实践
开发语言·前端·javascript·前端框架·less·sass·scss
吃没吃3 小时前
vue2.6-源码学习-Vue 核心入口文件分析
前端
Carlos_sam3 小时前
Openlayers:海量图形渲染之图片渲染
前端·javascript
XH2763 小时前
Android Retrofit用法详解
前端
鸭梨大大大3 小时前
Spring Web MVC入门
前端·spring·mvc
吃没吃3 小时前
vue2.6-源码学习-Vue 初始化流程分析 (src/core/instance/init.js)
前端
XH2763 小时前
Android Room用法详解
前端
木木黄木木3 小时前
css炫酷的3D水波纹文字效果实现详解
前端·css·3d