vue3 选项式:
由 watch 选项和 $watch() 实例方法声明的侦听器会在宿主组件卸载时自动停止，因此大多数场景下你无需关心要怎么操作来停止它。
在少数情况下，若你的确需要在组件卸载前停止一个侦听器，$watch() API 会返回一个能这样做的函数：
const unwatch = this.$watch('foo', callback)
// ...当该侦听器不再需要时
unwatch()
vue3 组合式：
在 setup() 或 <script setup> 同步生命的侦听器会和宿主组件绑，也会在组件卸载是自动停止，在大多数场景下你无需关心要怎么操作来停止它。
一个关键点是，侦听器必须是被 同步 创建的：如果侦听器是在异步回调中被创建的，它将不会绑定当前组件为宿主，并且必须手动停止以防内存泄露，eg：
<script>
import { watchEffect } from 'vue'
// 这个副作用会在组件内卸载时自动停止
watchEffect(() => {})
// ...这个则不会！
setTimeout(() => {
watchEffect(() => {})
}, 100)
</script>
要手动停止一个侦听器，请使用返回的处理函数。watch 和 watchEffect 都是这样：
const unwatch = watchEffect(() => {})
// ...当该侦听器不再需要时
unwatch()
注意，需要异步创建监视器的情况应该很少，并且应该尽可能首选同步创建。如果需要等待一些异步数据，可以将侦听逻辑设置为有条件的：
// 需要异步请求得到的数据
const data = ref(null)
watchEffect(() => {
if (data.value) {
// 得到数据后要做的事...
}
})
