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-cli3使用 DllPlugin 实现预编译提升构建速度

    vue-cli3使用 DllPlugin 实现预编译提升构建速度

    这篇文章主要介绍了vue-cli3使用 DllPlugin 实现预编译提升构建速度 ,需要的朋友可以参考下
    2019-04-04
  • Vue实现带参数的自定义指令示例

    Vue实现带参数的自定义指令示例

    这篇文章主要为大家介绍了Vue实现带参数的自定义指令示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-01-01
  • vue项目运行超详细图解

    vue项目运行超详细图解

    这篇文章主要给大家介绍了关于vue项目运行的相关资料,文中通过图文介绍的非常详细,对大家学习或者使用vue具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-09-09
  • 详细聊聊Vue中的options选项

    详细聊聊Vue中的options选项

    options是new Vue的参数,我们一般称之为选项或者构造选项,下面这篇文章主要给大家介绍了关于Vue中options选项的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-03-03
  • 关于axios配置多个请求地址(打包后可通过配置文件修改)

    关于axios配置多个请求地址(打包后可通过配置文件修改)

    这篇文章主要介绍了关于axios配置多个请求地址(打包后可通过配置文件修改),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • Vue-cli打包后如何本地查看的操作

    Vue-cli打包后如何本地查看的操作

    这篇文章主要介绍了Vue-cli打包后如何本地查看的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • 在Vue环境下利用worker运行interval计时器的步骤

    在Vue环境下利用worker运行interval计时器的步骤

    这篇文章主要介绍了在Vue环境下利用worker运行interval计时器的步骤,本文分步骤给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-08-08
  • vue + webpack如何绕过QQ音乐接口对host的验证详解

    vue + webpack如何绕过QQ音乐接口对host的验证详解

    这篇文章主要给大家介绍了关于利用vue + webpack如何绕过QQ音乐接口对host的验证的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面随着小编来一起学习学习吧
    2018-07-07
  • Vue3+TS+Vite+NaiveUI搭建一个项目骨架实现

    Vue3+TS+Vite+NaiveUI搭建一个项目骨架实现

    本文主要介绍了Vue3+TS+Vite+NaiveUI搭建一个项目骨架实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-06-06
  • Element-ui DatePicker日期选择器基础用法示例

    Element-ui DatePicker日期选择器基础用法示例

    这篇文章主要为大家介绍了Element-ui DatePicker日期选择器基础用法示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06

最新评论