首页 > 其他分享 >【vue3】reactive不能直接赋值的解决方法

【vue3】reactive不能直接赋值的解决方法

时间:2022-09-23 16:24:07浏览次数:60  
标签:arr const reactive vue3 ref 赋值

在vue3里,ref和reacitve都可以定义响应式数据,但是两者有所不同。在使用reactive定义复杂结构的响应式数据时,如果你要对其赋值,会丢失其响应性。然后赋值是我们经常进行的操作,那么该怎么解决呢?

 

方法
1. 改为ref定义
const arr= ref([])
arr.value = [1, 2, 3]
1
2
2. push新增数据
const arr = reactive([])
arr.push(...[1, 2, 3])
1
2
3.再封装一层数据(推荐!)
const state = reactive({
arr: []
});

state.arr = [1, 2, 3]

标签:arr,const,reactive,vue3,ref,赋值
From: https://www.cnblogs.com/wq246679/p/16723141.html

相关文章

  • vue3配置全局过滤器
    vue3配置全局过滤器需要在main.js中配置一下代码//vue3配置全局过滤器app.config.globalProperties.$filters={//formatTime过滤器的名称formatTime(value:s......
  • vue3源码学习12-编译three-生成代码
    之前两节看了模板生成AST和AST内部转化,这一节看最后的生成代码,编译配置是mode为module,prefixIdentifiers开启,hoistStatic开启,其他配置均不开启,先看示例:源代码:<divclass=......
  • vue组件系列-列表左右箭头滚动(vue3+ts)
    <template><divclass="list-wrapper"ref="allListRef"><divv-if="showArrow&&listSource.length>minArrowItemsCount"@click="scrollLeft"......
  • TypeScript在vue3中的应用(Ref和ComputedRef的应用)
    首先,我承认,我vue3和ts都不是很熟。然后在使用过程中就发现了这样一个情况。constlist:{isBoob:boolean;count:number;}[]=computed(()=>{letarr:number[]......
  • Vue3:响应式 API-工具函数 isRef()、unref()、toRef()、toRefs()、readonly()
     isRef()检查某个值是否为ref。<scriptsetup>import{ref,isRef}from"vue"letmsg=ref(0)functionfn(){console.log(isRef(msg))//判断是否为响应性变量......
  • vue3+jsx做函数组件
    组件部分:import{h}from"vue";constTest1=(props,context)=>{//context.slots类似react的props.children,但是这里代表插槽,ccname是具名插槽的名字,没有......
  • iview升级vue2 -> vue3
    基于gogocode,需要如下步骤:升级vue2 →3升级webpack3 →5升级gulp4 →5启用gogocode转换 修改不兼容部分升级webpackvue3使用@vue/compiler-sfc替换原......
  • vue3+ts+elementui中的手动上传至服务器
    <el-uploadclass="inline"ref="uploadImgRef":http-request="uploadImg":auto-upload="false":accept="'.jpg,.png'"><template#trigger><el-butto......
  • vue3中watch监听ref reactive响应式数据写法及注意点
    watch函数与vue2中watch配置一致两个小坑监视reactive定义的响应式数据时,oldvalue无法正确获取,强制开启了深度监视(deep配置失败)监视reactive定义的响应式数据中某个......
  • vue3 基础-动态组件 & 异步组件
    之前学习的都是父子组件传值的话题,一句话总结就是,常规数据通过属性传,dom结构通过插槽slot来传.而本篇则关注如何通过数据去控制组件的显示问题,如咱经常用到的......