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 分钟前
深入理解 Vue keep-alive:缓存本质、触发条件与生命周期对比
前端·javascript·vue.js
|晴 天|4 分钟前
WebAssembly:为前端插上性能的翅膀
前端·wasm
孟祥_成都6 分钟前
你可能不知道 react 组件中受控和非受控的秘密!
前端
火车叼位6 分钟前
ast-grep:结构化搜索与重构利器
前端
over69710 分钟前
深入理解 JavaScript 原型链与继承机制:从 instanceof 到多种继承模式
前端·javascript·面试
烂不烂问厨房14 分钟前
前端实现docx与pdf预览
前端·javascript·pdf
GDAL17 分钟前
Vue3 Computed 深入讲解(聚焦 Vue3 特性)
前端·javascript·vue.js
Moment20 分钟前
半年时间使用 Tiptap 开发一个和飞书差不多效果的协同文档 😍😍😍
前端·javascript·后端
前端加油站23 分钟前
记一个前端导出excel受限问题
前端·javascript
da_vinci_x28 分钟前
PS 生成式扩展:从 iPad 到带鱼屏,游戏立绘“全终端”适配流
前端·人工智能·游戏·ui·aigc·技术美术·游戏美术