核心要点
- 诸如 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">修改姓名</button>
</div>
</template>
<script setup>
import { ref, watch } from 'vue';
const user = ref('张三');
const changeName = () => {
user.value = "李四"; // 修改用户姓名
};
watch(user, (newUser, oldUser) => {
alert(`用户名从 "${oldUser}" 更改为 "${newUser}"`);
});
</script>
在这个简单的组件中，我们使用监视功能来监听用户名的变化。模板部分定义了组件的 HTML 结构，其中包含一个用于显示用户响应式变量值的 <p> 标签。
此外，模板中还包含一个按钮元素，该按钮绑定了 changeName 函数作为点击事件的监听器。 当用户变量发生变化时，Vue 会触发回调函数，弹出警告框显示信息：“用户名已从 ‘张三’ 更改为 ‘李四’。”
观察者与计算属性的比较
理解观察者和计算属性之间的差异至关重要。尽管它们都属于 Vue 中的响应式工具，但应该在不同的场景下应用它们。
例如，你可以使用观察者计算父亲和儿子的年龄总和，如下所示：
<template>
<input type="text" placeholder="父亲年龄" v-model="father">
<input type="text" placeholder="儿子年龄" v-model="son">
<p>总年龄: {{ 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 时，可以创建响应式变量。
然后，该代码片段使用两个监视函数分别监听儿子和父亲的年龄。对于任何一个年龄的改变，都会将新值与另一个年龄相加，并将结果保存到 total 变量中。
现在，我们考虑使用计算属性来实现相同的功能：
<template>
<input type="text" placeholder="父亲年龄" v-model="father">
<input type="text" placeholder="儿子年龄" v-model="son">
<p>总年龄: {{ 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>
与之前的示例相比，这段代码更简洁且易于理解。它获取父亲和儿子的年龄总和，并将结果保存在计算得到的 total 响应式变量中。然后，模板部分通过插值（Vue 中的一种数据绑定技术）显示 total 变量。
尽管可以使用观察者来计算两个年龄的总和，但使用计算属性是更优的选择。在这种情况下使用观察者可能会导致加载速度变慢，并且调试过程也更加复杂，因为它涉及更多的代码。
总而言之，不要使用观察者来替代计算属性。当我们需要从已有的响应式数据派生出新的数据时，使用计算属性；当需要监测数据变化并做出响应时，使用观察者。
immediate 选项是创建观察者时可以使用的配置选项之一。此选项决定观察者是否应在 Vue 组件加载完成后立即触发回调函数。
以下是使用 immediate 选项的观察者组件示例：
<script setup>
import { ref, watch } from 'vue';
const count = ref(10);
watch(
count,
(newCount, oldCount) => {
console.log(`计数从 ${oldCount} 更改为 ${newCount}`);
},
{ immediate: true }
);
</script>
在上述代码片段中，观察者将在组件初始化后立即执行其回调，并在控制台中输出“计数从 undefined 更改为 10”。 这表明在 Vue 将值 10 注入计数引用之前，初始变量是未定义的。
当需要基于被监视属性的当前值执行初始操作或初始化时，immediate 选项会非常有用。例如，当应用需要在 Vue 组件安装后从 API 获取数据时。
Vue 观察者中的 Deep 选项
在 Vue 中使用观察者时，deep 选项可以深入监测嵌套对象或数组内部的变化。当设置为 true 时，观察者可以检测到嵌套属性的变化。
下面是一个带有 deep 选项的 Vue 组件示例：
<script setup>
import { ref, watch } from 'vue';
const data = ref({ length: 42 });
watch(
data,
(newData, oldData) => {
console.log(`数据已更改`);
},
{ deep: true }
);
// 这将触发观察者，因为它是一个深层改变
data.value.length = 43;
</script>
在上面的代码片段中，使用包含 length 属性的对象初始化了 data 引用。 代码片段将 deep 选项设置为 true。 由于 length 属性已更改为 43，它将在控制台中输出“数据已更改”的信息。
如果 deep 选项未设置为 true，那么 watch 函数将不会注意到对象的任何更改。 但是，当将 data 变量初始化为响应式对象时，Vue 将在没有 deep 选项的情况下跟踪所有嵌套和深层更改：
<script setup>
import { ref, watch } from 'vue';
const data = reactive({ length: 42 });
watch(
data,
(newData, oldData) => {
console.log(`数据已更改`);
}
);
// 这将触发观察者，因为它修改了一个响应式对象
data.length = 43;
</script>
上述代码片段中的监视函数会将数据更改记录到控制台，因为 data 变量是一个响应式对象。
使用 Vue 观察者构建更好的应用
Vue 的观察者可以帮助你在应用程序中实现更细致的响应性。它们控制着如何监测数据属性的变化，并根据这些变化执行自定义逻辑。
了解何时使用观察者、它们与计算属性的区别，以及 immediate 和 deep 等选项，可以显著提高您构建高性能 Vue 应用的能力。