watch和watchEffect

一，vue3中watch

1.在vue3中，watch在组合式api里，使用时需要导入

import { watch } from 'vue';

2.watch是一个函数，接受两个参数，第一个是需要监听的对象，第二个是处理函数

watch(val,(newVal,oldVal)=>{
})

3.在vue3中，主要讨论的是监听ref和reactive数据的变化

（1）监听ref时

import { watch, ref } from 'vue';
const a = ref(1)

watch(a,(n,o)=>{
})

//也可以监听数组的变化，且不同于vue2,vue3可以正确返回n，o的值
const b=ref([])
watch(a,(n,o)=>{
})

//注意事项，当监听的是通过props传入的hook的ref,一定要使用toRef解析，或者使用函数形式来监听这个ref
watch(()=>a,(n,o)=>{
})

(2) 监听proxy，如reactive时

import { watch,ref } from 'vue';
const a= reactive ({k:1})

//监听整个a，n=o等于改变后的值
watch(a,(n,o)=>{
})

//监听a的某个属性时，需要使用函数形式，n，o返回正确的值
watch(()=>a.k,(n,o)=>{
})

4.watch可以同时支持监听多个属性的变化，注意，只要其中一项改变就会触发，并且返回这次触发的最新状态

//通过数组的形式对多个属性进行监听，当a，或b改变时，就会触发函数，函数的参数是两个数组，分别对应了新值a,新值b，和旧值a，旧值b的组合
watch([a,b],([newA,newB],[oldA,oldB])=>{})

//当两个属性存在业务需要同时监听可以这样写，单独的两个属性，分开成两个`watch`就好

二，vue3中watchEffect

1.watch是惰性的，也就是说在第一次加载时，不会执行处理函数。

2.watchEffect和watch本质上的区别就是 watchEffect会在第一次加载时就执行。

3.watchEffect也是vue3 组合式api其中的一员，使用时需导入

import { watchEffect } from 'vue';

4.和watch不同，watchEffect只接受一个函数，不用手动传入依赖，自动获取依赖。

import { reactive ,watchEffect } from 'vue';

const a  = reactive({
	name:'xxx'
})
watchEffect(()=>{
	console.log(a.name) //第一次加载时就会执行，打印出xxx, 之后只要a.name发生变化，自动执行处理函数
})

setTimeout(()=>{
	a.name = 'pppp'
})

5.watchEffect另一个特点是在执行函数中，无法获取上一次的值。

三，停止监听

1.watch和watchEffect返回一个函数，我们可以通过执行这个函数来停止监听

const a = ref(1)
const stopWatch = watch(a,()=>{})

setTimeout(()=>{
	stopWatch()
},500)