文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2024-11-30 03:56

关注

大家好,本篇文章我们继续学习和 Vue 相关的内容,今天我们归纳总结下如何使用 watch 监听组件中的数据变化,以及 computed 和 watch 的区别。

什么是 watch,以及如何使用?

watch 是 Vue.js 中用于监听数据变化的一种机制。它允许我们在数据发生变化时执行特定的操作。

在 Vue 中使用 watch 的方法如下:

在 Vue 组件中,定义一个 watch 对象,其中包含要监听的数据属性以及对应的回调函数。

watch: {
  dataName: function(newValue, oldValue) {
    // code
  }
}

其中,dataName 是要监听的数据名称,newValue 是新的值,oldValue 是旧的值。

在 Vue 实例中,使用 $watch() 方法进行监听

vm.$watch('someData', function(newVal, oldVal) {
  // do something with newVal
});

注意:watch 回调函数会在侦听的数据发生变化时立即执行,而 computed 属性只有在其依赖的数据发生变化时才会计算。

watch 通常用于监听一个数据的变化并执行复杂的业务逻辑,例如在某个数据变化后需要进行 HTTP 请求或者调用其他函数。

下面是一个简单的 watch 的例子:



在这个例子中,我们使用了 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)
  }
}

一些高级用法介绍

深度观察 (deep: true):如果你希望对对象内部属性的变化进行监听,可以使用 deep: true 选项。

data() {
  user: {
    name: 'John',
    age: 25
  }
},
watch: {
  'user.name': function (val) {
    console.log('user name changed:', val)
  }
}

在这个例子中,我们监听了 user 对象中的 name 属性,当该属性变化时,会执行回调函数。

设置初始值 (immediate: true):如果你希望 watch 在组件创建时立即执行一次,可以使用 immediate: true 选项。

data() {
    count: 0
},
watch: {
    count: {
        handler: function (val, oldVal) {
            console.log('count changed');
        },
        immediate: true
    }
}

异步处理 (handler):watch 的回调函数是异步执行的,这意味着如果有多个值在短时间内发生变化,回调函数只会在这些变化结束后执行一次。

watch: {
  searchText: function (val) {
    this.searching = true
    setTimeout(() => {
      this.searchData(val)
      this.searching = false
    }, 500)
  }
}

在这个例子中,我们监听了 searchText 属性,并在数据变化后延迟 500 毫秒执行搜索操作。

使用 watch 观察器实现自动保存。

data() {
  content: ''
},
watch: {
  content: function (val) {
    localStorage.setItem('content', val)
  }
}

在这个例子中,我们监听了 content 属性,并在数据变化时自动保存到本地存储中。

应用场景介绍

watch 监听器还有许多其他的应用场景,例如:

1、在表单输入时进行验证,并显示错误消息



2、在地图上实时显示用户位置



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

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

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



4、监听窗口大小变化并调整布局



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



注意:需要注意的是,在这个案例中,因为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 的用法你学会了,希望今天的文章能帮助到你,感谢你的阅读。

来源:今日头条内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯