耀极客论坛

 找回密码
 立即注册
查看: 427|回复: 0

vue watch监听方法总结

[复制链接]

336

主题

318

帖子

22万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
220553
发表于 2022-5-9 01:55:25 | 显示全部楼层 |阅读模式
  这篇文章主要给大家分享的是vue watch监听方法总结,侦听器一般来说是用来监听数据的变化,默认是在数据发生变化时执行。监听的数据名放到这里面作为函数名,这个函数里面有两个参数,一个是新值,一个是旧值。下面我们就一起进入文章了解更具体的内容吧
  在vue中,使用watch来响应数据的变化,关于watch的用法大致有三种。

1.vue中的watch作用就如其命名就是监听的作用

  比如有个对象:
  1. watchData: {
  2.     name: '',
  3.     age: '',
  4. }
复制代码
2.监听这个对象的属性
  1. watchData: {
  2.     handler: function() {
  3.         console.log();
  4.     },
  5.     deep: true
  6. }
复制代码
  监听对象可以用deep,深度监测,不然监测不到对象的变化

3.监听这个对象的属性

  方式一:
  1. watch: {
  2. 'watchData.name'(newValue, oldValue) {
  3.      console.log(newValue);
  4. }
  5. }
复制代码
  方式二:
  1. watch: {
  2.     'watchData.name': {
  3.         handler: function() {
  4.             console.log();
  5.         }
  6.     }
  7. },
复制代码
  为什么要监听对象的属性,监听对象的话,一旦对象内部的任何数据变化,都会导致watch重新执行,这样的话可能不是你想要的监听某一个属性变化才执行watch,或者是一旦说对象内部任何一个属性变化就让其watch执行,也会对性能有一定性的损耗,所以我们用这种监听对象单个属性的方式来处理,给要监听的“对象.属性,用引号包裹起来”

4.监听这个对象的属性
  1. computed: {
  2.     getName() {
  3.         return this.watchData.name
  4.     }
  5. },
  6. watch: {
  7.     getName(newValue, oldValue) {
  8.         console.log(newValue);
  9.     }
  10. },
复制代码
  这种方式其实和第二种是一样的,区别就是用到了computed,然后再监听方法getName,实际上方法getName返回的就是watchData对象中的name属性
  到此这篇关于vue watch监听方法总结的文章就介绍到这了,更多相关vue watch监听方法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|耀极客论坛 ( 粤ICP备2022052845号-2 )|网站地图

GMT+8, 2022-11-28 20:31 , Processed in 0.079745 second(s), 20 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表