本文主要介绍vue3 watch和watchEffect的使用，以及有什么区别，帮助大家更好的理解和学习vue框架，有兴趣的朋友可以了解一下。
1 .观察听众
介绍手表
从“vue”导入{关于唐山微信小程序f，reactive，watch，torefs}
监控基本数据类型-观察特征：
1.第一次显示页面时，只有当数据发生变化时，才会执行lazy。
2.该参数可以获得当前值和原始值
3.可以监听多个数据的变化，用一个监听负载
setup() {
const name=ref('雷磊')
手表(名称，(curVal，prevVal)={
console.log(curVal，prevVal)
})
}
template: `Name:输入v-model='name' /'
监控参考类型-
setup() {
const name obj=reactive({ name : '雷磊'，englishName: '鲍勃' })
听一段数据
watch(()=nameObj.name，(curVal，prevVal)={
console.log(curVal，prevVal)
})
听多个数据
watch([()=nameObj.name，()=nameObj.name]，([curName，curing]，[prevName，curing])={
console.log(curName，curing，'-'，prevName，curing)
setTimeout(()={
stop1()
}, 5000)
})
const { name，englishName }=toRefs(nameObj)
}
template : ` name : input v-model=' name '/EnglisH name : input v-model=' EnglisH name '/'
2.watchEffect
参数不太多，只有一个回调函数
1.立即执行。没有惯性，页面的第一次加载就会被执行。
2.自动检测内部代码，如果代码中有任何依赖项，就执行它
3.你不需要传递你想听的内容，你会自动感知到代码依赖。不需要传递很多参数，只需要传递一个回调函数
4.你不能得到以前数据的值，只能得到当前值
5.有些=异步操作在这里会更合适
watchEffect(()={
console.log(nameObj.name)
})
取消收听者观看取消收听者使用是相同的
const stop=watchEffect(()={
console.log(nameObj.name)
setTimeout(()={
停止()
}, 5000)
})
const stop 1=watch([()=NameObj . name，()=nameObj.name]，([curName，curEng]，[prevName，curEng])={
console.log(curName，curing，'-'，prevName，curing)
setTimeout(()={
stop1()
}, 5000)
})
手表也可以成为非惰性和立即执行，增加第三个参数即时：真
watch([()=nameObj.name，()=nameObj.name]，([curName，curing]，[prevName，curing])={
console.log(curName，curing，'-'，prevName，curing)
setTimeout(()={
stop1()
}, 5000)
}, {
即时：真
})
