Vue实现类似通讯录功能（后续优化）

A字母的offsetTop问题

上篇，在handleTouchMove里做了一些业务逻辑操作。
当我们的手指在字母索引处上下滑动时，这个代码就会被执行。但是这里的性能是比较低的。
首先这个字母A的offsetTop值是固定的，而我们每次执行这个方法的时候，都去运算一次。等于重复运算了。

有点点不好

怎样解决呢？
先去 data处定义一个 startY，它的初始值是0，然后再写一个 updated钩子，当页面的数据被更新，同时页面完成了自己的渲染之后， undated钩子就会被执行，它执行的时候做一件事。

updated钩子里的操作

那么 handleTouchMove里有些操作得修改一下了

修改修改

为啥要updated?

当初次渲染字母索引组件时，实际上初始cities在City这个父组件内可以看到是个空对象，也就是页面刚加载的时候，字母索引组件的内容都不会显示出来，当City父组件获取ajax数据后，cities的值才发生变化，字母索引组件才被渲染出来。当向字母索引组件传的值发生变化时，它就会重新渲染，此时它里面的updated钩子会被执行，此时页面上已经展示出了城市列表里的所有内容。
这个时候获取A这个字母所在的dom对应的offsetTop的值就没有问题。

做个函数节流

当鼠标在字母索引处来回移动的时候，touchMove执行的频率是非常高的，此时我们可以通过节流来限制一下函数执行的频率。
怎么做节流呢？
去data处定义一个timer，默认值为null。

修改成这样

解析一波：
执行 touchMove时，如果已经存在了，清除掉 this.timer
否则创造一个 timer = 一个箭头函数，延迟16毫秒运行。
为啥要这样做？
如果已经正在做这样的事情，让它延迟16毫秒再去执行，如果在这16毫秒之间，又做了这个手指的滚动，那么将上一次要做的操作给清除掉，重新执行这次做的事情。
这样减少执行频率，从而提高网页性能。

更新自2019/03/29

放上地址，项目因为种种原因没有完成到最后，但是这个城市选择功能可以供大家参考~(*^▽^*)
戳我