0
点赞
收藏
分享

微信扫一扫

vue3使用中踩过的坑

全栈顾问 2022-02-17 阅读 93
前端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的响应式消失了~~>_<~~

怎么解决🆒

举报

相关推荐

0 条评论