vue中记录键盘输入过程

最近工作中有个需求，需要记录键盘的输入过程，写出来后觉得要分享一下。
页面是这样子的

下面是后台请求的列表数据结构

当点击输入时，获取当前的index，赋值给data里的变量itemIndex
监听文本框的改变，因为结构复杂，需要深度监听（deep:true表示深度监听）

watch: {
            testDataNew:{
                handler(val,old){

                   let list=this.questionBankInfo.childList[this.itemIndex]
                    for(var i =0; i < val.childList.length;i++){
                        if(i===this.itemIndex){
                            list.keyNewVal= val.childList[i].fiveStepListenRecordTranslate.translateResult
                            list.keyOldVal= old.childList[i].fiveStepListenRecordTranslate.translateResult
                        }
                    }
                    if(list.keyOldVal==null){ list.keyOldVal=""}
                    let oldval=list.keyOldVal
                    let newval=list.keyNewVal
                    if(this.lastTime===null){
                        this.timeMark =0
                        // this.lastTime = new Date().getTime()
                    }else {
                        this.timeMark = (new Date().getTime() -this.lastTime)/1000
                    }
                    this.lastTime = new Date().getTime()
                    if(oldval.length>newval.length){
                        if(oldval.length!==newval.length){
                            var startNum = []
                            for(var i=0;i<oldval.length;i++){
                                if (oldval[i]!==newval[i]){
                                    startNum.push(i)
                                    break
                                }
                            }
                            var len=oldval.length-newval.length
                            var delVal = oldval.substr(startNum[0]*1,len)
                            var obj = {}
                            obj.type = 1
                            // obj.startNum = startNum[0]
                            obj.delLen = len
                            obj.delVal = delVal
                            obj.time = Math.trunc(this.timeMark)
                            if(len===1){
                                var num = 1
                                function getDel(num,len,obj) {
                                    var num = num
                                    var len = len
                                    var obj = obj
                                    if(list.keyList.length>1 && len===1 &&  list.keyList[list.keyList.length-num*1].type!==1 && list.keyList.length>num){
                                        list.keyList.splice(list.keyList.length-num+1,0,obj)
                                    }else if(list.keyList.length===1){
                                        var objTime = {}
                                        objTime.type = 0
                                        // objTime.startNum = 1
                                        objTime.addLen = 1
                                        objTime.addVal = ''
                                        objTime.time = 0
                                        // objTime.oldval =oldval
                                        list.keyList.push(objTime)
                                        list.keyList.push(obj)
                                    }
                                    else {
                                        num++
                                        getDel(num,len,obj)
                                    }
                                }
                                getDel(num,len,obj)
                            }else {
                                list.keyList.push(obj)
                            }
                        }
                    } else {
                        if(oldval.length!==newval.length){
                            var startNum = []
                            for(var i=0;i<newval.length;i++){
                                if (oldval[i]!==newval[i]){
                                    startNum.push(i)
                                    break
                                }
                            }
                            var len=newval.length-oldval.length
                            var addVal = newval.substr(startNum[0]*1,len)
                            var objTime = {}
                            objTime.type = 0
                            // objTime.startNum = startNum[0]
                            objTime.addLen = len
                            objTime.addVal = addVal
                            objTime.time =Math.trunc(this.timeMark)
                            if(oldval.length===0 && list.keyList.length===0){
                                objTime.time = this.useSeconds
                                list.keyList.push(objTime)
                                return
                            }
                            list.keyList.push(objTime)
                        }
                    }
                    this.questionBankInfo.childList[this.itemIndex].keyList=list.keyList
                },
                deep:true
            }
        },
        computed:{
            testDataNew() {
                return JSON.parse(JSON.stringify(this.questionBankInfo))
            }
        },

比如我输入的结果是“你好啊，你想吃什么”，但是过程中为“你好啊，你因为时间想吃什么”，将“因为时间删除也记录了下来”，看keyList数据：
其中type（0表添加、1表删除）addlen添加长度、dellen删除长度、addval添加的数据、delval删除的数据，time为输入时间

然后你想显示在页面上，或者传给后台（看后端想要什么）
我给的是html 如下：

for(let i=0; i<list.keyList.length;i++){
                    if(list.keyList[i].type==0){
                        list.keyupRes=list.keyupRes + list.keyList[i].addVal
                    }else {
                        list.keyupRes=list.keyupRes+"<span style=\"color: rgb(255, 0, 0);text-decoration:line-through;\">"+list.keyList[i].delVal+"</span>"
                    }
                }

显示为

<p v-html="result"></p>

当然s标签比span少写了一个css，这里就不说了。
可能其中有点小瑕疵，欢迎大神找出错误，同时希望能给出一些建议，谢谢！
老铁们，关注走一波，嘿嘿！