vue踩坑合集(setup)

本文介绍了Vue中数据更新的正确方式,如使用`ref`和`[]`操作处理数据变化,解决dom渲染和父子组件间props传递的延迟问题,以及如何正确使用`nextTick`确保DOM更新后的回调执行。同时,强调了`watch`监听响应式对象属性值时的注意事项。
摘要由CSDN通过智能技术生成

1. v-for数据元素已发生变化,但页面数据不更新

  • 错误做法:不能直接等于覆盖,vue检测不到
const data = ref([])

const change = (res) => {
     data.value = res
}
  • 正确做法:
const data = ref([])

const change = (res) => {
    data.value = []
    data.value.push(...res)

    //或 data.value = [].concat(res)
}

2. dom元素渲染及父子组件props传值延迟问题——nextTick

2.1 获取dom元素宽高等信息

<div ref="parentSize" stylr="width: 100%; height: 100%">
    <div :style="{'width': size, 'height': size}">'30%'</div>  
</div>
const parentSize = ref()
const size = ref()

onMounted(async () => {
    await nextTick()
    size.value = parentSize.value.offsetWidth / 3
})

2.2 props传值

//父组件
<Son :tag="tag"/>  //调用子组件
<button @click="change">change tag</button>
//父组件
import Son from '......'

const tag = ref(0)

const change = () => {
    tag.value = 1;
}


//子组件
const props = defineProps<{
    flag: number
}>()

const deal = async() => {
    await nextTick()
    console.log(props.flag)
    //......
}

2.3 nextTick

  • Vue在更新DOM时是异步执行的。当数据发生变化,Vue将开启一个异步更新队列,视图需要等队列中所有数据变化完成之后,再统一进行更新。
  • nextTick()方法可以实现dom数据更新后延迟执行后续代码、

3. watch监听响应式对象的属性值

3.1 监听父组件数据

  • 错误做法:
watch(props.tag, (newVal) => {
    //......
}
  • 正确做法:
watch(() => props.tag, (newVal) => {
    //......
}

3.2 监听子组件数据

//父组件
<Son ref="sonComp" />  //调用子组件
  •  错误做法:
//子组件
const tag = ref(0)

const tagChange = () => {
    //......
}

defineExpose({
    tag
})



//父组件
import Son from '......'
const sonComp = ref()

watch(sonComp.value.tag, (newVal) => {
    //......
}

onMounted(() => {
    //......
)
  • 正确做法:watch需写在mounted里, 因为这时ref指向的子组件才加载完成并能够获取到,
//子组件
const tag = ref(0)

const tagChange = () => {
    //......
}

defineExpose({
    tag
})



//父组件
import Son from '......'
const sonComp = ref()

onMounted(() => {
    watch(sonComp.value.tag, (newVal) => {
        //......
    }

    //......
)

  • 5
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值