Vue.js 实例：watch 监听路由与对象变化详解

"本文将详细介绍如何在Vue.js应用中使用`watch`来监听路由变化以及对象属性的变化，提供具体的代码示例，旨在帮助开发者更好地理解和掌握这一功能。" 在Vue.js框架中，`watch`是用于监听数据变化的重要工具，它可以让我们在数据发生变化时执行特定的函数。本篇将主要探讨两种情况：一是利用`watch`监听路由变化，二是监听对象属性的变化。 一、`watch`监听路由变化 在Vue Router中，我们可以利用`watch`来监听 `$route` 对象，以便在路由发生改变时执行相应的处理。下面是一个简单的例子： ```javascript export default { data() { return {}; }, watch: { "$route": "getPath", // 监听$router的变更事件 }, methods: { getPath() { let path = this.$route.path; // 获取当前路径 // 在这里进行逻辑判断或处理 console.log("当前路径:", path); }, }, }; ``` 在这个例子中，我们定义了一个名为`getPath`的方法，当路由发生变化时，这个方法会被调用。你可以根据实际需求在这里添加你需要执行的代码，例如加载对应路由的数据或者执行其他操作。 二、`watch`监听对象 Vue.js同样支持监听对象的属性。以下是一个使用`watch`监听`el-select`组件选择值变化的示例： ```html <el-select v-model="form.region" placeholder="请选择"> <el-option v-for="item in rootCategory" :key="item.id" :label="item.name" :value="item.id"> </el-option> </el-select> ``` 在Vue组件中，`v-model`绑定了`form.region`属性，当我们需要在`form.region`的值发生变化时执行某些操作，可以这样做： ```javascript export default { data() { return { form: { region: "", }, }; }, watch: { 'form.region': function (newValue, oldValue) { console.info(newValue); // 新的值 console.info(oldValue); // 旧的值 // 在这里可以处理region值变化的逻辑 }, }, }; ``` 在这个示例中，`watch`对象中的`'form.region'`是监听的属性，当`form.region`的值改变时，对应的回调函数会被调用，`newValue`参数表示新的值，`oldValue`参数表示之前的值。你可以根据这两个值进行比较和处理，比如发送API请求更新数据或者执行其他业务逻辑。 总结，Vue.js中的`watch`是实现响应式编程的关键部分，它使得我们在数据变化时能够自动执行相应的处理，无论是针对单一数据还是复杂的数据结构如对象。通过合理地运用`watch`，可以极大地提升我们的开发效率和代码的可维护性。