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

2022-02-23 21:58:11 阅读：227 来源： 互联网

标签：route watch newVal oldVal vue3 监听路由

watch-监听器(侦听器)，作用是用来侦测响应式数据的变化，可以得到newValue和oldValue，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, oldVal);
         }
      )
 }
}

2.深度监听
还是上面路由的例子，深度监听用于监听一个复杂的对象，和vue2一样使用deep:true, 但是vue3里面要使用 {deep:true}

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

以上就是watch的几种常见用法

标签：route,watch,newVal,oldVal,vue3,监听,路由
来源： https://blog.csdn.net/egekm_sefg/article/details/123100397

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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