vue3-基础知识（3）- 侦听器

1. 处理副作用。默认情况下，用户创建的侦听器回调，都会在 Vue 组件更新之前被调用。
2. watchEffect
   立即执行，自动追踪函数内部依赖，变化则再次执行。

• watchEffect(fn) // 请求数据，从新请求。
• 代码简洁，但关系不明确。

3. watch
   懒依赖，精确控制。

• watch(ref,fn) // 一个ref
• watch(() => ref1.value + ref2.value, fn) // 多个ref组合值
• watch([ref1, ref2], fn) // 多个ref
• watch(() => reactive.props, fn) // reactive属性，深层嵌套（推荐）
• watch(() => reactive.props, fn, { deep: true }) // 强制深层（慎用）。

4. 回调中访问更新后的dom

• 需要指明 flush: ‘post’
• 用后置刷新watchPostEffect替代

5. 停止侦听器

   侦听器必须用同步语句创建（会自动停止）：如果用异步回调创建一个侦听器，那么它不会绑定到当前组件上，你必须手动停止它，以防内存泄漏

• 手动停止侦听器: const unWatch = watchEffect(() => {}); unWatch()

6. 异步侦听器（推荐）

       // 需要异步请求得到的数据
     const data = ref(null)
   
     watchEffect(() => {
       if (data.value) {
         // 数据加载后执行某些操作...
       }
     })