vue实现autoComplete组件

需要掌握的技术点
1、采用mock服务器
2、实现下拉自动匹配，和其他列表的自动匹配
3、在输入法输入的时候，页面的输入框不监听输入法中的内容

研究方法：
1、查看开源代码如何实现
2、记录研究过程中的知识点

知识补充：
1、compositionstart 事件触发于一段文字的输入之前（类似于 keydown 事件，但是该事件仅在若干可见字符的输入之前，而这些可见字符的输入可能需要一连串的键盘操作、语音识别或者点击输入法的备选词）。
2、compositionupdate 事件触发于字符被输入到一段文字的时候（这些可见字符的输入可能需要一连串的键盘操作、语音识别或者点击输入法的备选词）
3、compositionend 当文本段落的组成完成或取消时, compositionend 事件将被激发 (具有特殊字符的激发, 需要一系列键和其他输入, 如语音识别或移动中的字词建议)。

这里注意compositionstart这些事件，
如果要在vue子组件上监听，那么需要加.native修饰符。
但是要是在原生DOM上监听，就不需要加.native属性了。

<input :disabled="disabled" :class="{error: error}"
       :placeholder="placeholder"
       @compositionstart="handleComposition"
       @compositionupdate="handleComposition"
       @compositionend="handleComposition"
       @input="handleChange"
       :value="value" type="text">

通过this.isOnComposition作为开关，控制节流函数。

handleComposition(event) {
     if (event.type === 'compositionend') {
          this.isOnComposition = false;
          this.handleChange(event);
      } else {
          this.isOnComposition = true;
      }
},

接收真实的数据

handleChange(event) {
    let value = event.target.value;
    if(!this.isOnComposition){
        this.getData(value);
    }
},

节流函数。
节流函数开源的有两种，一种是lodash中的，还有一种是element UI中的节流插件。在比较了两者的区别后，个人认为虽然lodash是著名的开源库，但是它的节流函数真的没有element UI中的插件好用。

this.getData = debounce(this.debounce, (value) => {
     this.returnValue(value);
});

列表的自动匹配
使用原生列表的备份，借助过滤器查询。

createLayerList(value){
   value = value.trim().toLowerCase();
    let tempArray = [];
    tempArray = this.layerListBackUp.filter(item =>{
        item = item.showName.trim().toLowerCase();
        if(item.indexOf(value)> -1){
            return true;
        }
    });
    this.layerList = JSON.parse(JSON.stringify(tempArray));
}

下一期研究什么呢？
研究mock服务，以及深入阐释为什么lodash的节流函数不好用，以及为何element ui的节流函数好用，