8-7城市列表性能优化

一：this.$refs['A'][0].offsetTop 的值是固定的，方法里计算性能较低
可以放到updated函数中
二：函数节流

函数节流: 当你的鼠标在你的字母表上来回移动的时候,这个时候touchMove 执行的频率是非常高的,通过函数节流限制下执行的频率

延迟16ms 向外触发change事件携带鼠标所在区域对应的字母,向city父组件传递事件和字母,向兄弟组件list 传递一个字母,改变List页面显示的对应字母对应的DOM 元素.

 data () {
            return{
                touchStatus : false,
                startY:0,
                timer:null
            }
        },
        updated () {
            this.startY = this.$refs['A'][0].offsetTop
        },

 handleTouchMove:function (e) {
          if(this.touchStatus){
              if(this.timer){
                  clearTimeout(this,timer)
              }
              this.timer = setTimeout(()=>{
                const touchY = e.touches[0].clientY - 79
                const index = Math.floor((touchY - this.startY)/20)
                if(index >= 0 && index < this.letters.length)
                {
                  this.$emit('change',this.letters[index])
                }
              },16)
          }
        },