VUE子组件的watch不被触发问题及解决
作者：海到无边天作岸山登绝顶我为峰
这篇文章主要介绍了VUE子组件的watch不被触发问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
VUE子组件的watch不触发
1.起因
在父组件引入子组件，子组件引入dialog是一个弹框。
- a. prop:['flag']
- b.子组件是一个dialog弹框。
- c. 现在的效果是：刷新页面，第一次的弹框出现，将弹框关闭之后，再次点击，弹框不出现。 每次传递给子组件的flag值是一样，此时就不会触发子组件里面的 watch：{ flag: 'changeFlag' }
- 指定的changeFlag方法。
2.解决方法
- a.父组件初始化一个字段：openDetailDialog: false
- b.通过以下方式传递给子组件
open-detail-dialog="openDetailDialog"
- c.子组件接收。从而触发方法
- d. 关闭子组件弹框时需要注意：
- e.通过$emit给父组件通知一个事件，父组件接收事件并作出处理，在处理的方法里面对this.openDetailDialog的值取反
3.思路
Watch对应的监听方法不被触发，因为watch监听的key对应的 值没有发生变化， 所以加一个临时的变量，然后通过对其取反，来保证每一次watch监听的值与上一次不同，从而是watch事件生效。
VUE3项目中 watch 各种不触发
watch基本格式
watch(监听的数据，作用函数，监听配置)
watch(data,
(newData, oldData) => {},
{ immediate: true, deep: true })deep:true 开启深度监听
当data为reactive数据时必开启，不然不触发监听
immediate:true 页面渲染后立刻触发监听
最好所有watch都配置，不然会出现watch监听不触发问题
const data = ref('开始')
const stu = reactive({
name: '张三',
age: '12'
})
watch(data, (newName, oldName) => {
console.log("newName", newName);
}{ immediate:true });
// reactive对象可以直接监听，但是oldName值会有问题
watch(stu, (newName, oldName) => {
console.log("newName", newName);
},{ deep: true,immediate:true });
// 监听reactive对象某个属性变化
watch(() => stu.name,(newVal,oldVal)=>{
console.log(newVal,'新')
console.log(oldVal,'旧')
},{ deep: true,immediate:true })
// 注意子组件的props也是reactive对象
// props监听
props: {
index: {
type: Number,
default: 0
}
},
watch(() => props.index,(newVal,oldVal)=>{
console.log(newVal,'新')
console.log(oldVal,'旧')
},{ deep: true,immediate:true })总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。