vue3使用中踩过的坑

最新推荐文章于 2025-03-28 13:49:46 发布

qq_36987708

最新推荐文章于 2025-03-28 13:49:46 发布

阅读量1.1k

点赞数

分类专栏：前端文章标签：前端 vue3

本文链接：https://blog.youkuaiyun.com/qq_36987708/article/details/122986818

版权

前端专栏收录该内容

21 篇文章

订阅专栏

本文探讨了Vue中使用ref和reactive创建响应式数据时遇到的问题，特别是当需要在子组件中定义并保持原始数据不变时。通过示例展示了如何避免因数据同步导致的响应式丢失，同时分析了在处理复杂数据类型时可能出现的陷阱，并提出了相应的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、定义响应式数据

ref()和reactive()

ref():定义基本数据类型

定义： const loading = ref(false)

使用：loading.value = true

reactive()定义复杂数据类型，如object、array

定义：

const obj = reactive({})

const arr= reactive([])

使用：

注意：reactive定义的数据不能直接赋值 obj = {name: 'aa'} arr = [1,2]，这样就失去了响应式。

obj.name = 'aa'

const arrList = ['1', '2']

arr.push(...arrList)

2、子组件定义两个变量接受父组件接收同一个参数

业务场景，判断属性是否选择isSelect(1选择，0未选择)、是否删除isDelete(1删除，0未删除)，初始选择的话，修改时取消选择，要把数据isDelete 改为1

所以使用俩参数，一个用来编辑，一个作为初始值用来对比

      const attributeList = computed(() => {
        const data = props.productAttributeList
        return data.length ? dataArr : []
      })
      const originalAttributeList = computed(() => {
        const data = props.originalAttributeList
        return data.length ? dataArr : []
      })

一开始这么定义，后来发现，编辑了数据后，定义用来对比的原始数据也会改变/(ㄒoㄒ)/~~

就改了下

      const attributeList = computed(() => {
        const data = props.productAttributeList
        return data.length ? data: []
      })
      const originalAttributeList = computed(() => {
        const data = props.originalAttributeList
        const dataArr = JSON.parse(JSON.stringify(data.length ? data : []))
        console.log('改变')
        return dataArr
      })

但是 attributeList 数据改变仍然会改变originalAttributeList

就又重新改了下

      const attributeList = computed(() => {
        const data = props.productAttributeList
        const dataArr = JSON.parse(JSON.stringify(data.length ? data : []))
        return dataArr.length ? dataArr : []
      })
      const originalAttributeList = computed(() => {
        const data = props.originalAttributeList
        const dataArr = JSON.parse(JSON.stringify(data.length ? data : []))
        console.log('改变')
        return dataArr
      })

这样对照数据originalAttributeList 不会跟着attributeList数据改变了，但问题又来了，attributeList的响应式消失了~~>_<~~

怎么解决🆒