vue3如何直接修改reactive定义的变量

 更新时间:2024年05月09日 14:47:59   作者:如白驹过隙  
这篇文章主要介绍了vue3如何直接修改reactive定义的变量问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue3直接修改reactive定义变量

reactive定义的数组或者对象,不能直接赋值修改,否则定义的数据将失去响应性

可以通过Object.assign修改

let rowData = reactive({})
 
// 修改rowData的值
Object.assign(rowData, row)

vue批量修改reactive中的值

reactive声明响应式对象,但修改值会比较麻烦,比如

    <script setup>
        import {reactive} from 'vue';
        let obj = reactive({
            id:1,
            name:'张三',
            age:18
        })
        obj.id = 2;
        obj.name = '李四';
    </script>

但是不能直接赋值,这样会失去响应性

obj = {id:2,name:'李四'}

解决方法

使用Object.assign

obj = Object.assign(obj,{id:2,name:'李四'})

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue.js中的绑定样式实现

    Vue.js中的绑定样式实现

    这篇文章主要介绍了Vue.js中的绑定样式实现,展开的内容呦style绑定样式和绑定class样式,具体相关内容需要的小伙伴可以参考下面文章介绍
    2022-05-05
  • vue项目实现点击目标区域之外可关闭(隐藏)目标区域

    vue项目实现点击目标区域之外可关闭(隐藏)目标区域

    这篇文章主要介绍了vue项目实现点击目标区域之外可关闭(隐藏)目标区域,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-03-03
  • vue+uniapp实现生成二维码

    vue+uniapp实现生成二维码

    这篇文章主要为大家详细介绍了vue结合uniapp实现生成二维码的相关知识,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以学习一下
    2023-12-12
  • 3种vue组件的书写形式

    3种vue组件的书写形式

    这篇文章主要为大家详细介绍了3种vue组件的书写形式,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11
  • Vue3响应式对象数组不能实时DOM更新问题解决办法

    Vue3响应式对象数组不能实时DOM更新问题解决办法

    在写大文件上传时,碰到关于 vue2 跟 vue3 对在循环中使用异步,并动态把普通对象添加进响应式数据,在异步前后修改该普通对象的某个属性,导致 vue2 跟 vue3 的视图更新不一致,引发一系列的思考,所以本文介绍了Vue3响应式对象数组不能实时DOM更新问题解决办法
    2024-07-07
  • vue实现数字滚动效果

    vue实现数字滚动效果

    这篇文章主要为大家详细介绍了vue实现数字滚动效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-06-06
  • vue3+ts实际开发中该如何优雅书写vue3语法

    vue3+ts实际开发中该如何优雅书写vue3语法

    近尝试上手 Vue3+TS+Vite,所以下面这篇文章主要给大家介绍了关于vue3+ts实际开发中该如何优雅书写vue3语法的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2022-10-10
  • vue element-ui实现动态面包屑导航

    vue element-ui实现动态面包屑导航

    这篇文章主要为大家详细介绍了vue element-ui实现动态面包屑导航,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-12-12
  • Vue3使用全局函数或变量的2种常用方式代码

    Vue3使用全局函数或变量的2种常用方式代码

    在Vue3项目中需要频繁使用某一个方法,配置到全局感觉会方便很多,这篇文章主要给大家介绍了关于Vue3使用全局函数或变量的2种常用方式,需要的朋友可以参考下
    2023-09-09
  • Vue.js实现表格渲染的方法

    Vue.js实现表格渲染的方法

    今天小编就为大家分享一篇对Vue.js实现表格渲染的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09

最新评论