使用 this.$emit('input') 导致组件卡顿

自己写了个下拉框组件,
使用方式:drop-menu v-model=“result” />
组件功能:每次点击下拉选项后,把选择结果通过this.$emit(‘input’, …)返回给绑定的result

但是发现下拉选项多点几次后,组件会卡顿,
把this.$emit(‘input’, …)这段注释掉就不会卡顿。

再则通过在
1、组件里面 watch value的变化,并记录当前时间
2、this.$emit(‘input’, …) 的时候,也记录当前时间

比较得出,这2个时间差,和点击下拉选项的频率成正比,会越来越长,从间隔几毫秒、到几秒。

请教下有遇到这个问题吗,怎么优化?

是不是每次都更新了所有,数据越来越多,越来越卡

一共就5条下拉数据,返回的值都是id,没多少数据,应该和数据大小没关系

你看下 devtool 里的事件那一项,,,会不会有很多 input 事件,疯狂触发?

防抖,节流ddddddddd

举个例子,一个最简单input输入框组件:
<div><input v-mode="val" @input="ipt" /></div>
data: {
 val: this.value
},
props: {
value: ''
},
watch: {
  value (data) {
    this.val = data;
  }
},
methods: {
  ipt () {
    this.$emit('input', this.val);
  }
}
==========
使用组件:<cmp-input v-model="name" />
==========
问题:当输入框中快速输入文本的时候,就很卡。