vue3,ref和reactive声明变量有什么区别,分别怎么用

vue/vue3,ref和reactive声明变量有什么区别,分别怎么用

适用的变量类型不同

  1. 对于原始类型,即非对象类型,只能用ref
  2. 对于对象类型,既可以用ref,也可以用reactive

在js中获取值的方式不同

  1. 在js中,获取ref声明的变量值,需要通过 .value 获取
  2. 获取react声明的变量值,直接获取即可

侦听深度不同

  1. 如果侦听ref声明的对象类型变量,当变量的属性发生变化时,不触发侦听,需要设置深度侦听{deep:true}
  2. 如果侦听reactive声明的变量,当变量的属性发生变化时,触发侦听,无需设置深度侦听

响应性区别

  1. ref声明的对象类型变量,可以通过 .value直接用新的对象赋值,改变变量的值,变量响应性存在
  2. 给reactive包裹的对象类型变量重新赋值,变量响应性消失,该方法不可取。
  3. reactive包裹的对象可以通过Vue.set()方法来重新赋值
  4. reactive包裹的对象给其属性赋值,是不会影响响应性的
相关推荐
陈随易3 小时前
前端大咖mizchi不满Rust、TypeScript却爱上MoonBit
前端·后端·程序员
whinc4 小时前
🚀 两年小程序开发,我把踩过的坑做成了开源 Skills
前端·微信小程序·ai编程
兆子龙5 小时前
ahooks useRequest 深度解析:一个 Hook 搞定所有请求
java·javascript
兆子龙5 小时前
React Suspense 从入门到实战:让异步加载更优雅
java·javascript
sure2825 小时前
React Native中创建自定义渐变色
前端·react native
KKKK6 小时前
SSE(Server-Sent Events)流式传输原理和XStream实践
前端·javascript
子兮曰6 小时前
Humanizer-zh 实战:把 AI 初稿改成“能发布”的技术文章
前端·javascript·后端
Din6 小时前
主动取消的防抖
前端·javascript·typescript
百度地图汽车版7 小时前
【AI地图 Tech说】第九期:让智能体拥有记忆——打造千人千面的小度想想
前端·后端