Vue3 学习笔记，如何使用 Watch 监听数据变化( 二 )

2023-12-14 Vue3

在这个示例中，我们使用了 watch 来监听 userLocation 的变化，在用户位置发生变化时，使用 setCenter 方法将地图中心设置为用户当前位置，并使用 google maps API 在地图上添加一个标记，显示用户当前位置。

注意：这个例子需要引入 google maps 的 js 文件。

3、监听路由变化并执行相应操作

<template><!-- 省略 --></template><script>export default {watch: {$route(to, from) {// 根据路由变化执行相应操作if (to.path === '/home') {this.getHomeData()} else if (to.path === '/about') {this.getAboutData()}}},methods: {getHomeData() {// 获取首页数据},getAboutData() {// 获取关于页数据}}}</script>

【Vue3 学习笔记，如何使用 Watch 监听数据变化】4、监听窗口大小变化并调整布局

<template><!-- 省略 --></template><script>export default {data() {return {windowWidth: 0}},created() {this.windowWidth = window.innerWidth},watch: {windowWidth(newWidth, oldWidth) {// 监听窗口大小变化并调整布局if (newWidth < 768) {// 小屏幕布局} else {// 大屏幕布局}}},mounted() {window.addEventListener('resize', () => {this.windowWidth = window.innerWidth})}}</script>

5、监听滚动事件并实现懒加载

<template><div class="container" ref="container" @scroll="handleScroll"><img v-for="(item, index) in images" :key="index" :src=https://www.isolves.com/it/cxkf/qd/2023-12-14/"item.src" v-show="item.isLoaded" />

注意：需要注意的是，在这个案例中，因为images数组中的对象被改变了，所以需要设置deep: true来监听对象

总之，watch 是一个非常强大和灵活的功能，它可以在数据变化时执行任何操作，并且可以与 computed 计算属性配合使用，来实现更复杂的逻辑。
computed 和 watch 的区别watch和computed都可以监听Vue实例中的数据变化，但是它们有着明显的不同。
watch
computed
用于监听某个特定的数据变化。
用于计算属性，可以计算出一个新的值。
每次数据变化都会触发回调函数。
仅在相关依赖发生改变时才会触发重新计算。
适用于异步操作或复杂逻辑。
适用于简单计算。
不可以在html模板中使用
可以在HTML模板中使用
没有返回值
有返回值/getter
可以修改data中的数据
也可以使用setters 修改 data 中的数据
总之，如果你需要在数据变化时执行异步操作或复杂逻辑，使用watch是更好的选择；如果你需要在数据变化时计算出一个新值，使用computed是更好的选择。
关于watch的性能watch的性能取决于你的代码实现方式和监听的数据量。

监听的数据量：如果你监听了大量的数据，那么 watch 的性能可能会受到影响。
代码实现：如果你在 watch 回调函数中执行了复杂的逻辑或异步操作，那么 watch 的性能可能会受到影响。
如果你只是需要在数据变化时执行一些简单的操作，那么 watch 的性能应该是可以接受的。

所以,在使用watch时,应该注意监听的数据量,并且在watch回调函数中尽量少执行复杂的逻辑.总之,watch监听数据更新并执行回调函数，性能会受到监听数据量和回调函数实现方式的影响，如果有性能问题，应该优化监听的数据量和回调函数的实现方式.
结束今天的文章就介绍到这里，关于 watch 的用法你学会了，希望今天的文章能帮助到你，感谢你的阅读。如果你喜欢我的分享，别忘了点赞转发，让更多的人看到，最后别忘记点个关注，你的支持将是我分享最大的动力，后续我会持续输出更多内容，敬请期待。