vue3 watch 监听多值以及深度监听用法

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

1.监听单个值

引入:
import {…, watch} from “vue”;
import {useRouter} from ‘vue-router’;

export default {
 setup() {
 	 const route = useRouter();
 	 //获取当前路由地址
 	 watch(
        () => route.currentRoute.value.path,
        (newVal, oldVal) => {
         console.log(newVal, oldVal);
         }
      )
 }
}

2.监听多个值
还是上面路由的例子

export default {
 setup() {
 	 const route = useRouter();
 	 //获取当前路由地址
 	 watch(
        () => [route.currentRoute.value.path,route.currentRoute.value.href],
        (newVal, oldVal) => {
        //此时返回的是数组,按下标获取对应值
         console.log(newVal[0]);
         console.log(newVal[1]);
         }
      )
 }
}

2.深度监听文章来源地址https://www.toymoban.com/news/detail-632692.html

export default {
 setup() {
 	 const route = useRouter();
 	 //获取当前路由地址
	 watch(()=>route, (newVal, oldVal) => {
           console.log(newVal)
           console.log( oldVal)
         },
         //深度监听
         {deep: true}
     )
 }
}

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

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

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

相关文章

  • vue3中用watch监听响应式数据的注意点

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

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

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

    2023年04月17日
    浏览(74)
  • Vue3.0 watch和watchEffect监听器:VCA

    在项目中,有时候检测一个变量的值是否反升了变化。通常使用的watch或者使用低效的循环判断。 在次vue中给我们设置了深度监测数据繁盛变化的方法。 1.vue中提供了在watch监听时设置deep:true 就可以实现对对象的深度监听; 2.immediate:true,代表watch里面声明了之后会立马执行han

    2024年02月06日
    浏览(54)
  • Vue3中watch的用法

            watch函数用于侦听某个值的变化,当该值发生改变后,触发对应的处理逻辑。 用于开启深度监听 是否开启初始化检测,默认是值发生变化时,才会执行监听器里面的方法,开启immediate后初始化就执行一次。   侦听器的回调使用与源完全相同的响应式状态是很常见的

    2024年02月16日
    浏览(42)
  • watch监听,解决Vue3父组件异步props传值,子组件接收不到的问题

    写静态数据的时候父组件传值子组件接收并渲染是没问题的,但当父组件异步获取数据,子组件接收数据会晚于渲染,就会产生接收不到的问题,我在用echarts绘制图表时图表就直接不显示  用watch监听props数据并在watch内进行赋值操作可解决该问题 直接上代码 父组件,vue3语法

    2024年02月15日
    浏览(43)
  • 【vue3】关于watch与computed的用法看这个就ok

    😉博主:初映CY的前说(前端领域) ,📒本文核心:watch()与computed的使用【vue2中watch|computed概念详解】,本文将介绍在vue3中怎么使用这两者技能 【前言】vue2当中有这两个技能,那么vue3中的watch与computed是怎么用呢? 注意点:对 reactive 自身的修改则不会触发监听。 一定得注意不

    2023年04月10日
    浏览(34)
  • Vue3 计算属性和侦听器实战(computed、watch)——简易点餐页面

    这篇文章记录一下 Vue3 计算属性和侦听器 (computed、watch) 实战的内容,这篇文章我们在有计算属性和侦听器的基础上,我们来制作一个简易点餐页面,接下来我们一起来从零到一开始制作。 计算属性和侦听器相关文章推荐: 深入与浅谈 Vue 中计算属性和侦听器的区别和使用

    2024年02月09日
    浏览(98)
  • vue3怎么监听页面的滚动

    有的时候监听的是window的滚动,有的时候是监听元素的滚动。  我们可以先创建一个hook。useScroll.js  可以传入元素实例参数elRef,如果没有传入的话就初始化为window。 在挂载完成之后判断是否传入了元素实例elRef,如果有的话就使用元素实例,监听元素的滚动。 还需修改wi

    2024年02月12日
    浏览(39)
  • vue3 监听resize窗口事件,离开页面要销毁窗口事件。

    resize事件: resize事件是改变窗口大小时发生的事件,可以在窗口开启、最大化、最小化、窗口大小改变(如拖拉改变窗口大小、move语句改变窗口大小、改变width或height属性以改变窗口大小)时发生。 1.监听浏览器窗口变化,实时获取该窗口的宽度和高度 2.监听 resize 事件 //优

    2024年02月12日
    浏览(45)
  • vue中使用watch监听同时监听两个数据

    使用场景,创建一个子组件,父组件会向子组件中穿递一个状态 - \\\"status\\\" ,子组件需要同时监听this.$route.params中的值和status,然后再去调方法,所以需要同时监听

    2024年02月11日
    浏览(41)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包