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 监听对象数组中对象的特定属性

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

    2023年04月20日
    浏览(45)
  • vue全家桶进阶之路32:Vue3 WatchEffect和watch 监听

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    2024年02月11日
    浏览(45)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包