广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Vue watch监听使用的几种方法
  • 446
分享到

Vue watch监听使用的几种方法

Vue watch监听Vue watch监听原理 2022-12-22 12:12:57 446人浏览 泡泡鱼
摘要

目录一、watch使用的几种方法二、watch中的immediate与handler和deep属性一、watch使用的几种方法 1、 通过 watch 监听 msg 数据的变化。 w

一、watch使用的几种方法

1、 通过 watch 监听 msg 数据的变化。

watch: {
    msg(oldValue, newValue) {
        console.log(oldValue)
        console.log(newValue)
    }
}

2、通过 watch 监听 obj数据的变化。(深度监听 deep)

data() {
    return {
        obj: {
            'name': "赵",
            'age': 18
        },
    }
},
watch: {
    obj: {
        handler(oldValue,newVal) {
             console.log(oldValue)
             console.log(newValue)
        },
        deep: true  // 深度监听
    }
}

3、通过 watch 监听 data 数据的变化,数据发生变化时,执行 change 方法

watch: {
    data: 'change' // 值可以为methods的方法名
},
methods: {
    change(oldVal,newVal){
   console.log(oldVal,newVal)
  }
}

二、watch中的immediate与handler和deep属性

1、immediate属性

使用watch时有一个特点,就是当值第一次绑定时,不会执行监听函数,只有值发生改变时才会执行。如果我们需要在最初绑定值的时候也执行函数,则就需要用到immediate属性。

2、handler属性

watch中需要具体执行的方法

3、deep属性

当需要监听一个对象的改变时,普通的watch方法无法监听到对象内部属性的改变,此时就需要deep属性对对象进行深度监听,数组字符串一般不需要

data() {
    return {
        obj: {
            'name': "王",
            'age': 18
        },
    }
},
watch: {
    obj: {
        // 执行方法
        handler(oldValue,newVal) {
             console.log(oldValue)
             console.log(newValue)
        },
        deep: true, // 深度监听
        immediate: true  // 第一次改变就执行
    }
   // 如果只需要监听对象中的一个属性值,则可以做以下优化:使用字符串的形式监听对象属性:
    'obj.name': {
        // 执行方法
        handler(oldValue,newVal) {
             console.log(oldValue)
             console.log(newValue)
        },
        deep: true, // 深度监听
        immediate: true  // 第一次改变就执行
    }
}

到此这篇关于Vue watch监听使用的几种方法的文章就介绍到这了,更多相关Vue watch监听内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: Vue watch监听使用的几种方法

本文链接: https://www.lsjlt.com/news/175532.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Vue watch监听使用的几种方法
    目录一、watch使用的几种方法二、watch中的immediate与handler和deep属性一、watch使用的几种方法 1、 通过 watch 监听 msg 数据的变化。 w...
    99+
    2022-12-22
    Vue watch监听 Vue watch监听原理
  • vue watch监听方法总结
    目录1.vue中的watch作用就如其命名就是监听的作用2.监听这个对象的属性3.监听这个对象的属性4.监听这个对象的属性在vue中,使用watch来响应数据的变化,关于watch的...
    99+
    2022-11-12
  • VUE watch监听器的基本使用方法详解
    目录1、下面代码是watch的一种简单的用法2、immediate 立即监听3、handler方法 4、 deep属性总结 侦听器一般来说是用来监听数据的变化,默认是在数据发生变化时...
    99+
    2022-11-12
  • vue中watch监听方法有哪些
    这篇文章主要为大家展示了“vue中watch监听方法有哪些”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“vue中watch监听方法有哪些”这篇文章吧。1.vue中的watch作用就如其命名就是监...
    99+
    2023-06-22
  • Android 解决监听home键的几种方法
    Android 解决监听home键的几种方法 前言: 以下两种方法可以完美解决监听back键,home键,多任务键(最近任务键)。 一、使用注册广播监听home键、多任务键 演...
    99+
    2022-06-06
    方法 home键 Android
  • vue怎么使用watch监听属性
    这篇文章主要介绍了vue怎么使用watch监听属性的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇vue怎么使用watch监听属性文章都会有所收获,下面我们一起来看看吧。基本用法Vue watch最重要的使用场景...
    99+
    2023-06-30
  • vue监听路由变化的几种方式小结
    目录监听路由变化的几种方式小结一、监听路由从哪儿来到哪儿去二、监听路由变化获取新老路由信息三、监听路由变化触发方法四、全局监听路由如何在组件中监听路由参数的变化?方式一: 监听 $r...
    99+
    2022-11-13
  • VUE3中watch监听使用的方法有哪些
    这篇文章主要介绍“VUE3中watch监听使用的方法有哪些”,在日常操作中,相信很多人在VUE3中watch监听使用的方法有哪些问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”VUE3中watch监听使用的方法...
    99+
    2023-07-01
  • Vue数据监听器watch和watchEffect的使用
    目录watch()函数watchEffect()函数watch与watchEffect之间的联系与区别我们都知道监听器的作用是在每次响应式状态发生变化时触发,在组合式 API 中,我...
    99+
    2023-02-23
    Vue watch监听器 Vue watchEffect监听器 Vue 监听器
  • vue正确使用watch监听属性变化方式
    目录基本用法监听object使用deep参数重新赋值通过路径监听内部数据初始化变量触发监听回调总结Vue中可以使用监听器监听属性的变化,并根据属性变化作出响应。但一旦涉及到复杂数据的...
    99+
    2022-11-13
  • Vue使用watch监听数组或对象
    1、普通的watch data() { return { frontPoints: 0 } }, watch: { frontPoint...
    99+
    2022-11-13
  • vue中watch监听器用法之deep、immediate、flush
    目录一、watch 默认是浅层,使用deep深层监听二、watch 默认是懒侦听,使用immediate即时回调侦听三、回调的刷新时机flush: 'post'四、t...
    99+
    2022-11-13
  • vue中watch监听对象中某个属性的方法
    目录immediate 和 handlerdeep 深度监听以currentParams为例,监听selOrgId属性immediate 和 handler watch 的用法有个特...
    99+
    2023-05-17
    vue watch监听对象属性 vue watch监听
  • 关于Vue不能监听(watch)数组变化的解决方法
    目录一、vue监听数组 二、vue无法监听数组变化的情况 一、vue监听数组 vue实际上可以监听数组变化,比如 data () { return { watchA...
    99+
    2022-11-12
  • Vue数据监听器watch和watchEffect如何使用
    本文小编为大家详细介绍“Vue数据监听器watch和watchEffect如何使用”,内容详细,步骤清晰,细节处理妥当,希望这篇“Vue数据监听器watch和watchEffect如何使用”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入...
    99+
    2023-07-05
  • Vue怎么使用watch监听数组或对象
    这篇文章主要介绍“Vue怎么使用watch监听数组或对象”,在日常操作中,相信很多人在Vue怎么使用watch监听数组或对象问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Vue怎么使用watch监听数组或对象...
    99+
    2023-07-02
  • vue如何使用watch监听指定数据的变化
    目录使用watch监听指定数据的变化vue watch监听多个值使用watch监听指定数据的变化  在vue中,可以使用watch属性来监听data中某个属性值的变化。 &...
    99+
    2022-11-13
  • 小程序中监听页面滚动的几种方法实例
    目录目录实现效果下面是Intersection Observer在MDN上的介绍IntersectionObserverrelativeToViewport接受参数 Object m...
    99+
    2022-11-13
  • Vue监听的方法有哪些
    这篇“Vue监听的方法有哪些”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“Vue监听的方法...
    99+
    2022-10-19
  • 详解Vue3中Watch监听事件的使用
    目录一、watch的使用1、引入watch2、多个数据源监听3、监听数组变化4、侦听对象5、结论一、watch的使用 watch(WatcherSource, Callback, [...
    99+
    2023-02-10
    Vue3 Watch监听事件使用 Vue3 Watch监听 Vue3 Watch
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作