前言
用vue的watch属性的小伙伴应该就很熟悉监听这个概念,在chrome中,他以很贴心的给我们提供了两个方法,一个是monitor
,一个是monitorEvents
。这两个方法从事的也是监听相关的工作,不过 vue 中 watch 还是有点不同的,它可以监听我们的方法是否被调用,以及当前节点的事件。在某些情况下,对于我们的调试工作还是很有帮助的, 下面我们就来看看这两个方法是如何使用的把。
monitor
- monitor:
ƒ monitor(function) { [Command Line API] }
。可以监听任何你传入的方法,当方法被执行时,会在console
控制台中打印出来。包括调用的函数名,以及给相应函数传递的参数。
我们先声明一个info
实例,构造它的name 和 age
属性。并给他添加getName 和 getInfo
两个方法,在getInfo
内部调用 getName 方法。然后我们在通过monitor
监听getName
方法。看看会发生什么。
class Info { constructor(name, age) { this.name = name; this.age = age; } getName(){ return `我是${this.name}。` } getInfo() { return this.getName() + `我今年${this.age}岁`; } } 复制代码
我们可以看到,我们监听了monitor(getName)
方法,每次直接或间接调用的时候,都会在console
中输出日志。这样就可以避免写很多console.log()
了。
monitorEvents
- monitorEvents:ƒ monitorEvents(object, [types]) { [Command Line API] }。可以用来监听dom节点的
click、mouse
等等。打印mouseEvent
。
monitorEvents($$('.hot-refresh-text')[0], 'click') 复制代码
我们监听了换一换
的点击事件,当每次点击的时候,都会打印mouseEvent
实例。当然我们也监听change、blur以及mouse
等等。打开你的大脑,开发有趣的功能把。