问题
vue3文档中由于中日韩需要拼音，在输入框输入的时候有可能会出现在拼字的时候也会被监听到
在vue的v-model的输入框中，正常输入字母和汉字可以监听到，但是输入法中的不会监听到，如上图
但是如果直接使用原生的input事件去监听，我们可以发现拼字的时候也会被监听到，我们该怎么去实现他这个功能呢？
<!-- 无法控制监听 -->
<input type="text" class="input" @input="oninput()" id="input1" />
<script>
var oninput = function (e) {
console.log("e", e)
document.querySelector(".text").textContent = e.target.value;
};
</script>
监听输入法事件
通过MDN我们可以发现一个属性compositionstart compositionend
compositionstart文本合成系统如 input method editor（即输入法编辑器）开始新的输入合成时会触发 compositionstart 事件。
说人话就是你在开始拼字的时候触发这个事件compositionstart,拼字结束的时候调用compositionstart这个事件，于是我们就可以写一个flag，当flag为false就让其输入
let composition = false;
let input1 = document.querySelector("#input1");
input1.addEventListener("compositionstart", (e) => {
composition = true;
});
input1.addEventListener("compositionend", (e) => {
composition=false
//此处再调用input因为在你确认字之后，并不会触发这个事件导致字不上屏
oninput(e)
})
var oninput = function (e) {
if(composition)return
document.querySelector(".text").textContent = e.target.value;
};
监听e中的输入法标识（推荐）
这种精简，原理一样，需要再结束的时候再次调用input事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<input type="text" class="input" @input="oninput()" id="input1" />
<span class="text">12123</span>
<script>
var oninput = function (e) {
if (e.isComposing) return; // 如果正在进行拼字，直接返回
console.log("text", document.querySelector(".text").innerText);
document.querySelector(".text").textContent = e.target.value;
};
var input1 = document.querySelector("#input1");
input1.addEventListener("compositionend", oninput);
</script>
</body>
</html>
