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赋值内容请搜索程序员之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持程序员之家！

您可能感兴趣的文章:

vue3?reactive响应式依赖收集派发更新原理解析
这篇文章主要为大家介绍了vue3响应式reactive依赖收集派发更新原理解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-03-03
解决Vue+ts里面this.$store问题
这篇文章主要介绍了解决Vue+ts里面this.$store问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-03-03
Vue实现Chrome小恐龙游戏的示例代码
Google 给 Chrome 浏览器加了一个有趣的彩蛋，本文就详细的介绍一下Vue实现Chrome小恐龙游戏的示例代码，具有一定的参考价值，感兴趣的可以了解一下
2022-04-04
vant IndexBar实现的城市列表的示例代码
这篇文章主要介绍了vant IndexBar实现的城市列表的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-11-11
Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )
这篇文章主要介绍了Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK ),非常不错，具有参考借鉴价值，需要的朋友可以参考下
2017-03-03
vue-test-utils初使用详解
这篇文章主要介绍了vue-test-utils初使用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-05-05
vue跳转页面携带参数并且立即执行方法
这篇文章主要介绍了vue跳转页面携带参数并且立即执行方法,首先定义跳转函数,结合实例代码给大家介绍的非常详细,需要的朋友参考下吧
2023-10-10
解决echarts echarts数据动态更新和dataZoom被重置问题
这篇文章主要介绍了解决echarts echarts数据动态更新和dataZoom被重置问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07
vue中的自定义指令clickOutside
这篇文章主要介绍了vue中的自定义指令clickOutside，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-05-05
vue中的 $slot 获取插槽的节点实例
今天小编就为大家分享一篇vue中的 $slot 获取插槽的节点实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11