vue3使用中踩过的坑

一、定义响应式数据

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的响应式消失了~~>_<~~

怎么解决🆒