Vue中watch监听第一次不触发、深度监听问题

更新时间：2022年10月17日 10:35:38 作者：至_臻

这篇文章主要介绍了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>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue 添加vux的代码讲解
通过命令npm install vux --save添加vux，在相关配置文件中配置信息，具体代码添加方法，大家参考下本文
2017-11-11
vue3中使用jsx的实现步骤
本文主要介绍了vue3中使用jsx的实现步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-07-07
vue+springboot用户注销功能实现代码
这篇文章主要介绍了vue+springboot用户注销功能,本文通过示例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
2024-05-05
Vue组件库ElementUI实现表格加载树形数据教程
这篇文章主要为大家详细介绍了Vue组件库ElementUI实现表格加载树形数据教程，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-06-06
vue3中proxy的基本用法说明
这篇文章主要介绍了vue3中proxy的基本用法说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-05-05
使用vscode添加vue模板步骤示例
这篇文章主要为大家介绍了vscode添加vue模板步骤示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-08-08
vue3+ts+echarts实现按需引入和类型界定方式
这篇文章主要介绍了vue3+ts+echarts实现按需引入和类型界定方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
超实用vue中组件间通信的6种方式(最新推荐)
组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互进行直接的引用，所以组件间的相互通信是非常重要的，这篇文章主要介绍了vue中组件间通信的6种方式,需要的朋友可以参考下
2022-11-11
vue如何给组件动态绑定不同的事件
这篇文章主要介绍了vue如何给组件动态绑定不同的事件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
Vue 基础语法之计算属性(computed)、侦听器(watch)、过滤器(filters)详解
计算属性就是 Vue 实例选项中的 computed，computed 的值是一个对象类型，对象中的属性值为函数，而且这个函数没办法接收参数，这篇文章主要介绍了Vue 基础语法之计算属性(computed)、侦听器(watch)、过滤器(filters)详解,需要的朋友可以参考下
2022-11-11