技巧-处理中文输入法导致的高频问题

有一个input文本框，进行@input之后，在文本框内输入文字会实时触发其绑定的方法。在输入英文字符时没有问题，但当输入中文时，还没有选择文字，所绑定的方法已经执行了。

    <input type="text" @input="onSearch" v-model="msg">

需要解决一下，在输入中文的时候，不要触发搜索函数，这时就需要换一种函数绑定方式了。

const bindFun = () => {
  const inp = document.querySelector("input");

  inp.addEventListener("input", () => {
    onSearch();
  });
};

onMounted(() => {
  bindFun();
});

使用compositionstart（合成开始）和compositionend(合成结束) 事件。

const bindFun = () => {
  const inp = document.querySelector("input");
  let isCompsing = false; // 是否合成

  inp.addEventListener("input", () => {
    if (isCompsing) return; //合成时，不触发搜索
    onSearch();
  });

  inp.addEventListener("compositionstart", () => {
    isCompsing = true;
  });
  inp.addEventListener("compositionend", () => {
    isCompsing = false;
    onSearch();
  });
};