08.watchEffect.上
学习要点：
1.watchEffect
本节课我们来要了解一下 Vue3.x 中的侦听 watchEffect 的用法；
一．watchEffect
1. watchEffect 的作用是响应式的追踪其相关依赖，并当依赖变更时重新执行；
// 第一次运行会先执行一次
watchEffect(() => {
console.log('effect~')
})
PS：在 watchEffect()的回调函数内，会响应式追踪相关依赖，比如：
// 响应式数据
const count = ref(1)
// 响应式的追踪依赖
watchEffect(() => {
// 这里输出的响应式数据 count，所以会自动收集其依赖，监控依赖的变更
// 如果依赖进行了变更，会再执行一次回调函数
console.log(count.value)
})
// 这里会被 watchEffect 当作依赖收集，并监控变更
// 最终导致执行两次，以此列推
count.value++
PS：如果创建第二个响应式数据，在 watchEffect()中监控或不监控会有什么效果？
// 第二个响应式数据
// 这里虽然变革了，但如果在 watchEffect 并没有当作依赖收集，则不会执行回调函数
const name = ref('Mr.Lee')
...watchEffect(...)
// 变更依赖
name.value = 'Mr.Wang' 2. 当组件卸载时，侦听过程也就结束，如果想提前中断侦听，可以显示调用返回值；
// 调用 stop()插入到你想停止的位置
const stop = watchEffect(() => {...
stop()
count.value++