watch 和 watchEffect 的适用场景

watch 和 watchEffect 的适用场景

1. 明确知道要监听的数据

当你知道需要监听哪些特定的响应式数据,并在这些数据变化时执行某些操作时,可以使用 watch

javascript 复制代码
javascript复制代码
	export default {  

	  data() {  

	    return {  

	      firstName: '',  

	      lastName: ''  

	    };  

	  },  

	  watch: {  

	    firstName(newVal, oldVal) {  

	      console.log(`First name changed from ${oldVal} to ${newVal}`);  

	    },  

	    lastName(newVal, oldVal) {  

	      console.log(`Last name changed from ${oldVal} to ${newVal}`);  

	    }  
               // deep: true  开启深度监听  
	  }  

	};

在这个例子中,我们明确知道要监听 firstNamelastName 这两个数据的变化,并在它们变化时输出日志。

watchEffect 的适用场合

1. 自动追踪依赖 (某个数据,方法等)

当你不确定要监听哪些数据,或者数据之间的依赖关系不明确时,可以使用 watchEffect。它会自动追踪组件内部使用的所有响应式数据,并在其中任何一个发生变化时触发回调。

javascript 复制代码
javascript复制代码
	export default {  

	  data() {  

	    return {  

	      firstName: '',  

	      lastName: ''  

	    };  

	  },  

	  mounted() {  

	    this.$watchEffect(() => {  

	      console.log(`Full name: ${this.firstName} ${this.lastName}`);  

	    });  

	  }  

	};

在这个例子中,watchEffect 会自动追踪 firstNamelastName 这两个数据的变化,并在它们中的任何一个发生变化时输出全名。

2. 处理副作用

watchEffect 特别适用于处理副作用,即那些依赖于响应式数据但又不直接修改数据的操作。

javascript 复制代码
javascript复制代码
	export default {  

	  data() {  

	    return {  

	      searchTerm: ''  

	    };  

	  },  

	  mounted() {  

	    this.$watchEffect(async () => {  

	      const results = await fetchSearchResults(this.searchTerm);  

	      this.results = results;  

	    });  

	  }  

	};

在这个例子中,我们使用 watchEffect 来监听 searchTerm 的变化,并在它变化时异步获取搜索结果。这里 fetchSearchResults 是一个假设的异步函数,用于获取与搜索词匹配的结果。当 searchTerm 变化时,watchEffect 会自动重新运行回调函数,并更新 results 数据。

总结来说,watch 更适合明确知道要监听哪些数据并需要更多控制选项的情况,而 watchEffect 则更适用于自动追踪依赖和处理副作用的场景。在实际开发中,应根据具体需求来选择使用哪一个。

相关推荐
web前端神器5 分钟前
指定阿里镜像原理
前端
枷锁—sha10 分钟前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha11 分钟前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
群联云防护小杜27 分钟前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
汉得数字平台1 小时前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹1 小时前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux
_丿丨丨_6 小时前
XSS(跨站脚本攻击)
前端·网络·xss
天天进步20156 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss
拾光拾趣录8 小时前
括号生成算法
前端·算法
拾光拾趣录9 小时前
requestIdleCallback:让你的网页如丝般顺滑
前端·性能优化