首页 > 其他分享 >Vue3——ref和reactive的比较

Vue3——ref和reactive的比较

时间:2024-06-12 15:02:01浏览次数:19  
标签:定义 响应 Vue3 value reactive 使用 ref

定义数据

ref 用来定义基础类型数据和对象类型数据
reactive 只能定义对象类型数据

使用方式

ref定义的响应式变量必须使用.value
reactive定义的响应式变量不能使用.value,直接使用响应式对象,但是重新分配一个新对象,会失去响应式,解决方式使用Object.assign(oldObject,newObject)

使用原则

若需要定义一个基本数据类型的响应式数据,必须使用ref
若需要定义一个对象类型的响应式数据,层级不深,ref、reactive均可
若需要定义一个对象类型的响应式数据,层级深,建议使用reactive

小提示:.value,可以通过Vue-Official插件自动生成。

标签:定义,响应,Vue3,value,reactive,使用,ref
From: https://www.cnblogs.com/me-me/p/18243922

相关文章

  • Vue3——ref定义响应式数据
    ref作用ref:定义响应式变量,既可定义基础类型数据,也可以定义对象类型。语法格式:lettemp=ref(初始值)返回值:temp是一个RefImpl的实例对象,简称ref对象,ref对象的value属性是响应式。注意点:JS/TS中使用变量temp操作数据时,需要temp.value,但是在模板中不需要temp.value,直接......
  • vue3 dom ref 实现,子组件ref实现,defineExpose暴露子组件作用域
    示例代码App.vue<template><header><imgalt="Vuelogo"class="logo"src="@/assets/logo.svg"width="125"height="125"/><divclass="wrapper"><HelloWorld......
  • 在Vue3中高级前端是这样给按钮添加loading效果的
    前言一个页面有多个按钮,每个按钮都要添加loading效果,高级前端是如何在Vue3控制按钮是否显示loading效果的呢?普通前端我们先来看看初级普通前端平常是怎么给按钮添加loading效果的:<scriptsetup>import{ref}from'vue'constasyncFn=()=>newPromise(resolve=>......
  • 浅谈 Java 引用:弱引用 WeakReference
    前言最近在测试micrometer的Gauge度量时,发现被观察的目标对象,在一开始时能被采集到指标,过了一段时间后(jvm发生了gc),被观察对象的指标采集不到了,经过跟踪发现,Gauge在构建被观察对象时,使用了Java的弱引用。测试场景回溯目标为了采集httpclient的连接管理器(连接池)的指标......
  • 已经解决: 未连接:有潜在的安全问题 Firefox 检测到潜在的安全威胁,并因 github.com 要求
    最近在访问github.com网站的时候,提示安全问题而不能访问,尝试添加例外网站地址后得以解决,分享给需要的朋友。访问github网站出现的问题解决未连接:有潜在的安全问题Firefox检测到潜在的安全威胁,并因github.com要求安全连接而没有继续。  把https://github.com添加到例......
  • Vue3——setup语法糖
    setup概述setup是Vue3中新的配置项,值是一个函数,组件中所用到的数据、方法、计算属性、监视等等,均配置在setup中。setup函数返回的对象中的内容,可直接在模版中使用。setup中不能使用this关键字,this是undefined。setup会在beforeCreate()函数之前调用,领先所有的钩子函数执行的......
  • 基于jeecgboot-vue3的Flowable流程--抄送我的功能
    因为这个项目license问题无法开源,更多技术支持与服务请加入我的知识星球。1、抄送我的界面代码如下:<template><divclass="p-2"><!--查询区域--><divclass="jeecg-basic-table-form-container"><a-formref="formRef"@keyup.enter.nati......
  • electron + vue3 自定义窗口:移动,缩放,置顶
    electronmain.jsconst{BrowserWindow,ipcMain}=require('electron');constpath=require("path")constCustomWindow=require('./CustomWindow')constwin=newBrowserWindow({frame:false,transparent:true,......
  • “refer to”和“refer to as”在英语中的用法有所不同
    “referto”和“refertoas”在英语中的用法有所不同,具体区别如下:Referto“Referto”意为“提到”、“参考”或“涉及”,它常常用于说明某人或某事物的指代或提及对象。用法示例如下:Asmentioned(提到):English:Sheoftenreferstoherchildhoodinherstories.Chi......
  • 实现抖音视频滑动功能vue3+swiper
    首先,你需要安装和引入Swiper库。可以使用npm或者yarn进行安装。pnpminstallswiper然后在Vue组件中引入Swiper库和样式。//导入Swiper组件和SwiperSlide组件,用于创建轮播图import{Swiper,SwiperSlide}from'swiper/vue';//导入Swiper的CSS样式,确保轮播图......