Vue中watch首次不触发，深度监听为何总出问题？

本文共计430个文字，预计阅读时间需要2分钟。

目录 + watch 监听第一次不触发的、深度监听 + 第一次不触发 + 例如 + vue watch 使用无效问题 + watch 监听第一次不触发、深度监听 + 第一次不触发 + handler：它是一个回调函数。即监听到变化时，应执行的回调。

目录

• 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>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持易盾网络。