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.深度监听

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

如果觉得《vue3 watch 监听多值以及深度监听用法》对你有帮助，请点赞、收藏，并留下你的观点哦！