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