vue页面中存在大量数据时,input输入搜索框在输入时卡动问题解决

问题场景:在vue页面中渲染五百多条数据后,在前端实现关键字搜索的功能,数据加载和页面渲染都很快,只是在输入框打字或删除时卡顿(数据量有二三十条时无明显卡顿),输入框使用iview的Input的search属性输入框

问题排除:

1、首先去除掉对v-model绑定值的监听事件,问题没能解决

2、然后将iview的Input组件换成原生input输入框,问题依然存在

3、去除掉输入框的查询事件,让该输入框没有任何功能,问题还是没能解决

由于页面数据量的多少不同,输入框卡顿的程度也不同,所以就陷入了寻找输入框和数据量关系的无解之路上,在走投无路时开始各种毫无根据的操作,直到我删除了v-model时,发现输入框终于不卡顿了,这时才想起v-model的实现原理

v-model实现原理:

官网对vue的响应式描述是:

Vue 在更新DOM时是异步执行的。只要侦听到数据变化,Vue将开启一个队列,并缓冲在同一事件循环中发生的所有数据变更。如果同一个watcher被多次触发,只会被推入到队列中一次

而v-model的数据更新并不是多次变更和一次来更新DOM的,它的实现机制和上面所说的响应式不太一样,v-model是 :value + @input组合的语法糖,当文本框change时会触发watch与computed函数,属性的变化,走的是defineProperty。而watcher走的是观察者模式,才用到了队列。

解决办法:

1、可以不用v-model,用输入框的事件来获取值进行操作

2、将数据展示部分拆分成子组件引入,数据处理可以在父组件

建议使用第二种方法,我们不能因为v-model存在这些问题就不去用它

最后,我还是没能从v-model的那些十分专业的原理描述中理解它为什么会受数据的影响?属性变化到底是什么在变?至此我也没找到这些问题的答案,希望看到这篇文章的大佬能帮助我答疑解惑

  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
vue.js页面,当有多个input搜索框需要实现防抖操作,可以使用以下方法: 1. 使用lodash库提供的_.debounce()函数。该函数可以将一些被频繁调用的函数在规定间内只执行一次。将需要进行防抖的搜索函数作为debounce函数的参数即可。但是,如果页面有多个搜索框需要实现防抖操作,每个搜索框都需要调用该debounce函数,代码重复,不够优雅。 2. 使用vue.js的mixin混入功能。将防抖操作的代码封装到一个mixin混入对象,然后在需要的组件配置该mixin,即可实现防抖操作。这种方法更加优雅,代码结构更加清晰。 下面是一个搜索组件的样例代码: ```vue <template> <div> <input type="text" v-model="searchText" @input="debounceSearch"/> <ul> <li v-for="result in searchResults" :key="result.id">{{ result.name }}</li> </ul> </div> </template> <script> import searchMixin from 'searchMixin.js' // 引入定义好的mixin混入对象 export default { name: 'Search', mixins: [searchMixin], // 在组件引用该mixin data () { return { searchText: '', searchResults: [], } }, methods: { search () { // 搜索逻辑 this.searchResults = [] if (this.searchText) { this.searchResults = [ {id: 1, name: 'result1'}, {id: 2, name: 'result2'}, // ... ] } }, }, mounted () { console.log('search component mounted') } } </script> ``` searchMixin.js: ```javascript import _ from 'lodash' export default { methods: { debounceSearch: _.debounce(function () { this.search() }, 500) } } ``` 在以上样例代码,searchMixin.js定义了一个防抖操作函数debounceSearch,将需要防抖的搜索函数search作为debounce函数的参数。组件引用了该mixin,在input的@input事件调用debounceSearch函数实现防抖操作。这样,当用户在搜索框快速输入,搜索函数search不会被频繁调用,而是在规定的间间隔内只会执行一次,节省了系统资源,提高了性能。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值