Vue入门到精通—核心语法—监听
计算属性在Vue中是一个非常强大的特性，它允许开发者根据一个或多个数据源进行同步计算，并返回一个新的值用于显示。当这些依赖的数据发生变化时，计算属性会自动重新执行，并返回一个新的值以更新显示。然而，在某些情况下，我们可能需要在依赖数据变化时触发一些额外的操作，比如直接更新DOM或者执行异步操作后更新其他数据。这时候，我们可以使用Vue的监听语法来实现这些需求。
1.监听的基本使用
在Vue.js中，选项式API提供了一种便捷的方式来监听数据的变化。通过使用watch选项，开发者可以为特定的响应式属性设置一个监听函数，以便在这些属性的值发生变化时执行特定的逻辑。
watch选项的基本语法格式如下：
new Vue({
// ...
watch: {
// 要监听的属性名
propertyName: function (newValue, oldValue) {
// 当propertyName变化时, 会调用这个函数
// newValue是新的值, oldValue是旧的值
}
}
// ...
});
下面是我们利用监听来实现的效果。
现有两个需求，具体如下。
①输入标题，实时同步显示到页面标题上。
②输入标题，实时AJAX请求获取一个最匹配的问题并显示到输入框下面。
下面我们对需求进行分析：输入的标题可以通过v-model收集到data对象中的title属性上，同时用watch选项来监听title属性的变化，在监听回调函数中将最新的值设置给文档的标题。同时发送AJAX请求，根据title属性获取一个最匹配的问题并设置给data对象中的question属性，显示到输入框下面。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>基本使用</title>
</head>
<body>
<div id="app">
标题: <input type="text" placeholder="输入内容同步到标题" v-model="title" /><br />
问题: <span>{
{
question }}</span>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.47/vue.global.min.js"></script>
<script>
const {
createApp } = Vue
createApp({
data() {
return {
title: '',
question: '',
}
},
watch: {
title(newVal, oldVal) {
console.log(newVal, oldVal)
// 直接更新DOM
document.title = newVal
// 模拟请求异步获取对应的答案
setTimeout(() => {
const question = `${
newVal}最匹配的问题?`
this.question = question
}, 500)
},
},
}).mount('#app')
</script>
</body>
</html>
代码解释：
（1）const { createApp } = Vue;: 从Vue库中解构出createApp方法。
（2）createApp({ … }): 创建一个Vue应用实例。
（3）data() { return { title: ‘’, question: ‘’, }; }: 定义应用的数据对象，包含两个属性：title和question，初始值均为空字符串。
（4）watch: { title(newVal, oldVal) { … } }: 监听title属性的变化。当title发生变化时，执行回调函数。
- console.log(newVal, oldVal);: 打印新旧值到控制台。
- document.title = newVal;: 将浏览器标签页的标题设置为新的title值。
- setTimeout(() => { … }, 500);: 模拟一个异步操作（例如网络请求），延迟500毫秒后执行回调函数。
const question =${newVal}最匹配的问题；根据新的title值生成一个问题字符串。
this.question = question；更新Vue实例中的question属性，触发视图更新。
（5）.mount(‘#app’): 将Vue实例挂载到ID为app的元素上。
效果如下：
2.即时回调与深度监听
在Vue中，即时回调和深度监听是两个重要的特性，它们允许开发者更精细地控制数据变化时的行为。
（1）即时回调
即时回调指的是在watch侦听器被创建时，立即以当前的值触发回调函数，而不需要等待监听的数据发生变化。这可以通过在watch选项中设置immediate: true来实现。例如：
watch: {
firstName: {
handler(newName, oldName) {
this.fullName = newName + ' ' + this.lastName;
},
immediate: true // 立即执行回调
}
}
这样，当watch被声明后，会立即执行handler方法，并且之后每当firstName变化时，handler方法也会被触发。
（2）深度监听
深度监听是指对一个对象进行监听时，不仅监听对象本身的引用变化，还监听对象内部属性的变化。在Vue中，可以通过在watch选项中设置deep: true来实现深度监听。例如：
watch: {
obj: {
handler(newVal, oldVal) {
console.log('obj.a changed');
},
deep: true // 深度监听
}
}
设置deep为true后，监听器会递归地监听对象的所有属性，这样就可以检测到对象内部属性的变化。但是，深度监听可能会带来性能开销，因为它需要递归遍历对象的所有嵌套属性。因此，只有在确实需要时才使用深度监听，并注意其对性能的影响。
即时回调允许我们在watch侦听器创建时立即执行回调，而深度监听允许我们监听对象内部属性的变化。