×

vue3:直接对reactive声明的变量本身进行赋值是无效的

作者:Terry2024.05.08来源:Web前端之家浏览:627评论:0
关键词:vue3

我们一起来探讨个问题: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

您的支持是我们创作的动力!
温馨提示:本文作者系Terry ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/vuesdf82348209808.html

网友评论文明上网理性发言 已有0人参与

发表评论: