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包裹的对象给其属性赋值,是不会影响响应性的
相关推荐
m0_74825238几秒前
Angular 2 数据显示方法
前端·javascript·angular.js
2501_944711435 分钟前
现代 React 路由实践指南
前端·react.js·前端框架
by————组态13 分钟前
睿控(Ricon)组态
运维·前端·物联网·信息可视化·组态·组态软件
蓁蓁啊14 分钟前
GCC 头文件搜索路径:-I vs -idirafter 深度解析
java·前端·javascript·嵌入式硬件·物联网
依赖_赖15 分钟前
前端实现token无感刷新
前端·javascript·vue.js
RubyZhang21 分钟前
小程序Canvas动态海报生成方案及性能优化报告
前端
zhelingwang35 分钟前
设计模式笔记
前端
Focus_38 分钟前
如何借助AI在UE5中将图片批量生成3D模型
前端·aigc·游戏开发
m0_7482523842 分钟前
JavaScript 基本语法
开发语言·javascript·ecmascript
hhcccchh1 小时前
学习vue第十三天 Vue3组件深入指南:组件的艺术与科学
javascript·vue.js·学习