vue页面数据量太多的时候，input输入搜索框在输入时卡动问题解决

最新推荐文章于 2024-03-03 14:12:54 发布
最新推荐文章于 2024-03-03 14:12:54 发布
阅读量2.2k 收藏 3
点赞数 1
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40055200/article/details/128495017
版权

1.要找到卡顿的原因

2.定义哪里卡顿；页面中有哪些冗余；业务逻辑的多的代码；

3.卡顿功能的代码逻辑

4.想办法解决 

//不成功的使用方法
<el-input v-model.lazy="code" placeholder="code"></el-input>
//成功的使用方法("el-textarea__inner"类可以让样式与框架一致)
<input class="el-textarea__inner" v-model.lazy="code" placeholder="请输入内容"></input>

qq_40055200
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue 页面渲染数据量大，导致input输入框卡顿的问题
Samar_319的博客
04-13 4252
解决方法： 把数据量大的那部分抽离成单个组件去渲染 Vue的异步响应式与v-model 对于Vue的响应式，官网上是这么定义的： Vue 在更新DOM时是异步执行的。只要侦听到数据变化，Vue将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个watcher被多次触发，只会被推入到队列中一次。 但是奇怪的事情发生在v-model上，它的数据更新并不是多次变更和一次来更新DOM，由以上经历可发现。 v-model的实现机制和所说的响应式不太一样，v-model其实是 :value + @inp
vue页面中存在大量数据时，input输入搜索框在输入时卡动问题解决
deciduous_leaves的博客
05-13 4420
问题场景：在vue页面中渲染五百多条数据后，在前端实现关键字搜索的功能，数据加载和页面渲染都很快，只是在输入框打字或删除时卡顿（数据量有二三十条时无明显卡顿），输入框使用iview的Input的search属性输入框 问题排除： 1、首先去除掉对v-model绑定值的监听事件，问题没能解决 2、然后将iview的Input组件换成原生input输入框，问题依然存在 3、去除掉输入框的查询事件，让该输入框没有任何功能，问题还是没能解决 由于页面数据量的多少不同，输入框卡顿的程度也不同，所以就陷入了寻
简单的input框输入竟然异常卡顿，一个日常性能问题的排查思路
最新发布
03-03 948
我们公司产品主要提供企业项目管理服务，那么自然有配套的desk工单管理系统，用于搜集客户bug以及相关问题反馈。有一天我在测试功能时碰巧发现了一个bug，所以就想着提一个工单记录下方便日后修复。但就在创建工单填写标题时我发现标题输入卡爆了，本想着创建一个bug工单，结果又附带新建了一个性能bug单....下图便是当时问题表现：可以看到我只要连续操作，输入框都存在非常明显的卡顿，输入并不流畅，那么本文主要记录此问题的排查思路，以及部分性能排查小技巧，本文开始。
应对el-table中有el-input时，数据太多卡顿问题
hahah1234111111的博客
05-20 2101
卡顿是因为输入框数据是双向绑定的，输入内容时表格数据会刷新，重新渲染表格内容导致渲染次数太多会卡顿。网上大多数解决思路是用原生input替换el-input，再加上lazy，但是el-input的很多东西就用不了了，比如，校验。解决思路：封装el-input，给输入框加上节流，在输入内容之后过200ms之后再去更改表格的数据，这样表格渲染就变少，连续输入就不卡了，外部使用error显示校验结果。
VUE中页面加载了数据较多时，input输入框卡顿
weixin_44931180的博客
01-10 3749
问题：一个页面，上方input输入框用v-model绑定输入内容，用于搜索， 下方一个不分页表格，一次性加载列表所有数据，大概有三百多条数据。 在展示上没有问题，但是在input输入框输入时，发现很卡顿。 问题排查：首先看了下代码，逻辑上没什么问题，去网上查了一下，说是v-model实时更新引起整个页面render造成的，根据网上提示F12打开控制台，找到performance monitor， 然后在输入框连续输入一串内容， 可以看到下方的CPU达到了90%甚至99%。 看了网上说的解释，有一点不太明白，
Vue input输入框卡死的解决办法
什么都干的派森
09-16 1155
我把 vuex 全局变量绑定到 v-model 上，然后在页面挂载时通过代码修改 input 框中的内容，最后在页面上输入任意值 input 框就卡住了。
element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)
10-17
主要介绍了element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue页面有大量input框导致页面卡顿、输入、选择卡顿
qq_38508172的博客
01-05 1728
不管在使用el-table里面加入input框或者直接渲染input框。当input框很多的时候，会导致页面的CPU增高，从而导致页面卡顿和输入卡顿。这是由于页面中input框绑定的v-model过多导致 数据双向绑定更新后页面重新渲染次数多、页面数据重新加载次数多。这里推荐使用把。不推荐使用防抖节流。因为input框不止输入框，还有选择框、级联选择，还有一些复杂的运算。组件之间得更新是互不打扰的。下面是我用VUE3进行代码演示。提供思路。父组件传值给子组件。子组件更新数据后传值给父组件。
vue页面form表单太大，数据量太多的时候，input输入搜索框在输入时卡动问题解决
编程之路
10-17 1638
注意：直接在el-input中使用.lazy修饰符是不成功的，测试了这种写法确实无效。使用.lazy修饰符。
Vue大型表单数据导致el-input输入卡顿解决方案
热门推荐
cindy647的博客
03-05 1万+
Vue大型表单数据导致el-input输入卡顿解决方案 说明 在我们的日常开发中，可能会遇到一个大型的表单页面包含非常多个el-select及el-input组件的情况。如： 对于这样大型的表单数据，尤其一些下拉选项非常多甚至还要从接口获取时，会容易出现两个问题： 1、el-select组件操作卡顿 2、el-input组件输入延迟卡顿，即在输入框里输入、删除一些字符，会有明显的延迟 对于第一个问题，网上有很多解决办法，通常是：下拉数据动态获取、减少数据量 此处主要讲第二个问题的解决方案： 问题的出现 大
vue 当页面数据量大input 卡顿问题
woyebuzhidao321的博客
12-31 904
但是输入框发现写起来很卡顿，经过一番折腾发现是因为 vue。最后用input原生事件去解决。jumpToItem函数里面也用到了防抖。在mounted里面监听input事件。这样就能完美解决卡顿问题!最近在做一个页面跳转功能。
Vue.js页面中有多个input搜索框如何实现防抖操作
10-16
debounce是lodash工具库中的一个非常好用的函数。这篇文章主要介绍了Vue.js页面中有多个input搜索框如何实现防抖操作,需要的朋友可以参考下
vue获取input输入值的问题解决办法
11-26
vue获取input输入值的问题解决办法 v-for里有多行input输入框，vue怎么获取某行的输入的值，随便写了点代码，意思就是后台返回了多行的list集合，页面显示多行输入框，当修改某行的值时进行校验，输入错误友好提示下，后边加个清空按钮，点击清空当前行数据，最开始的想法是，用v-bind:value绑定值，这样就出现一种情况，页面输入的值无法获取到，v-bind不会修改原始list里的值，而且ref也不能动态绑定，ref只能全部获取，this.$refs.itemPriceRef[]，这样取的是所有输入框的值，是个数组，可以在提交前进行验证，但是无法判断某一行操作，并且vue操作DOM
解决vue中监听input只能输入数字及英文或者其他情况的问题
01-19
如下所示： 1、 <input placeholder=请输入条形码 class=disPriceStyle v-model = 'searcBarCode'></input>、 （只能输入数字，英文) <input placeholder=请输入商品条形码 class=disPriceStyle maxlength=20 v-model = 'searchGoodsName'></input> (只能输入数字，英文及中文) <input placeholder=请输入活动名称 class=disPriceStyle maxlength=20 v-model=
使用Vue-scroller页面input框不能触发滑动的问题及解决方法
10-14
主要介绍了使用Vue-scroller页面input框不能触发滑动的问题,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
解决vue项目input输入框双向绑定数据不实时生效问题
11-20
我就废话不多说了，大家还是直接看代码吧...这样在页面上时候不会随着输入框值改变而改变。 解决方法如下： this.$set(this.form,”phone”,this.$route.query.mobile) 或者绑定到data里边的一个字符串，也是可以解决
Element输入框iput输入卡顿问题
weixin_52394634的博客
10-28 2420
解决input卡顿
Vue | Element 页面1000多个 input 组件输入出现卡顿解决方案
u011141715的博客
06-07 3787
思路：页面正常渲染文本，当点击文本的时候把当前点击的文本区域置为 input 组件， input失去blur焦点的时候 再改变为 text 文本 经测试这里做了2万个，无卡顿 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- import CSS --> <link rel="stylesheet" href="https://unpkg.com/elemen
input反应慢 vue_vue 输入框速度慢的问题
weixin_35772595的博客
02-23 2173
输入框每次输入速度都很慢，整个页面都很卡。我猜想既然vue是响应式的。是不是某个地方一直在监听input的变化，做了某些工作，导致了非常的卡。我的input没有捕捉任何的事件。比如：<el-input :autosize="{ minRows: 3, maxRows: 6}" type="textarea" v-model="form.page_list_data.get_data[page...
vue中鼠标移入显示input框但是输入汉字时input框消失怎么解决
05-25
这个问题可以使用 Vue 的指令来解决。具体实现如下： 1. 在模板中，使用 `v-show` 指令控制 input 元素的显示和隐藏。同时，使用 `@mouseleave` 指令来处理鼠标移出事件。 ```html <div @mouseenter="showInput = true" @mouseleave="showInput = false"> <span v-show="!showInput" >鼠标移入显示</span> <input v-show="showInput" type="text" placeholder="请输入" /> </div> ``` 2. 在 Vue 实例中，定义一个变量 `showInput` 来控制 input 元素的显示和隐藏。同时，为 `input` 元素绑定 `@input` 事件来处理输入事件。在事件处理函数中，如果输入框中有文字，就不隐藏 input 元素；否则隐藏。 ```javascript new Vue({ el: "#app", data: { showInput: false }, methods: { handleInput(event) { if (event.target.value !== "") { this.showInput = true; } else { this.showInput = false; } } } }); ``` 完整代码如下： ```html <template> <div @mouseenter="showInput = true" @mouseleave="showInput = false"> <span v-show="!showInput" >鼠标移入显示</span> <input v-show="showInput" type="text" placeholder="请输入" @input="handleInput" /> </div> </template> <script> export default { data() { return { showInput: false }; }, methods: { handleInput(event) { if (event.target.value !== "") { this.showInput = true; } else { this.showInput = false; } } } }; </script> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值