input反应慢 vue_vue 输入框速度慢的问题

输入框每次输入速度都很慢，整个页面都很卡。我猜想既然vue是响应式的。

是不是某个地方一直在监听input的变化，做了某些工作，导致了非常的卡。

我的input没有捕捉任何的事件。

比如：

<el-input :autosize="{ minRows: 3, maxRows: 6}" type="textarea" v-model="form.page_list_data.get_data[page_list_tab_select].page_area_get_rules"></el-input>

我猜想v-model里面的数值发生了改变，引发了其他的计算。

如图。每次输入都监听了很多事件：

不知道你们有没有遇到类似的情况。

v-model监听input事件来同步数据所以会慢

可以看看文档有没有lazy的实现 也可以自己实现一个 比如blur时候emit input

https://cn.vuejs.org/v2/guide…

在默认情况下， v-model 在 input 事件中同步输入框的值与数据 (除了 上述 IME 部分)，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步：

<!-- 在 "change" 而不是 "input" 事件中更新 -->

<input v-model.lazy="msg" >

官网文档有例子https://cn.vuejs.org/v2/guide/components.html#自定义事件

这是我对例子写的注释:

Vue.component('currency-input', {

template: '\

<span>\

$\

<input\

ref="input"\ //注册为input,是DOM的节点元素

v-bind:value="value"\ //v-model的value(也是prop)

v-on:input="updateValue($event.target.value)"\ //封装更新value的函数

>\

</span>\

',

props: ['value'], //父组件将绑定的value传给子组件

methods: {

// 不是直接更新值，而是使用此方法来对输入值进行格式化和位数限制

updateValue: function (value) {

var formattedValue = value //对值进行处理

// 删除两侧的空格符

.trim()

// 保留 2 小数位和2位数

.slice(0, value.indexOf('.') + 3)

// 如果值不统一，手动覆盖以保持一致,为了保持输入框显示内容跟格式化内容一致

if (formattedValue !== value) {

//因为注册是一个input元素,所以this.$refs 就是input元素

this.$refs.input.value = formattedValue

}

//手动触发input事件,将格式化后的值传过去,这是最终显示输入框的输出

this.$emit('input', Number(formattedValue))

}

}

})

//实例化vue实例的

new Vue({

el: '#aa', //要绑定一个vue实例,例如包裹一个id为aa的div

data:{

price:'' //v-model要有数据源

}

})