vue页面许多input框会导致输入延迟

最新推荐文章于 2024-01-05 10:45:47 发布
最新推荐文章于 2024-01-05 10:45:47 发布
阅读量1.5k 收藏 2
点赞数
分类专栏： layui vue 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lizaiismy/article/details/122493516
版权
layui 同时被 2 个专栏收录
13 篇文章 0 订阅
订阅专栏
vue
3 篇文章 0 订阅
订阅专栏

做项目的时候第一次遇到这个问题（layui+vue），先来看我出现的问题，如图一我页面上有个双重for循环，且里面还使用到了过滤器见图二，这样下来我页面的数据量一旦非常大，对v-model是很不友好的，会造成v-model渲染会很慢
在这里插入图片描述
在这里插入图片描述

最好的解决方法要么是把这些for循环做的事去让后端处理，前端只做数据的展示，再要么就是在v-model上改成 v-model.lazy(我用的这个方法)让v-model延迟

在这里插入图片描述

yzmy
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
「VUE架构」vue完美监听input值变
AIGC大前端小王子
06-08 2351
一、正则过滤 场景：不能输入中文(3字节)或全角标点符号(2字节) 只能使用英文(大小写)数字, 或者少数符号，符号应该不包含&'"\等JS/HTML里面可能产生意外的符号.也不该包含ASCII码0-31的控制字符 二、决异步请求可能会发⽣先请求后返回问题，导致结果列表不是预料展⽰的效果 假如300ms的延迟，服务器还是可能存在先发送的请求后返回。避免先请求后返回问题，确保以当前输⼊的值为参数给结果表赋值，可以在请求⾥做判断。当请求返回结果时，判断请求的参数和当前输⼊框的值相等，才进⾏相关操作三、实时..
input反应慢 vue_vue 输入框速度慢的问题
weixin_34422394的博客
12-23 592
这是我对例子写的注释:Vue.component('currency-input', {template: '\\$\ref="input"\ //注册为input,是DOM的节点元素v-bind:value="value"\ //v-model的value(也是prop)v-on:input="updateValue($event.target.value)"\ //封装更新value的函数&g...
vue页面有大量input框导致页面卡顿、输入、选择卡顿
qq_38508172的博客
01-05 2797
不管在使用el-table里面加入input框或者直接渲染input框。当input框很多的时候，会导致页面的CPU增高，从而导致页面卡顿和输入卡顿。这是由于页面中input框绑定的v-model过多导致 数据双向绑定更新后页面重新渲染次数多、页面数据重新加载次数多。这里推荐使用把。不推荐使用防抖节流。因为input框不止输入框，还有选择框、级联选择，还有一些复杂的运算。组件之间得更新是互不打扰的。下面是我用VUE3进行代码演示。提供思路。父组件传值给子组件。子组件更新数据后传值给父组件。
前端页面一次性加载大量数据导致页面输入框卡顿
weixin_46106673的博客
07-06 767
首先，在项目开发中遇到一个场景，需要传入大量数据，而elementui中el-table要渲染几百条数据，这就导致页面非常卡，所以这里我采用懒加载来分片渲染数据，首先加载10条数据，通过监听el-table的滚动事件，当滚动条滚动到底部时，再加载10条数据。但是又出现新的问题，在el-table组件的单元格中涉及输入框编辑事件，当点击单元格时，将文本切换成输入框，进行输入时出现响应慢的情况。为了解决这个问题，需要将输入框抽离成一个组件，这样之后，输入变得流畅起来。
vue中关于组件(element,vant等等)回显很慢的问题
Meraln的博客
06-23 1667
业务场景：关于表单的交互，特别是从接口请求的数据要进行回显的时候。 此时有一个对应表单定义的类是这样 private form = { a: '1', b: '2', c: '3' } 然后需要请求回来的数据在表单上进行回显 const res:any = await request() // res = {a: 'a', b: 'b', c: 'c'} 很多时候我们为了偷懒，就直接 this.form = res 但是这样写会造成 回显很慢的问题，偷懒是不能偷懒
VUE中页面加载了数据较多时，input输入框卡顿
weixin_44931180的博客
01-10 4097
问题：一个页面，上方input输入框用v-model绑定输入内容，用于搜索， 下方一个不分页表格，一次性加载列表所有数据，大概有三百多条数据。 在展示上没有问题，但是在input输入框输入时，发现很卡顿。 问题排查：首先看了下代码，逻辑上没什么问题，去网上查了一下，说是v-model实时更新引起整个页面render造成的，根据网上提示F12打开控制台，找到performance monitor， 然后在输入框连续输入一串内容， 可以看到下方的CPU达到了90%甚至99%。 看了网上说的解释，有一点不太明白，
vue页面数据量太多的时候，input输入搜索框在输入时卡动问题解决
qq_40055200的博客
12-30 2492
【代码】vue页面数据量太多的时候，input输入搜索框在输入时卡动问题解决。
js简单实现input输入框的防抖处理，input输入时延迟一段时间后自动搜索
WanweI897的博客
01-11 1669
<input type="text" oninput="input()"> let timer1 // 声明定时器 function input(){ // 防抖处理 if(timer1){ clearTimeout(timer1) } timer1 = setTimeout(search, 500) // 500ms后执行 search 函数 } function search(){ console.log('正在搜索...') } ...
vue 页面渲染数据量大，导致input输入框卡顿的问题
Samar_319的博客
04-13 4522
解决方法： 把数据量大的那部分抽离成单个组件去渲染 Vue的异步响应式与v-model 对于Vue的响应式，官网上是这么定义的： Vue 在更新DOM时是异步执行的。只要侦听到数据变化，Vue将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个watcher被多次触发，只会被推入到队列中一次。 但是奇怪的事情发生在v-model上，它的数据更新并不是多次变更和一次来更新DOM，由以上经历可发现。 v-model的实现机制和所说的响应式不太一样，v-model其实是 :value + @inp
Vue.js页面中有多个input搜索框如何实现防抖操作
10-16
需要注意的是，`debounce`函数返回的新函数在调用时不会立即执行，而是会在延迟时间结束后执行，所以当用户在延迟时间内继续输入，之前调用的函数会被取消，等待新的输入。这正是防抖技术的核心所在，它能够在用户...
Vue-input框checkbox强制刷新问题
12-11
在引用input框的checkbox属性时，选中后会出现数据已经刷新，checkbox选中状态不会改变。这时在事件触发后可以调用this.$forceUpdate()，强制刷新页面解决这个问题。 　input框可以加入readonly=”readonly”禁止更改 ps:vue中关于checkbox的问题 在vue中写checkbox时，发现出现问题：当点击一个选项时，输出的数组为空，当取消或者点击下一个选项时，才会出现该选项值且下一个选项值不会出现： <template> <div class='mycheck' click='check()'> <input type=
vue监听多个input改变_vue 完美监听input值变化
weixin_32617915的博客
12-31 3866
1、vue中实时监听input值的变化，停止输入300ms后去请求，而不是时时请求数据2、解决异步请求可能会发生先请求后返回问题，导致结果列表不是预料展示的效果一、问题做搜索功能时，监听input的value值变化实时请求数据，每增加一个字符，就发送一次请求。例如输入12345，会监听到5次变化1 12 123 1234 12345，导致连续请求5次。这是没必要的，增加服务器负担，可能出现卡顿的情...
【Vue原理】VModel - 源码版之input详解
神仙朱的博客
07-01 1095
写文章不容易，点个赞呗兄弟 专注 Vue 源码分享，文章分为白话版和 源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧 研究基于 Vue版本 【2.5.17】 如果你觉得排版难看，请点击 下面链接 或者 拉到 下面关注公众号也可以吧 【Vue原理】VModel - 源码版之input详解 上一篇文章，我们大概讲了所有表单元素的双绑原理，但是仍然有两个特殊的表单元...
Vue输入框或者选择框无效，或者有延迟
axbhealj的博客
08-12 681
解决Vue输入框或者选择框无效只有对另外的框子进行操作刚刚操作的框子才会出现结果的问题
input反应慢 vue_vue input校验实现输入框实时更新遇到的问题
weixin_42303282的博客
01-13 748
问题描述，在使用vue input校验输入内容并且实时更新输入框不生效var app = new Vue({el: ".app",data: {something: '123'},methods: {update: function (e) {this.something = 111; //只会第一次输入后生效e.target.value = 111; //如果不手动将value设置111，不会实...
vue中分别在原生input输入框和组件输入框上运用v-model的注意点
m0_63231347的博客
11-09 676
vue中分别在原生input输入框和组件输入框上运用v-model的注意点
input反应慢 vue_Vue v-model实时更新带来的输入框卡顿问题
weixin_39533432的博客
01-13 7118
背景最近在开发的时候，发现在内容较多的页面上对v-model绑定的输入框上输入内容，页面会变得很卡顿，有些带有动画的元素还会闪动，初步怀疑是v-model实时更新引起整个组件(页面)的 re-render。连续执行了输入“123456789”，通过浏览器开发者工具的Performance观察发现，确实是如此：可以看到会连续触发9个事件，每个事件中都含有Vue的响应事件，其中就包含了render的操...
vue2 限制input框只能输入数字
最新发布
06-14
在 Vue 2 中，要限制 `input` 元素只能输入数字，你可以使用 `v-model` 指令结合一个正则表达式和 `@input` 事件监听器来实现。以下是一个简单的示例： ```html <input type="text" v-model.number="inputValue...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值