Vue基础教程（67）使用监听器设计购物车效果：Vue监听器：让你的购物车告别“痴呆”，秒变“智能小管家”！

嘿，各位Vue萌新和奋战在一线的前端er们！今天，咱们不来虚的，就聊一个能让你的项目瞬间“高大上”起来的神器——Vue监听器。

想象一下这个场景：你吭哧吭哧写了个购物车，用户兴高采烈地加了几个商品，准备结算时却发现——咦，总价怎么没变？数量改了，小计还是老样子？这不就尴尬了吗！这种“痴呆”般的购物体验，分分钟劝退用户。

别慌，Vue的监听器，就是专治这种“数据迟钝综合征”的灵丹妙药。它就像你安排在数据身边的“贴身保镖”，数据一动，它立马知道，然后触发你预设好的“骚操作”。今天，咱就用它来设计一个反应敏捷、智商在线的智能购物车。

一、初识监听器：watch vs watchEffect，谁是你的菜？

Vue给了我们两员大将：watch 和 watchEffect。它俩都能“监听”，但性格迥异。

1. watch：目标明确的“侦察兵”

watch是个严谨的家伙。它只监听你明确指定的一个或多个“数据源”（比如一个ref、一个计算属性，甚至是一个函数返回值）。一旦这些数据源变了，它才执行你给的回调函数。

它的基本语法长这样：

watch(要监听的数据, (新值, 旧值) => {
  // 数据变了，我要干点啥！
}, {
  // 可选的配置项，比如深度监听、立即执行等
});

特点：

• 目标驱动： 你不告诉它监听谁，它就原地待命。
• 信息灵通： 回调函数能拿到数据的新值和旧值，方便你对比处理。
• 懒汉模式： 默认情况下，它不会在最初就执行一次。

2. watchEffect：激情四射的“行动派”

watchEffect则是个“直肠子”。它立即执行你传入的函数，并且在这个过程中，你函数里用到了哪些响应式数据，它就会自动把这些数据全部“跟踪”起来。任何一个被跟踪的数据变了，它都会重新执行整个函数。

watchEffect(() => {
  // 我在这里用到了谁，我就监听谁！
  // 函数会立即执行一次，然后依赖变了再执行。
});

特点：

• 自动追踪： 不用你显式声明监听源，自动收集依赖，省心！
• 立即执行： 一上来就先干一次活，适合做一些初始化的副作用。
• 没有历史： 拿不到旧值，只关心最新的状态。

小结选将：
对于购物车这种，我们需要明确知道“哪个商品的数量变了”、“是否选中状态改了”的场景，watch这位目标明确的侦察兵往往更合适。而watchEffect更适合那些依赖关系复杂，或者需要立即执行一次的场景（比如基于当前状态发起一个网络请求）。

二、实战！用watch<