vue源码中callHook的for循环

290 阅读1分钟

先上代码:

for (let i = 0, j = handlers.length; i < j; i++) {

    invokeWithErrorHandling(handlers[i], vm, null, vm, info)

}

// =>

// for (let i = 0; i < handlers.length; i++) {

    // invokeWithErrorHandling(handlers[i], vm, null, vm, info)

// }

vue源码中for循环的代码,为什么会有循环,先定义循环的长度之后在进行比较??

带着问题去解决,验证问题回归。

此两份代码有什么去区别吗,那就让我门来验证一下。

首先相当的是我的猜想:提升性能,能够在循环的过程中不用每次都去寻找,数组的.length属性能直接使用定义的变量数字进行使用能够更快。

下面开始代码验证:

先定义来两个函数:

forFn: function(arr) {
//函数内容相同就是相互对比的两个函数

     let a=[]

    for(let i=0,j =arr.length; i<j; i++){

    a.push(arr[i])

    }

},

forLengthFn: function(arr) {

    let a=[]

    for(let i=0;i<arr.length; i++){

    a.push(arr[i])

    }

}

 mounted(){
    //就是多重结果判定数组
    let resultArr=[]//进行了一次数据的统计
    for(let j=0;j<10;j++){
        // 验证源码中是否有什么影响的作用
        //数组中值的多少
        for(i=0;i<1000000;i++){
            this.arr.push(i)
        }
        // 时间戳是用来监视函数的执行时间
        //forFn函数的开始时间
        let timeNolengthstart = Date.now();
        //函数的执行
        this.forFn(this.arr);
        //forFn函数的结束时间
        let timeNolengtent=Date.now()
        //时间戳的比较
        let forFnTime = timeNolengtent-timeNolengthstart
        //差值就是所谓的函数执行时间
        // console.log(forFnTime)
        let timeStart = Date.now();
        //更换执行函数
        this.forLengthFn(this.arr);
        let timeEnt=Date.now()
        let forLengthFnTime = timeEnt-timeStart;
        //函数中两个函数执行时间的差值
        resultArr.push(forLengthFnTime-forFnTime)
        // console.log(forLengthFnTime)
        console.log(forLengthFnTime-forFnTime)
    }
    //数组中的多少次验证是,定义i,j两个变量值,比未定义的完成时间快
    console.log(resultArr.filter(item => item>=0).length)
},

此方法整体思路就是根据时间戳的方式,验证函数的执行时间,通过多次统计来完成,验证自己的猜想。 方法视频讲解