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>

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

您可能感兴趣的文章:

解决v-model双向绑定失效的问题
这篇文章主要介绍了解决v-model双向绑定失效的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-04-04
Vue组件模板的几种书写形式(3种)
这篇文章主要介绍了Vue组件模板的几种书写形式(3种)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-02-02
详解在Vue中有条件地使用CSS类
本篇文章主要介绍了详解在Vue中有条件地使用CSS类，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
vue实现移动端触屏拖拽功能
这篇文章主要为大家详细介绍了vue实现移动端触屏拖拽功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-08-08
Vue实现base64编码图片间的切换功能
这篇文章主要介绍了Vue实现base64编码图片间的切换功能，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-12-12
深入了解Vue2中的的双端diff算法
双端Diff在可以解决更多简单Diff算法处理不了的场景，且比简单Diff算法性能更好。本文主要来和大家详细讲讲Vue2中的双端diff算法的实现与使用，需要的可以参考一下
2023-02-02
vue实现无缝滚动的示例详解
这篇文章主要为大家详细介绍了vue非组件如何实现列表的无缝滚动效果,文中的示例代码简洁易懂,感兴趣的小伙伴可以跟随小编一起学习一下
2023-09-09
vue如何转换时间格式为年月日时分秒和年月日(补零)
这篇文章主要介绍了vue如何转换时间格式为年月日时分秒和年月日(补零),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-04-04
postcss-pxtorem设置不转换UI框架的CSS单位问题
这篇文章主要介绍了postcss-pxtorem设置不转换UI框架的CSS单位问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-07-07
详解vue项目首页加载速度优化
这篇文章主要介绍了详解vue项目首页加载速度优化，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-10-10