watch监听

这篇具有很好参考价值的文章主要介绍了watch监听。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.概念

1、在vue中watch用来监听数据的变化,当数据变化时可以执行一些操作 

2、第一次绑定watch时,不会执行监听函数,发生改变时才会触发监听。

3、如果想要第一次绑定watch时触发监听,则使用handler方法:如果immediate为true,表示在watch首次绑定的时候,触发监听;为false,则表示在数据发生变化时,触发监听。

4、当需要监听一个对象内部属性的变化时,需要深度监听,设置deep:true。

5、watch中不要使用箭头函数,箭头函数中的this指向的是定义时的对象而不是函数运行时所在的对象,即全局定义时的window对象。

6、watch的超强用法,watch可以监听到只要能通过this.访问的属性,比如面包屑里的监听使用。

      this.$route.path获取当前路由,用在监听里就是,当监听到路由的变化时,进行什么什么操作文章来源地址https://www.toymoban.com/news/detail-534891.html

watch: {
    //监听路由发生的改变
    //$route.path获取当前路由
    "$route.path"() {
      this.liveBreads();
    }
  },

到了这里,关于watch监听的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue watch监听数据变化

    监听数据变化,在Vue中是通过侦听器来实现的,你也可以将它理解为监听器,时刻监听某个数据的变化 这一次我们要添加的是watch属性。下面我们先来眼熟一下侦听器的添加位置: 侦听器更多的是用在异步操作中,所谓异步操作就是数据返回有所延迟的操作,比如说我们要请

    2024年02月12日
    浏览(45)
  • vue3 watch 监听多值以及深度监听用法

    1.监听单个值 引入: import {…, watch} from “vue”; import {useRouter} from ‘vue-router’; 2.监听多个值 还是上面路由的例子 2.深度监听

    2024年02月14日
    浏览(55)
  • vue watch监听对象 新旧值一样

    废话不多说,直接上代码 通过打印最后发现一个问题,watch中的新旧值一样 解决方案 通过computed剥离与原数据的引用关系

    2024年02月12日
    浏览(40)
  • Vue2 watch监听props的值

    再次遇到监听子组件收到父组件传过来的值,如果这个值变化,页面中的值发现是不会跟着同步变化的。所以监听props中的值,一直监听。   代码:  

    2024年02月13日
    浏览(44)
  • Vue3 —— watch 监听器及源码学习

    该文章是在学习 小满vue3 课程的随堂记录 示例均采用 script setup ,且包含 typescript 的基础用法 在 vue3 中,必须是 ref 、 reactive 包裹起来的数据,才可以被 watch 监听到 1、语法: watch(source, cb, options) source 是监听的目标,有 4 种书写形式: reactive 形式的响应式数据 ref 形式的响

    2024年02月12日
    浏览(39)
  • vue2watch监听遇到的问题

    1 vue 父组件里引入子组件 显示与隐藏是v-if控制时 父传入子的参数通过watch 监听请求接口时 watch 时而监听不到 请求接口的参数就不对 如图 父组件这么引入子组件v-show 和v-if 是有区别的 2 子组件通过watch 监听后 清空页面要展示的列表数据 重新从第一页加载数据,如果在mou

    2024年02月16日
    浏览(46)
  • vue全家桶进阶之路32:Vue3 WatchEffect和watch 监听

    在 Vue 3 中, watchEffect 是一个用于监听响应式数据变化的 API。它可以在函数内部自动跟踪数据的依赖,并在依赖变化时重新运行函数。 watchEffect  的作用以及各个参数的功能讲解: watchEffect(effect: (onInvalidate: InvalidateCbRegistrator) = void | (() = void) | Promisevoid, options?: WatchEffectOptio

    2023年04月17日
    浏览(78)
  • 微信小程序实现类Vue-watch数据监听

    参考链接

    2024年02月12日
    浏览(40)
  • vue3中用watch监听响应式数据的注意点

    如果你在vue3中使用reactive()方法创建响应式数据,然后又用torefs()方法将响应式数据解构成单一的ref响应式数据。 此时,如果你想用watch监听解构出来单一的响应式数据,watch不起作用。 此时,你需要用watch监听之前的reactive()方法创建的数据,这样是能监听到的,要开启深度监

    2024年02月13日
    浏览(40)
  • Vue3 watch 监听对象数组中对象的特定属性

    在 Vue 3 中,可以使用 watch 函数来监听对象数组中对象的特定属性。可以通过在回调函数中遍历数组来检查对象的特定属性是否发生变化,并在变化发生时执行相应的操作。 例如,假设有一个名为 items 的对象数组,其中每个对象都有一个名为 checked 的布尔属性和一个名为 n

    2023年04月20日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包