[Violation] Added non-passive event listener to a scroll-blocking ＜some＞ event. Consider marking eve

Vue项目 Chrome 报警告如下图：
[Violation] Added non-passive event listener to a scroll-blocking <some> event. Consider marking event handler as ‘passive’ to make the page more responsive. See <URL>

解决办法：
1.安装 default-passive-events

npm i default-passive-events -S -D

2.全局引入

import 'default-passive-events';

此时当我滚动鼠标滚轮放大缩小echarts地图时，新的问题出现了
直接报错 Unable to preventDefault inside passive event listener invocation.


看来还是得了解其本质原理才得行： 一句话， Chrome 对e.preventDefault()的检测机制不一样了。

也就是说当用户触发我们定义的监听事件时，浏览器会主动检测我们定义的监听事件内部代码中有没有让它阻止默认事件，有就它就阻止，莫得它就继续执行，这个过程增加了我们页面渲染响应的时间，使得用户体验不好。所以呢现在Chrome51 版本以后，Chrome 增加了新的事件捕获机制－Passive Event Listeners，它会知道我们页面内的事件监听器内部是否会调用e.preventDefault()来阻止浏览器事件的默认行为，浏览器根据这个信息就能更好地做出决策来优化页面性能。当我们不设置passive的值时，passive默认为true，也就意味着该监听事件为被动监听事件，那么浏览器将不会去检测该监听事件内部有没有阻止默认行为了，直接响应用户的操作。

规则就是：
a.当属性passive赋值为true时，代表告诉了浏览器该监听事件内部不会调用e.preventDefault()来阻止默认行为（被动监听事件）

window.addEventListener("mousewheel", handler, { passive:true }); 
// 注意 passive不设值时，默认为true
// window.addEventListener("mousewheel", handler); 

此时当我们在handler函数中去e.preventDefault()，肯定就会报错了撒，你定义的时候告诉别个不会有阻止默认事件代码，然后又写个代码去阻止，浏览器只有报错了

b.当属性passive赋值为false时，就定义了该监听事件不是一个被动监听事件

现在报错的原因找到了：那就是我们在一个被动监听事件中去e.preventDefault()阻止默认事件行为，所以需要阻止浏览器默认行为时，我们应该将该监听事件设置为非被动监听事件

关于Chrome51版本集成Passive Event Listeners新特性的相关知识参考了链接: https://blog.csdn.net/dj0379/article/details/52883315