目录

​编辑

前言

1. 基本用法：

2. 深度监听：

3. 立即执行：

4. 监听多个数据：

5. 清理监听器：

6. 监听路由变化：

总结：

我的其他博客

---

 

前言

在Vue.js中，watch是一种用于监听数据变化并执行相应操作的机制。下面详细讲解Vue的watch的使用和原理：

1. 基本用法：

在Vue组件的watch选项中，我们可以监听一个数据，并在数据变化时执行相应的回调函数。例如：

export default {data() {return {message: 'Hello, Vue!',};},watch: {message(newValue, oldValue) {console.log('Message changed:', newValue, oldValue);},},
};

2. 深度监听：

如果需要深度监听对象或数组内部的变化，可以使用deep选项：

watch: {data: {handler(newValue, oldValue) {// 处理逻辑},deep: true,},
}

3. 立即执行：

默认情况下，watch监听的回调函数是在数据变化之后才执行的，如果需要在组件初始化时立即执行一次，可以使用immediate选项：

watch: {data: {handler(newValue, oldValue) {// 处理逻辑},immediate: true,},
}

4. 监听多个数据：

watch可以监听多个数据，可以是数组，也可以是对象：

watch: {'data.value': function(newValue, oldValue) {// 处理逻辑},'otherData': [function(newValue, oldValue) {// 处理逻辑},{handler: function(newValue, oldValue) {// 处理逻辑},deep: true,},],
}

5. 清理监听器：

watch返回一个用于停止观察的函数，可以在组件销毁时手动停止监听：

export default {data() {return {message: 'Hello, Vue!',};},watch: {message(newValue, oldValue) {console.log('Message changed:', newValue, oldValue);},},beforeDestroy() {// 在组件销毁前停止监听this.$options.watch.message = null;},
};

6. 监听路由变化：

在Vue Router中，可以使用$route来监听路由变化：

watch: {'$route'(to, from) {// 处理路由变化},
}

 

总结：

watch是Vue中强大的数据监听机制，通过灵活的选项，可以满足不同场景下的数据监控需求。深入理解watch的使用和原理，有助于更好地利用Vue的响应式系统，实现更复杂的数据流控制。

我的其他博客

探索灵活性与可维护性的利器：策略（Strategy）模式详解-CSDN博客

深入探讨敏捷开发项目管理流程与Scrum工具：构建高效团队与卓越产品的秘诀-CSDN博客

vue的生命周期-CSDN博客

什么是tomcat？tomcat是干什么用的？-CSDN博客

Linux 压缩、解压文件的 4 种方式。tar、gzip、gunzip、zip、unzip、7z命令使用方法-CSDN博客

腾讯-轻量应用服务器centos7中宝塔安装MySQL8.0出现内存不足-CSDN博客

JVM的类的生命周期-CSDN博客

多线程------Future异步任务-CSDN博客