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实现答题功能
最近接手做一个前端小项目，基于vue实现答题功能，具体功能有判断用户是否答对，答对的话跳到下一题，答错的话弹窗告诉用户有错题，请重新答题，功能非常人性化，对实现代码感兴趣的朋友一起看看吧
2021-06-06
用Vue.js实现监听属性的变化
响应系统是Vue.js的一个显著功能，修改属性，可以更新视图，这让状态管理变得非常简单且直观。这篇文章主要给大家介绍如何利用Vue.js实现观察属性的变化，有需要的朋友们可以参考借鉴，感兴趣的朋友们下面来一起看看吧。
2016-11-11
详解vuex 中的 state 在组件中如何监听
本篇文章主要介绍了详解vuex 中的 state 在组件中如何监听，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-05-05
vue+vue-validator 表单验证功能的实现代码
这篇文章主要介绍了vue+vue-validator 表单验证功能的实现代码,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2017-11-11
vue2里面ref的具体使用方法
本篇文章主要介绍了vue2里面ref的具体使用方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-10-10
Vue+ElementUI实现动态更换任意主题色(动态换肤)的全过程
众所周知Element-UI有换肤功能,下面这篇文章主要给大家介绍了关于Vue+ElementUI实现动态更换任意主题色(动态换肤)的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-02-02
vite+vue3搭建的工程热更新失效问题及解决
这篇文章主要介绍了vite+vue3搭建的工程热更新失效问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
vue多个元素的样式选择器问题
这篇文章主要介绍了vue多个元素的样式选择器问题，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-11-11
一文带你理解 Vue 中的生命周期
在我们实际项目开发过程中，会非常频繁地和 Vue 组件的生命周期打交道，接下来我们就从源码的角度来看一下这些生命周期的钩子函数是如何被执行的,需要的朋友可以参考下面文章内容
2021-09-09
vue.js 实现图片本地预览裁剪压缩上传功能
这篇文章主要介绍了vue.js 实现图片本地预览裁剪压缩上传功能,代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友可以参考下
2018-03-03