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包裹的对象给其属性赋值,是不会影响响应性的
相关推荐
中微子几秒前
JavaScript事件循环机制:面试官最爱问的10个问题详解
前端
Eighteen Z9 分钟前
CSS揭秘:10.平行四边形
前端·css·css3
拾光拾趣录16 分钟前
虚拟DOM
前端·vue.js·dom
爱学习的茄子16 分钟前
JavaScript事件循环深度解析:理解异步执行的本质
前端·javascript·面试
1024小神18 分钟前
cocos游戏开发中多角色碰撞,物理反弹后改变方向的实现逻辑
前端·javascript
ruanhongbiao19 分钟前
饿了么el-upload上传组件报错:TypeError: ***.upload.addEventListener is not a function
javascript·elementui
_一两风20 分钟前
JS执行机制-event loop
javascript
止观止20 分钟前
JavaScript对象创建9大核心技术解析
开发语言·javascript·ecmascript
摆烂为不摆烂21 分钟前
😁深入JS(五): 一文让你完全理解 hash 与 history 路由,手写前端路由
前端
1024小神22 分钟前
cocos游戏开发中,如何制作一个空气墙
前端·javascript