vue3的reactive赋值问题解决
更新时间：2024年03月29日 11:34:58 作者：小猫先生的保安
vue3中直接对reactive声明的变量本身进行赋值是无效的,本文主要介绍了vue3的reactive赋值问题解决,具有一定的参考价值,感兴趣的可以了解一下
问题
vue3中直接对reactive声明的变量本身进行赋值是无效的。
筛选表单重置功能
// 数据结构
let filterForm = reactive({
createDate: null,
q: null
})
起初我的做法是直接给filterForm变量赋值。
function reset() {
filterForm = {
createDate: null,
q: null
}
}
写完之后发现无效，便改成了单个数据置空，此时生效了。
function reset() {
filterForm.createDate = null
filterForm.q = null
}
弹窗数据回显
const props = defineProps({
visible: {
type: Boolean,
default: false
},
data: {
type: Object,
default: {}
}
})
let visible = ref(false)
let modalData = reactive({})
我的逻辑：监听visible变量，如果弹窗显示，则将数据回显。
我的做法是：把props.data结构赋值给modalData变量，结果没有生效，我用vue插件查看，插件显示modalData变量是一个空对象。
用console.log打印，发现数据是有值的。
watch{
() => props.visible,
(val) => {
if(val) {
modalData = { ...props.data }
}
visible = val
}
}
查了下资料，发现直接给reactive声明的变量本身赋值是没有效果的。
于是我便给modalData里面又嵌套了一层data。
let modalData = reactive({
data: {}
})
watch{
() => props.visible,
(val) => {
if(val) {
modalData.data = { ...props.data }
}
visible = val
}
}
解决方案
单个赋值
let formData = reactive({
updateDate: null
})
formData.updateDate = '2023-7-10'
function reset() {
formData.updateDate = null
}
多嵌套一层
const props = defineProps({
data:{
type: Object,
default: {}
}
})
const modalData = reactive({
data:{}
})
modalData.data = { ...props.data }
补充
在查阅资源时，发现reavtive声明的数组变量，赋值时也同样有问题。
如果需要清空数组，不能直接赋值一个空数组，而是要将数组长度设置为 0。
let arr = reactive([]) // 错误写法 arr = [] // 正确写法 arr.length = 0
到此这篇关于vue3的reactive赋值问题解决的文章就介绍到这了,更多相关vue3 reactive赋值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
策略模式（Strategy Pattern）又称政策模式，其定义一系列的算法，把它们一个个封装起来，并且使它们可以互相替换。封装的策略算法一般是独立的，策略模式根据输入来调整采用哪个算法。这篇文章主要介绍了策略模式实现 Vue 动态表单验证,需要的朋友可以参考下2019-09-09
这篇文章主要给大家介绍了关于vue3项目打包与上线的相关资料,在项目完成得差不多得时候,就可以开始打包部署了,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-12-12
本篇文章主要介绍了详解如何使用 vue-cli 开发多页应用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
这篇文章主要介绍了Vue使用formData格式类型上传文件的示例代码，代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2021-09-09
这篇文章主要介绍了.vue 组件打包成 .js的操作方法,本文给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧2024-07-07
单向数据流方式使用一个上传数据流和一个下传数据流进行双向数据通信,两个数据流之间相互独立,下面这篇文章主要给大家介绍了关于vue单向数据流的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-07-07
如何使用 vxe-table 实现左边是树右边是表格联动功能
使用 vxe-table 来实现左边是树,右边是表格联动功能,当需要实现左右两侧联动时,表格 vxe-grid 配合分割模板 vxe-split 就很容易实现了,下面通过实例代码给大家介绍使用 vxe-table 来实现左边是树,右边是表格联动功能,感兴趣的朋友一起看看吧2025-03-03
elementui使用el-upload组件实现自定义上传的详细步骤
upload上传是前端开发很常用的一个功能,在Vue开发中常用的Element组件库也提供了非常好用的upload组件,这篇文章主要给大家介绍了关于elementui使用el-upload组件实现自定义上传的详细步骤,需要的朋友可以参考下2023-12-12
本篇文章主要介绍了详解用webpack2.0构建vue2.0超详细精简版，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-04-04
在elementui中Notification组件添加点击事件实例
这篇文章主要介绍了在elementui中Notification组件添加点击事件实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
最新评论