vue3使用watch监听props两大坑

作者: 埼玉的头发 | 来源:发表于2024-03-07 10:22 被阅读0次

正确写法

const props = defineProps(['mapData'])
watch(() => props.mapData, value => {
  doSomething(value)
})

错误写法

const { mapData }= defineProps(['mapData'])
watch(() => mapData, value => {
  doSomething(value)
})

正确写法

const props = defineProps(['mapData'])
watch(() => props.mapData, value => {
  doSomething(value)
})

错误写法

const props = defineProps(['mapData'])
watch(props.mapData, value => {
  doSomething(value)
})

vue composition-api tips
Watch watch 监听 props 属性时，不能使用解构赋值
vue3 常用watch及defineExpose
vue3 watch监听的两张方法 vue3 父组件调用子组件实例
vue-api-数据
computed 计算属性 props watch 监听
vue watch deep无效解决
最近写项目，子组件通过props接收父组件的数据，在子组件中使用watch监听 deep深度监听对象当监听的是对...
Vue watch的数据看似没有更新，但watch一直提示数据有
今天遇到了一个看似很神奇的bug，用watch监听props传来的参数，控制台中一直刷新watch中props有变...
Vue必备技巧，建议收藏哦
watch 1.watch(怎样做到初始化执行一次) 2.watch的深度监听 14种组件通讯 props这个应该...
vue监听和webpack基本使用
vue监听使用keyup监听使用watch监听文本框变化，watch 使用这个属性可以监视data中的数据变化...
解决组件之间props双向绑定问题
解决方式一：在data对象中创建一个值，如visible 使用watch监听props属性中对应的值，如val...
vue父子组件传参（异步请求数据）
vue父子组件传参采用props方式异步请求数据采用watch监听数据的更改
vue 同时监听多个值的变化
使用computed 和watch来同时监听多个属性值。。参考原文：vue 使用watch同时监听多个属性[ht...