之前我搞了个滑动块导航栏，但是在vue里面用个window.onresize会让网页变的巨卡。

因为他在你改变视口的大小的时候，会一直调用。

可能你感觉不到，每一次拖动窗口都是一次性能的损耗，而这每一次，是在一秒内发生很多很多次。

所以CPU占用飙升也是这个原因。

但是这个问题只要给他一个延时器就行了。。。

data里面设置一个控制器

sizeTag:true,   //控制器

mounted里面的window.onresize改一下

const _that = this;

window.onresize = ()=> {

          if(_that.sizeTag){

            _that.movebg()

            _that.sizeTag=false

            console.log(_that.sizeTag,1)

            setTimeout(()=>{

              _that.sizeTag=true

              console.log(_that.sizeTag,2)

            }, 5000)//这里我们设置成五秒先看看效果。

          }

        };

我这里等了五秒钟才出现setTimeout里面的console.log(_that.sizeTag,2)

也就是他设置成false之后，过了五秒才把sizeTag设置成true，

一般来说我把延时器的时间设置成200就够用了 。为了方便我测试，就设置成了5000.

这样一来，虽然CPU还是会升到很高，但是它下降的速度也很快，几乎不会让网页卡顿了。

网页没有卡顿，我的目的就达到了。看起来还挺简单的。