课程名称：Web前端架构师2022版
课程章节： 第8周 前端基础技术回顾和巡礼
主讲老师：张轩
课程内容：
今天学习的内容包括：
3-8 Vue 使用 watch 精确控制副作用
课程收获：
Watch：监听Reactive值的变化
我们经常需要在Reactive值发生变化时附加逻辑。
举例：
-
Input内容变化后通知搜索服务进行输入提示
-
用户选定的曲目发生变化时通知播放器切换曲目
-
购物车数据变化后通知服务端记录
在Reactive 模型中，每个Reactive值发生变化，都可能会触发另一组行为。再比如：
-
用户的切换导致显示头像的切换
-
购买数量的变化触发重新计算营销卡券使用
因此，Reactive值，需要一个监听机制， 这就是watch 和watchEffect 。
Side Effect（副作用）、Side Effect Invalidate（副作用失效）
在理解watch 和watchEffect 前，需要理解两个基础概念：
-
Side Effect
-
Side Effect Invalidation
副作用(Side Effect)
简单理解：副作用是计算之外的逻辑。
Vue、React这类渲染引擎，根据属性、状态计算视图。
view = f(props, state)
计算视图之外的，就是副作用（Effect）。
例如：
function SomeComponent(a, b) {
window.location.href = '...' // 副作用
const c = ref(0) // 副作用
watchEffect(..) // 副作用
return <div>{a + b + c.value}</div>
}
-
当reactive值更新的时候，触发vue组件更新可以看作一个副作用。
-
当用户打开页面，发送请求REST API，可以看作副作用
React/Vue内部是很纯的计算逻辑，所有【人机交互】，都是副作用。
划重点：简单的，你可以将副作用理解成纯计算背后产生的效果。
举例：
-
当你点击菜单的时候，切换了
currentIndex（一个整数）， 右侧显示内容变化是因为副作用。 -
当你删除文件的时候，你仅仅按下了del键，文件真实在磁盘上被删除是你操作的del键的副作用。
watch 和watchEffect 监听Reactive值变化（ref, reactive），本质是监听它们产生的副作用。从设计上，ref 和reactive 是值，但是它们会触发track 和trigger 两个过程，trigger 还会触发重绘——这些都是副作用。
副作用失效(Side Effect Invalidation)问题
设想你点击一个导航菜单，切换页面， 有可能会出现这种情况：
- 页面A还没打开，你已经点击了打开页面B的按钮
【点击打开A】和【点击打开B】是两次计算，比如我们这样：
const currentIndex = ref("")
// 点击打开A
currentIndex.value = "A"
// 点击打开B
currentIndex.value = "B"
但是这两次计算产生的副作用——打开页面A和B，可能只有B完成——因为用户点太快了，页面A还没加载完，就切换了。
像这样，一个副作用没有执行完，下一个副作用已经到来了，上一次的副作用我们称为一个失效的副作用（Invalidate)。
这样看， watch 和watchEffect 要处理所有的副作用，还需要处理副作用失效的问题。