理解 Vue 中的观察者

Vue 被设计为可动态扩展的，允许您快速开发可重用和可维护的组件，使用客户端数据绑定，并提供丰富的插件生态系统来增强其功能。

Vue 中可用的众多功能之一是 watcher 功能，它允许我们监视应用程序状态并根据这些更改触发操作。在本文中，我们将了解观察者在 Vue 中是如何工作的，它们可以做什么，以及如何利用它们来构建强大的应用程序。

• 什么是观察者？

• 使用观察者

  • 使用深度选项进行深度观看

  • 即时选项

• 观察者的示例场景

  • 观看打字状态

  • 实时转换器

  • 简单的倒计时

• 停止观察者

• 计算属性与观察者

什么是观察者？

Vue 中的观察者是一个特殊的功能，它允许我们观察一些数据并在数据发生变化时执行特定的操作。这是一种更通用的方式来观察和响应 Vue 实例中的数据变化。

有了观察者，我们不仅可以观察属性并执行自定义操作；我们还可以访问此特定属性正在更改的旧值，以及它已更改为的新值。

使用观察者

使用 Options API，我们可以利用 watch 选项来监听属性值的变化，如下所示：

<脚本>
导出默认 {
  数据（） {
    返回 {
      消息：“你好 Vue！”，
    };
  },
  手表： {
    消息（新值，旧值）{
      // 对 newValue 和 oldValue 做一些事情。
    },
  },
};
</脚本>

此外，我们还可以使用Composition API的watch()功能来完成同样的事情：

<脚本设置>
从“vue”导入{ ref, watch }；
const message = ref("Hello Vue!");
​
观看（消息，（新值，旧值）=> {
  // 对 newValue 和 oldValue 做一些事情。
});
</脚本>

因此，只要值发生message变化，我们就能够访问其新值或先前值并执行任何首选操作。

在随后的章节中，我们将研究在实际应用程序中使用观察者的更多实际示例。然而，在我们到达那里之前，让我们回顾一下观察者可用的所有选项。

deep使用选项进行深度观看

Vue.js 中观察者的默认行为是肤浅的；即，它们仅监视顶层数据的更改，并且不会对嵌套的属性更改做出反应。

例如，我们有一个对象数组：

<脚本>
导出默认 {
  数据（） {
    返回 {
      一些数据： [
        {
          编号：1，
          名称：“约翰”，
        },
        {
          编号：2，
          名称：“简”，
        },
      ],
    };
  },
  手表： {
    一些数据（新值，旧值）{
      console.log("someData 改变了！");
    },
  },
};
</脚本>

…并像我们上面所做的那样为这些数据设置一个观察者。当对象的属性发生变化时，例如当我们设置someData[0].id为随机数时，我们的观察者将不会被触发。

deep我们可以通过在我们的观察者中设置一个可选属性来解决这个问题true。但是，这将稍微改变创建观察者的语法，因为我们必须引入一个新的处理函数：

// . . .
手表： {
  一些数据： {
    处理程序（新值，旧值）{
      // console.log(newValue, oldValue);
      console.log("someData 改变了！");
    },
    深：真的，
  },
},

有了这个新增功能，即使嵌套属性发生变化，我们的观察者也会被触发。

此示例也可以使用watch()Vue 3 组合 API 中的函数复制，如下所示：

<脚本设置>
从“vue”导入{ ref, watch }；
​
常量 someData = ref([
  {
    编号：1，
    名称：“约翰”，
  },
  {
    编号：2，
    名称：“简”，
  },
]);
​
观看（一些数据，（新值，旧值）=> {
    console.log("someData 改变了！");
  },
  {
    深：真的，
  }
);
</脚本>

immediate选项_

除非您正在观看的值已更改，否则不会立即激活观察者。但在某些情况下，我们可能希望使用我们正在观察的属性的初始值执行某些操作。例如，我们的应用程序可能要求我们发送一个包含初始数据的 API 请求，然后如果数据发生变化则重复该过程。

---

超过 20 万开发人员使用 LogRocket 来创造更好的数字体验了解更多 →

---

我们可以像在前面的示例中那样使用处理函数来强制观察者立即执行，并将其immediate选项设置为true：

<脚本>
导出默认 {
  数据（） {
    返回 {
      消息：“你好 Vue.js！”，
    };
  },
  手表： {
    信息： {
      处理程序（val）{
        控制台.log(val);
      },
      立即：真实，
    },
  },
};
</脚本>

通过这样做，我们可以让我们的观察者在我们的应用程序启动后立即采取某种行动，并在我们正在观察的属性在未来发生变化时继续这样做。

使用 Vue 3，immediate还可以将选项添加到可选对象中，如下所示：

<脚本设置>
从“vue”导入{ ref, watch }；
const message = ref("Hello Vue!");
​
手表（
  信息，
  (newValue) => {
    控制台.log(newValue);
  },
  {
    立即：真实，
  }
);
</脚本>

此外，Composition API 引入了一种新方法，该方法与将 immediate 选项设置watchEffect()为 非常相似。然而，虽然函数/选项只跟踪显式监控的源，但会自动跟踪在其执行过程中访问的每个反应属性：watch()truewatch``watchEffect()

<脚本设置>
从“vue”导入{ ref，watchEffect }；
const foo = ref("Hello world!");
const bar = ref("你好！");
​
watchEffect(() => {
  控制台.log(foo.value);
  控制台.log(bar.value);
});
</脚本>

foo以这种方式，和的初始值bar被记录到控制台，并且将在它们的值发生变化时继续被记录。

观察者的示例场景

为了进一步了解观察者在现实生活中的应用程序是如何工作的，让我们看一些实际的例子。

观看打字状态

一个简单直观的观察者实验是一个应用程序，它观察输入状态并在用户输入时执行某些操作：

<模板>
  <div>
    <input type="text" v-model="message" />
    <p v-if="typing">正在输入...</p>
  </div>
</模板>

<脚本设置>
从“vue”导入{ ref, watch }；

常量消息 = ref("");
常量类型 = ref(false);

观看（消息，（值）=> {
  打字。值=真；
  设置超时（（）=> {
    打字。值=假；
  }, 2000);
});
</脚本>

在这个例子中，我们创建了两个反应状态（message和typing）。然后我们将 绑定message到一个输入元素并为它创建一个观察者，这样每当它发生变化时，我们将typing值设置为falseto并在 2 秒后true自动将其设置回。false

当我们在浏览器中运行这个例子时，我们会得到以下结果：

虽然此示例是基本示例，但您可以更进一步，向远程 API 发送请求并根据此请求的响应更新您的标记，类似于 Google 等搜索引擎在您键入时提供搜索建议的方式。

实时转换器

另一个交互式示例是一个简单的转换器应用程序，其中可以根据不同的输入点影响和计算输出。

就像下面的代码一样，我们创建了一个温度转换器，其中华氏值可以通过输入摄氏度值来计算，反之亦然：

<模板>
  <div class="居中">
    <div>
      <label for="celsius">摄氏度</label>
      <input type="text" v-model="tempCelsius" id="celsius" />
    </div>
    <p style="font-size: 30px; margin: 0; font-weight: 600">=</p>
    <div>
      <label for="fahrenheit">华氏度</label>
      <input type="text" v-model="tempFahrenheit" id="fahrenheit" />
    </div>
  </div>
</模板>

<脚本设置>
从“vue”导入{ ref, watch }；

const tempCelsius = ref(null);
const tempFahrenheit = ref(null);

手表（温度摄氏度，（新值）=> {
  tempFahrenheit.value = Math.round((newValue * 9) / 5 + 32);
});

手表（华氏温度，（新值）=> {
  tempCelsius.value = Math.round(((newValue - 32) * 5) / 9);
});
</脚本>

运行它也会给我们下面的输出：

简单的倒计时

为了查看该watchEffect()功能的实际效果，我们还在下面创建了一个简单的倒计时计时器应用程序，它将在我们的应用程序安装后 10 秒开始计数，并在计时器达到 5 秒时结束：

<模板>
  <div class="居中">
    <h1>{{ 计数器 }}</h1>
  </div>
</模板>

<脚本设置>
从“vue”导入{ ref，watchEffect }；
常量计数器 = ref(10);

watchEffect(() => {
  if (counter.value > 5) {
    设置超时（（）=> {
      counter.value--;
    }, 1000);
  }
});
</脚本>

这背后的逻辑非常简单。我们创建了counter一个值为 10 的反应属性。然后我们创建了一个watchEffect()将每秒连续减少 1 的计数器，并在其值为 5 时停止。

---

停止观察者

当父组件卸载时，watcher 会自动停止，并且在大多数情况下，您不需要手动结束 watcher。但是，在某些情况下，您可能想要停止观察者，i酷浏览器App，全网影视资源任意看，支持自定义选择点播资源！可能是在满足条件时，这样做非常简单。

使用 Composition API，我们只需将观察者分配给自定义变量，然后调用此变量来停止观察者，如下所示：

const unwatch = watch(foo, (value) => {
  // ...
});

// 停止观察者
不看（）；

同样也适用watchEffect()。然而，使用 Options API，我们只能以编程方式停止观察者，如果它是使用this.$watch()方法创建的，而不是通过观察者选项创建的：

<脚本>
导出默认 {
  数据（） {
    返回 {
      富：空，
    };
  },
  创建（）{
    const unwatch = this.$watch("foo", (value) => {
      控制台.log（值）；
    });
​
    设置超时（（）=> {
      不看（）；
    }, 5000);
  },
};
</脚本>

在这个例子中，我们在应用的 created 钩子中建立了一个新的 watcher，5 秒后，我们停止了 watcher。

计算属性与观察者

关于何时使用计算属性以及何时使用观察者存在很多不确定性。尽管如此，本节可以澄清这种情况。

计算属性用于根据其他一些条件计算属性的值。另一方面，观察者主要不用于更改属性的值；相反，它们用于在值发生更改时通知您，并让您根据这些更改执行某些操作。

当您需要获取对象的当前值并在逻辑中使用它时，应该使用计算属性，例如基于它计算某些东西。当您需要知道一个或多个值何时发生变化并做出相应反应时，应该使用观察者。

结论

观察者是 Vue 中的一个强大功能。它们使我们能够对系统中的变化立即做出动态反应。

如果一个观察者被添加到一个元素中，任何时候它发生变化，我们都可以对这个变化采取行动。虽然这看起来像是一个极端情况，但它是一个很好的例子，说明了能够对变化做出反应如何是有用的。在本文中，我们能够详细介绍如何使用观察者及其可用选项。此外，我们还研究了如何在实际应用程序中使用观察者的各种实际示例。