vue3中自定义指令去除空格与制表符

//处理input前后端空格与制表符
const vFilterInput = {
    name: "filterInput",
    mounted(el) {
        /**
         * 适用于el-input
         * 如果指令直接作用于input可以删除下面这两行
         * 目的为将事件直接绑定在input元素上
        */
        el._input_element = el.querySelector("input")
        if (!el._input_element) return
        el._input_fun = e => {
            e.target.value = e.target.value.trim().replace(/\t/g, "")
        }
        el._blur_fun = () => {
            el._input_element.dispatchEvent(new Event("input"))
        }
        el._input_element.addEventListener("input", el._input_fun)
        el._input_element.addEventListener("input", el._blur_fun)
    },
    beforeUnmount() {
        if (!el._input_element) return
        el._input_element.removeEventListener("input", el._input_fun)
        el._input_element.removeEventListener("input", el._blur_fun)
    }
}

问题：为啥要调用dispatchEvent(new Event("input"))

当我们调用e.target.value = e.target.value.trim().replace(/\t/g, "")的时候，只是对input元素里面的value进行了赋值，而这时候v-model绑定的值并不会发生变化，因为v-mode是:value与@input的语法糖，所以我们要手动触发一下input事件，更新v-model绑定的值。

如果不调用该方法，会出现以下现象

在输入框中输入"a "（a与空格）

输入框显示为"a"（因为.trim()了）

而vue中ref的值为"a "（空格还在）