Vue中watch监听第一次不触发、深度监听问题
作者：至_臻
这篇文章主要介绍了Vue中watch监听第一次不触发、深度监听问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
watch监听第一次不触发、深度监听
第一次不触发
handler：其值是一个回调函数。即监听到变化时应该执行的函数。deep：其值是true或false；确认是否深入监听。(一般监听时是不能监听到对象属性值的变化的，数组的值变化可以听到。)immediate：其值是true或false；确认是否以当前的初始值执行handler的函数
例如
我将父组件中的WatchId传递到这个子组件页面我要根据id来获取数据watch监听不到一次的数据变化，下面是我的例子
<script>
export default {
props:{
WatchId:{
type:Number,
default:''
}
},
data(){
return{
editWatchId:'',
},
watch:{
WatchId:{
immediate:true,
handler(id){
console.log(id)
this.editWatchId=id
}
}
},
}
}
</script>vue watch使用无效问题
watch 用于监听，有时无法执行可以在组件上添加
:key="new Date().toString()"
通过时间来实时刷新组件内容，示例：
<el-dialog class="dialog-update" width="880px“ :modal="false" :close-on-click-modal="false" :visible.sync="checkReceiptVisible"> <ReceiptDetail v-if="checkReceiptVisible" :key="new Date().toString()"/> </el-dialog>
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。