Chrome extension input 性能问题

问题描述

input 表单再一个页面下出现非常非常严重的性能问题，输入非常卡顿，但是在其他页面引入该组件没有问题。另外，chrome 开发者工具调试性能开启后，瞬间丝滑。

问题出现的环境背景及自己尝试过哪些方法

环境 & 背景：

基于 Vue + Vue router + vuex + Vant UI 开发的 Chrome extension, 一个 popup 页面。

单独封装了一个 Rply.vue 的小组件，该组件很简单，只是显示一个输入框

<template> <van-popup v-model="showreplyPopup" position="bottom" :lock-scroll="false" :overlay="false" overlay-class="reply-popup" :style="{ height: '10%' }"> <p>{{ replyContent }}</p> <form class="reply-popup-form"> <textarea type="text" v-model="replyContent" placeholder="请留下您想说的" class="reply-popup-field" /> </form> </van-popup> </template> <script> export default { name: 'Reply', data() { return { showreplyPopup: true, replyContent: null, }; }, methods: { }, } 

在另外一个路由的单页引用该组件后，出现问题。但是，在最外层放置 router-view 的 App.vue 直接引用该组件却没有问题。

尝试

（ 1 ） 起初怀疑是为了实现快捷键能力，监听了按键事件导致的

export function keyDown(e) { const ESC_KEY_CODE = 27; const W_KEY_CODE = 87; const keyCode = e.which; const realKey = String.fromCharCode(e.which); console.log('按键码: ' + keyCode + ' 字符: ' + realKey); // 用户按下 Esc 键 if (keyCode === ESC_KEY_CODE) { e.preventDefault(); // 关闭图片预览 if (window.imagePreviewInstance) { window.imagePreviewInstance.close(); window.imagePreviewInstance = null; return; } // 路由回退一步 const meta = document.$router.history.current.meta; if (meta.routerLevel && meta.routerLevel > 1) { history.back(); } } // 按下 ctrl + w if (keyCode === W_KEY_CODE && (navigator.platform.match('Mac') ? e.metaKey : e.ctrlKey)) { e.preventDefault(); window.close(); } } document.Onkeydown= keyDown; 

但是注释后问题依旧。 （ 2 ）尝试使用 Chrome dev tool 的 Performance 排查，结果打开之后，瞬间就丝滑了起来，无果。 （ 3 ）在打包后的 popup 文件夹直接浏览器打开页面，不使用 Chrome extension 方式打开，无卡顿。 （ 4 ）不是浏览器卡了，尝试了重启浏览器。 （ 5 ）怀疑是 vue 的双向绑定导致，去掉 v-model，输入还是卡顿。

期待各位前端大神解答，或者给予排查的思路，非常感谢。