从一次性能优化看Vue的一个“feature”

使用过 Vue 的人都知道，Vue 数据驱动视图是基于getter和setter的实现的依赖收集，实现数据变动精准更新视图，然后修改 DOM 节点，但是实际上真的那么“精准”吗？

背景知识

首先，我们都知道 Vue 或者 React 得以高效更新的一个核心是使用了 virtual dom（下面称 vdom），当有数据变动的时候，通过对组件新旧 vdom 的 diff 操作，计算出需要实际修改的 DOM 节点然后进行增删改操作。从这可以知道，diff 的准确性和性能，是整体更新性能的一个关键环节。

而 Vue 比 React 优秀（不是指整体，单指 diff 这一块）的原因是 Vue 使用了 getter 和 setter 实现的视图对数据依赖的精确收集，即：当数据更新时，可以精确触发使用了该数据的组件进行更新过程。

但是事实真的如此吗？

业务场景

当前业务要做的是一个 Web 版的 逐字歌词制作器，顾名思义，我们平时在 QQ音乐 上看到的 逐字 歌词就是使用这个工具是做出来的，大概样子如图：

 

之前无论是 QQ 音乐、酷狗还是酷我的逐字歌词制作器都是内嵌在桌面版客户端中的一个工具，虽然各个工具略有差异，但是核心交互都是一样的，如下图：

 

简单来说就是我们给歌词的每个字“打标”，通过键盘 上下左右 等操作控制游标（蓝色框框）的移动，给一个字标记上 开始时间 和 持续时间。

这里面的实现细节不赘述，是一个有趣但异常复杂的过程。最后实现出来上线正常使用了一段时间，直到某个节目某些歌的出现，打破了这个功能已经完美实现了的“梦想”。

问题出现

那是一个月黑风高，雷电交加的夜晚，测试在群里反馈了一个问题：

 

点开发现如下面这样，第一行第二个字开始，后面全部卡住了大概两秒，直接跳到了第二行

 

很明显这是一个非常严重的性能问题，需要紧急解决。

定位问题