江苏龙网

  1. 主页 > 生活百科 > >

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

Vue3

大家好，本篇文章我们继续学习和 Vue 相关的内容，今天我们归纳总结下如何使用 watch 监听组件中的数据变化，以及 computed 和 watch 的区别 。
什么是 watch ， 以及如何使用？watch 是 Vue.js 中用于监听数据变化的一种机制 。它允许我们在数据发生变化时执行特定的操作 。
在 Vue 中使用 watch 的方法如下：
1.在 Vue 组件中，定义一个 watch 对象，其中包含要监听的数据属性以及对应的回调函数 。
watch: {dataName: function(newValue, oldValue) {// code}}其中，dataName 是要监听的数据名称，newValue 是新的值，oldValue 是旧的值 。
2.在 Vue 实例中，使用 $watch() 方法进行监听
vm.$watch('someData', function(newVal, oldVal) {// do something with newVal});

注意：watch 回调函数会在侦听的数据发生变化时立即执行 ， 而 computed 属性只有在其依赖的数据发生变化时才会计算 。
watch 通常用于监听一个数据的变化并执行复杂的业务逻辑 ， 例如在某个数据变化后需要进行 HTTP 请求或者调用其他函数 。
下面是一个简单的 watch 的例子:
<template><div><input v-model="message" type="text" placeholder="请输入内容"><p>{{ message }}</p></div></template><script>export default {data() {return {message: '',}},watch: {message: function (newVal, oldVal) {console.log('message changed from ' + oldVal + ' to ' + newVal)}},}</script>在这个例子中，我们使用了 watch 来监听 message 的变化，并在数据变化时打印出更改前后的值 。
当然 ， watch 还可以接收一个对象，其中可以定义多个监听器 。这里有一个例子，它监听了多个数据：
watch: {firstName: function (newVal, oldVal) {console.log('firstName changed from ' + oldVal + ' to ' + newVal)},lastName: function (newVal, oldVal) {console.log('lastName changed from ' + oldVal + ' to ' + newVal)}}一些高级用法介绍1、深度观察 (deep: true)：如果你希望对对象内部属性的变化进行监听，可以使用 deep: true 选项 。
data() {user: {name: 'John',age: 25}},watch: {'user.name': function (val) {console.log('user name changed:', val)}}在这个例子中，我们监听了 user 对象中的 name 属性，当该属性变化时，会执行回调函数 。
2、设置初始值 (immediate: true)：如果你希望 watch 在组件创建时立即执行一次，可以使用 immediate: true 选项 。
data() {count: 0},watch: {count: {handler: function (val, oldVal) {console.log('count changed');},immediate: true}}3、异步处理 (handler)：watch 的回调函数是异步执行的，这意味着如果有多个值在短时间内发生变化，回调函数只会在这些变化结束后执行一次 。
watch: {searchText: function (val) {this.searching = truesetTimeout(() => {this.searchData(val)this.searching = false}, 500)}}在这个例子中 ， 我们监听了 searchText 属性 ， 并在数据变化后延迟 500 毫秒执行搜索操作 。
4、使用 watch 观察器实现自动保存
data() {content: ''},watch: {content: function (val) {localStorage.setItem('content', val)}}在这个例子中，我们监听了 content 属性，并在数据变化时自动保存到本地存储中 。
应用场景介绍watch 监听器还有许多其他的应用场景，例如：
  • 在表单输入时进行验证，并显示错误消息
  • 在表格中进行排序和过滤
  • 在地图上实时显示用户位置
  • 监听路由变化并执行相应操作
  • 监听窗口大小变化并调整布局
  • 监听滚动事件并实现懒加载
  • ……
1.在表单输入时进行验证，并显示错误消息
<template><form><label>EmAIl:<input v-model="email" @keyup="validateEmail"/></label><p v-if="error">{{ error }}</p></form></template><script>export default {data() {return {email: '',error: ''}},watch: {email: {immediate: true,handler(val) {if (!val.includes('@')) {this.error = 'Invalid email address'} else {this.error = ''}}}}}</script>2.在地图上实时显示用户位置
<template><div><div id="map"></div></div></template><script>export default {data() {return {userLocation: {lat: 0,lng: 0},map: null}},mounted() {this.map = new google.maps.Map(document.getElementById("map"), {center: { lat: 0, lng: 0 },zoom: 8});navigator.geolocation.getCurrentPosition(position => {this.userLocation = {lat: position.coords.latitude,lng: position.coords.longitude}});},watch: {userLocation: {deep: true,handler(val) {this.map.setCenter(val);new google.maps.Marker({position: val,map: this.map});}}}}</script>


推荐阅读


上一篇：快速上手 PostgreSQL：掌握PSQL 命令行工具连接技巧

下一篇：数据持久化的利器，Python中的Pickle模块详解