非被动滚动事件处理程序的控制台警告 [英] Console warnings for non-passive scroll event handlers

问题描述

当我使用Bootstrap-vue中的Form Select时出现此控制台错误.我正在使用谷歌浏览器.

I'm getting this console error when I use Form Select from bootstrap-vue. I'm using google chrome.

[Violation]向滚动阻止的"mousewheel"事件添加了非被动事件侦听器.考虑将事件处理程序标记为被动"，以使页面更具响应性.

[Violation] Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marking event handler as 'passive' to make the page more responsive.

我正在使用axios从api获取此数据.请参见下面的代码.

I'm getting this data from a api, using axios. See the code below.

<b-form-select v-model="selected" class="mb-3">
    <option :value="null">Select a group</option>
    <option v-for="group in groupItem" :value="group.id">
        {{group.name}}
    </option>
</b-form-select>

推荐答案

它与新的事件侦听器选项有关，更多这里

It's related to the new event listener options, more here and here

有一个新的选项对象可以传递给addEventListener.应该为页面上的被动事件侦听器传递{被动:true}选项，以提高滚动性能.

There is a new options object that can be passed to the addEventListener. The passive event listeners on the page should be passed the { passive: true } option to improve scroll performance.

document.addEventListener('touchstart', handler, { passive: true });

警告仅是一项性能建议，并不是真正的主要关注或问题，尽管性能改进始终是好的.

The warning is only a performance recommendation, not really a major concern or issue, although performance improvements are always good.

在bootstrap-vue上已经报告了问题资料库.您可以通过提交拉取请求或等待其他人来解决它.

An issue has already been reported at the bootstrap-vue repository. You can fix it by either submitting a pull request, or waiting for someone else to do it.

这篇关于非被动滚动事件处理程序的控制台警告的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！