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); } ) } }
3.深度监听
还是上面路由的例子，深度监听用于监听一个复杂的对象，和vue2一样使用deep:true, 但是vue3里面要使用 {deep:true}
export default { setup() { const route = useRouter(); //获取当前路由地址 watch(()=>route, (newVal, oldVal) => { console.log(newVal) console.log( oldVal) }, //深度监听 {deep: true} ) } }
