Vue3中Watch的同步和异步
在 Vue 3 中，watch 是一个强大的工具，适合监视响应式数据的变化并处理副作用逻辑。最近在做CodeReview的时候，发现了一些对watch使用上不太合理的地方，整理了一个类似的例子。
案例分析
先来看看例子：
<template>
{{ dataList }}
</template>
<script setup lang="ts">
import { ref, watch } from "vue";
const dataList = ref([]);
const props = defineProps(["disableList", "type", "id"]);
watch(
() => props.disableList,
() => {
// 基于disableList的逻辑非常复杂，它同步计算一个新列表
const newList = getListFromDisabledList(dataList.value);
dataList.value = newList;
},
{ deep: true }
);
watch(
() => props.type,
() => {
// 基于类型的逻辑非常复杂，同步计算新列表
const newList = getListFromType(dataList.value);
dataList.value = newList;
}
);
watch(
() => props.id,
() => {
// 从数据库拉取数据
fetchDataList();
},
{ immediate: true }
);
</script>
在这个例子中，dataList 在模板中渲染。更新 props.id 和初始化时，会异步从服务器获取 dataList。
更新 props.disableList 和 props.type 时，会同步计算新的 dataList。
代码逻辑流程图如下：
乍一看，上面的代码可能没什么问题，但当不熟悉这方面的新同事接手时，问题就来了。
通常，在接手一个我们并不熟悉的业务领域时，我们需要找到一个起点。对于前端来说，这个起点肯定是浏览器中的渲染页面。从模版中我们可以知道 dataList 变量是核心所在，它有多个来源。
首先，服务器通过对 props.id 的监视进行异步更新。然后，通过对 props.disableList 和 props.type 的监视同步更新。
此时，不熟悉业务的同事如果收到要更新检索 dataList 逻辑的产品需求，就必须首先熟悉其多个来源背后的逻辑。
那么就要去看getListFromDisabledList、getListFromType例复杂的代码，分析清楚应该修改哪块才能满足产品要求。
不过，在实际操作中，当维护别人的代码（尤其是复杂的代码）时，我们一般不喜欢修改现有的代码，而是在上面添加自己的代码。更改他人的复杂代码很可能会引入错误（特别是有一些摸不着头脑的逻辑时），而我们也可能会因此造成生产事故。因此，我们通常的做法是添加另一个监视器，并在那里实现 dataList 的最新业务逻辑：
watch(
() => props.xxx,
() => {
// Add the latest business logic
const newList = getListFromXxx(dataList.value);
dataList.value = newList;
}
);
经过多次迭代后，这个 vue 文件就会变得杂乱无章，其中包含大量的观察语句，从而导致 "意大利面条代码"（Spaghetti Code 是一个编程术语，用于描述结构混乱、难以理解和维护的代码）。又或许这种编码风格可能是为了假装提高自己在团队中的价值，确保自己在团队中的地位，没有其他人敢碰这个复杂的代码。哈哈。
破局
上面这个例子，实际上是由于dataList的变更源过多引起的，而且里面还包含同步和异步两种。我们可以增加computed，把同步的变更整合到computed里，只保留异步的变更：
<template>
{{ renderDataList }}
</template>
<script setup lang="ts">
import { ref, computed, watch } from "vue";
const props = defineProps(["disableList", "type", "id"]);
const dataList = ref([]);
const renderDataList = computed(() => {
const newDataList = getListFromDisabledList(dataList.value);
return getListFromType(newDataList);
});
watch(
() => props.id,
() => {
fetchDataList();
},
{
immediate: true,
}
);
</script>
我们不再渲染 dataList 变量，而是渲染 renderDataList。代码逻辑流程图如下：
当新的团队成员收到迭代 dataList 相关业务的产品需求时，由于我们的整个业务逻辑现在已经变成了一个线性序列，因此新的团队成员可以快速理清业务逻辑。
然后，根据产品的要求，他们可以决定是修改同步逻辑还是修改异步逻辑。以下是修改同步逻辑的演示：
const renderDataList = computed(() => {
// 添加最新的处理逻辑
const xxxList = getListFromXxx(dataList.value);
const newDataList = getListFromDisabledList(xxxList);
return getListFromType(newDataList);
});
总结
我们应该更多地使用 computed 来处理同步逻辑，将异步逻辑保留在 watch 中的方法。 computed 本身具备缓存特性，通过使用computed，我们可以减少状态的数量，因为computed是计算属性，是一个中间结果，是因变量不是自变量。
-
滥用 watch 会导致代码难以维护: 当 watch 被用于处理多个复杂的同步和异步更新时，会导致代码变得杂乱无章，给维护和理解业务逻辑带来困难。
-
computed 和 watch 的适当使用可以提高代码质量: 将同步逻辑放入 computed 中，这样可以将业务逻辑线性化，使得代码更加清晰。同时，将异步逻辑保留在 watch 中，可以更好地区分和管理不同类型的更新。
-
优化后的代码结构有助于新成员快速上手: 通过将同步逻辑集中在 computed 中，新成员可以快速定位需要修改的业务逻辑，提高开发效率和代码的可维护性。
-
代码逻辑应该是线性和可追溯的: 代码逻辑应该像一个线程一样，从而使得业务逻辑的流向清晰明了，避免复杂的逻辑分叉和嵌套，这有助于代码的长期维护。
本文由 mdnice 多平台发布