【金秋打卡】第13天 Web前端架构师2022版

课程名称：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 要处理所有的副作用，还需要处理副作用失效的问题。