使用vue实例更好地监控事件和vue实例的方法

本文说明了如何在vue中更好地监控浏览器事件。原文介绍了一种添加vue实例的新方法，它可以独立监控事件。这样，代码编写简洁且易于管理。

听以下事件时，传统的做法是：

window . scroll xwindow . scroll window . inner height window . inner width通常需要编写大量代码：

创建了(){this。$ el.addeventlistener ('click '，this.somemethod)}，destroed(){ this。$ el.removeeventlistener ('click '，()=this.somemethod)}更好的方法是使用新的Vue实例

从“Vue”const WindowInstanceMap中导入Vue=new Vue({ data(){ return { scrolly : 0 } }，created(){ window . addeventlistener(' scroll ')，E={this。滚动=窗口。滚动})}，})导出默认的windowinstant map，然后在项目中使用它：

//来自“”的AppNav . vueimport WindowInstanceMap。/WindowInstanceMap . js ' export default { computed : { scrollY(){ return WindowInstanceMap . scrollY }，Iscalafferd(){ return this。scrolly100}}}这样做的优点是：

它不会占用开发工具的大量布局，显示变更信息，减少重大项目的代码。因为dev-tool不支持多实例调试，所以有必要保持这部分代码的简单并最终看到效果：

摘要

以上是边肖介绍的监视事件和vue实例的更好方法。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！