在setup选项里使用watch有两种办法。
第一种：使用watchEffect
watchEffect立即执行传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数，可以接收watchEffect的返回值用来停止监听。
示例：
<script lang="ts">
import { ref,watchEffect } from 'vue'
export default {
setup(){
const message = ref("hello")
const changeMessage = ()=> message.value = "hello world"
watchEffect((onInvalidate)=>{
//使用这个函数的时候会执行一次里边的代码,因为这里打印了message.value
//message是ref响应式变量
//所以后续检测到message值的变化，就会再次执行effect里边的代码
console.log("message 被修改了",message.value)
//如果是下边这种情况，没有message.value
//那么只会在注册effect的时候执行一次，后续不再执行
// console.log("这次没有message被修改了")
onInvalidate(()=>{
//当组件失效，watchEffect被主动停止或者副作用即将重新执行时，这个函数会执行
})
},{
flush: 'post',//在组件更新后触发，这样你就可以访问更新的 DOM。
// flush: 'pre',//默认值，在组件更新前触发
// flush: 'sync',//同步触发，低效
})
// const stop = watchEffect();
//stop() 可以停止监听
return {
message,
changeMessage
}
}
}
</script>
<template>
<div>
{{message}}
<button @click="changeMessage">修改message</button>
</div>
</template>
第二种，使用watch
watch API 与选项式 API this.$watch (以及相应的 watch 选项) 完全等效。watch 需要侦听特定的数据源，并在单独的回调函数中执行副作用。默认情况下，它也是惰性的——即回调仅在侦听源发生变化时被调用。
<script lang="ts">
import { ref,watch } from 'vue'
export default {
setup(){
const message = ref("hello")
const changeMessage = ()=> message.value = "hello world"
watch(
()=>message.value,
(val,preVal)=>{
//val为修改后的值,preVal为修改前的值
console.log("message",val,preVal)
},
{
//如果加了这个参数，值为true的话，就消除了惰性，watch会在创建后立即执行一次
//那么首次执行，val为默认值,preVal为undefined
immediate:true,
//这个参数代表监听对象时，可以监听深度嵌套的对象属性
//比如message是一个对象的话，可以监听到message.a.b.c，也就是message下的所有属性
deep:true,
}
)
return {
message,
changeMessage
}
}
}
</script>
<template>
<div>
{{message}}
<button @click="changeMessage">修改message</button>
</div>
</template>
watch还可以同时监听多个源，用数组传入。
<script lang="ts">
import { ref,watch } from 'vue'
export default {
setup(){
const message = ref("hello")
const count = ref(0)
const changeMessage = ()=> {
message.value = "hello world"
count.value = 666
}
watch(
()=>[message.value,count.value],
([messageVal,messagePreVal],[countVal,countPreVal])=>{
//监听多个源用数组传入
console.log("messageVal,messagePreVal",messageVal,messagePreVal)
console.log("countVal,countPreVal",countVal,countPreVal)
},
)
return {
message,
changeMessage
}
}
}
</script>
<template>
<div>
{{message}}
<button @click="changeMessage">修改message</button>
</div>
</template>