目录
要点
- Vue 等 JavaScript 框架提供组件架构、状态管理和路由等功能来简化 Web 应用程序开发。
- Vue 观察程序是监视反应性属性变化并允许您对事件和数据修改做出反应的函数。
- 与观察者和计算属性相比，计算属性更简洁且更易于阅读，从而带来更好的性能和调试。
JavaScript 框架已成为 Web 开发的重要组成部分。 这是由于它们易于访问的功能，包括组件架构、状态管理和路由。 这些有助于减少从头开始构建 Web 应用程序所需的压力、精力和时间。
Vue 是这些框架之一，提供了许多加速开发的功能。 监视功能使您可以在程序执行期间监视变量和表达式的值。
Vue 中的观察者是什么？
Vue 观察者是监视响应属性变化并做出相应响应的函数。 观察者让您对事件和数据修改做出反应。
要使用观察程序，请从脚本中的 vue 包导入 watch 函数：
<script setup>
import { watch } from 'vue';
</script>
现在，您可以使用 watch 函数在 Vue 组件中实现观察程序。 这是一个简单的例子：
<template>
<div>
<p>{{ user }}</p>
<button @click="changeName">Change Name</button>
</div>
</template><script setup>
import { ref, watch } from 'vue';const user = ref('Chinedu');
const changeName = () => {
user.value="Victor"; // Change the user's name
};watch(user, (newUser, oldUser) => {
alert(`User name changed from "${oldUser}" to "${newUser}"`);
});
</script>
这个简单的组件使用监视功能来监视用户名的更改。 代码片段的模板部分定义了组件的 HTML 结构，其中包括显示用户反应变量值的 ap 标记。
该模板还包含一个按钮元素，其中有一个附加到单击事件侦听器的changeName 函数。 当用户变量发生变化时，Vue 会触发回调函数。 回调函数显示一条警告：“用户名已从“Chinedu”更改为“Victor”。”
将观察者与计算属性进行比较
了解观察者和计算属性之间的区别很重要。 尽管它们都用作 Vue 中的反应性工具，但您应该将它们用于不同的目的。
例如，您可以使用观察者计算父亲和儿子的年龄总和，如下所示：
<template>
<input type="text" placeholder="Father's Age" v-model="father">
<input type="text" placeholder="Son's Age" v-model="son">
<p>Total Age: {{ total }}</p>
</template><script setup>
import { ref, watch } from 'vue';const father = ref();
const son = ref();
const total = ref();watch(son, (newAge, oldAge) => {
total.value = Number(father.value) + Number(newAge)
})watch(father, (newAge, oldAge) => {
total.value = Number(newAge) + Number(son.value)
})</script>
这个 Vue 组件使用观察者来获取父亲和儿子的年龄总和。 为此，它创建了一个新的反应变量 Total。 当您使用 Vue 的 Composition API 时，您可以创建响应式变量。
然后，该代码片段使用两个监视函数来监视儿子和父亲的年龄。 对于每个年龄，无论是父亲还是儿子，该片段都会将新值与另一个年龄相加。 然后它将结果保存到总无功变量中。
考虑上面代码片段中与使用计算属性的场景相同的场景：
<template>
<input type="text" placeholder="Father's Age" v-model="father">
<input type="text" placeholder="Son's Age" v-model="son">
<p>Total Age: {{ total }}</p>
</template><script setup>
import { ref , computed } from 'vue';const father = ref();
const son = ref();const total = computed(() => {
return Number(father.value) + Number(son.value);
});</script>
与前者相比，该片段更简洁且更易于阅读。 该代码片段获取父亲和儿子的年龄总和，并将其保存在计算得出的 ref（变量）total 中。 然后，模板部分使用插值（Vue 中的一种数据绑定技术）显示总变量。
即使您可以通过观察者获得两个年龄的总和，最好使用计算属性来实现。 在这种情况下使用观察程序可能会导致加载时间变慢和调试更加困难，因为它涉及更多代码。
不要使用观察者来替代计算属性。 当您想要从现有反应数据派生新数据时，使用观察程序来监视数据更改和计算属性并对其做出反应。
直接选项是您在创建观察者时可以使用的配置。 该选项决定观察者是否应该在 Vue 安装组件后立即触发回调。
以下是使用带有立即选项的观察程序的组件的示例：
<script setup>
import { ref, watch } from 'vue';const count = ref(10);
watch(
count,
(newCount, oldCount) => {
console.log(`Count changed from ${oldCount} to ${newCount}`);
},
{ immediate: true }
);
</script>
在上面的代码片段中，观察者将在组件初始化后立即执行其回调，并将“计数从未定义更改为 10”记录到控制台。 这表明在 Vue 将值 10 注入计数引用之前，初始变量是未定义的。
在您想要根据监视属性的当前值执行初始操作或初始化的情况下，立即选项会很方便。 例如，当您需要应用程序在 Vue 安装组件后从 API 获取数据时。
Vue Watchers 中提供的 Deep 选项
在 Vue 中使用观察者时可用的深度选项可以深入观察嵌套对象或数组内的变化。 当设置为 true 时，观察者可以检测嵌套属性内的更改。
下面是带有 deep 选项的 Vue 组件的示例：
<script setup>
import { ref, watch } from 'vue';const data = ref({ length: 42 });
watch(
data,
(newData, oldData) => {
console.log(`Data changed"`);
},
{ deep: true }
);// This will trigger the watcher because it's a deep change
data.value.length = 43;
</script>
上面的代码片段使用包含 length 属性的对象初始化数据引用。 该代码片段将 deep 选项设置为 true。 然后，它会将数据已更改的信息记录到控制台，因为长度属性已更改为 43。
如果没有将 deep 选项设置为 true，watch 函数将不会注意到对象的任何更改。 但是，当您将数据变量初始化为响应式对象时，Vue 会在没有 deep 选项的情况下跟踪所有嵌套和深层更改：
<script setup>
import { ref, watch } from 'vue';const data = reactive({ length: 42 });
watch(
data,
(newData, oldData) => {
console.log(`Data changed"`);
}
);// This will trigger the watcher because it changes a reactive object
data.length = 43;
</script>
上面代码片段中的监视函数会将数据更改记录到控制台，因为数据变量是反应性对象。
使用 Vue Watchers 构建更好的应用程序
Vue 的观察者可以帮助您在应用程序中实现细粒度的反应性。 它们控制您如何观察数据属性的变化并运行自定义逻辑作为响应。
了解何时使用观察者、它们与计算属性的差异以及立即和深度等选项可以显着增强您构建响应速度非常快的 Vue 应用程序的能力。
