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

vue3-基础知识（3）- 侦听器
1. 处理副作用。默认情况下，用户创建的侦听器回调，都会在 Vue 组件更新之前被调用。
2. watchEffect
  立即执行，自动追踪函数内部依赖，变化则再次执行。
- watchEffect(fn) // 请求数据，从新请求。
- 代码简洁，但关系不明确。
1. 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 }) // 强制深层（慎用）。
1. 回调中访问更新后的dom
- 需要指明 flush: ‘post’
- 用后置刷新watchPostEffect替代
1. 停止侦听器
  
  侦听器必须用同步语句创建（会自动停止）：如果用异步回调创建一个侦听器，那么它不会绑定到当前组件上，你必须手动停止它，以防内存泄漏
- 手动停止侦听器: const unWatch = watchEffect(() => {}); unWatch()
1. 异步侦听器（推荐）
```
    // 需要异步请求得到的数据
  const data = ref(null)

  watchEffect(() => {
    if (data.value) {
      // 数据加载后执行某些操作...
    }
  })
1
2
3
4
5
6
7
8
```
相关阅读:
2023最新SSM计算机毕业设计选题大全（附源码+LW）之java家教管理系统dpf3v
Confluence 自定义展示页面
 SPDK EAL: No free 2048 kB hugepages reported on node 0
实战| 记一次shiro序列化到接管服务器
 npm package.json
elasticsearch(ES)分布式搜索引擎03——（RestClient查询文档，ES旅游案例实战）
大学生简单环保环境静态HTML网页设计作品 DIV布局环境介绍网页模板代码 DW学生环境网站制作成品下载 HTML5期末大作业
 基于springboot实现旅游路线规划系统项目【项目源码+论文说明】
.net餐厅管理系统用户，餐厅、结果Model部分
 2022亚太C题详细思路
原文地址：https://blog.csdn.net/junjiahuang/article/details/127921743