记录最近一次踩坑经历

vue.js的文档中提示我们在使用渲染列表时最好要提供key来跟踪这个节点，除非你知道自己在做什么。

vue会根据这个key来标识这个节点，并在数据更新时根据这个key做diff。如果没有key，vue就会简单的重用其他的节点，然后就可能会有坑。

最近有一段代码使用了v-for, 是一个数组的迭代，生成一个列表。列表中某些元素中文字内容坑很长，需要做个font-size的自适应，超出容器宽度时自动缩小字体。我使用vue的自定义指令来实现，部分元素的font-size被改写。功能完成后初期看起来没问题，后来在测试过程中发现，当数据发生变化时，有些元素的缩放不符合期望。而且在指令的update钩子函数里的oldvalue和value是不变的，所以没有重新触发自适应函数。

简单的效果类似这样 => link

想了一下应该就是vue复用了之前的节点，加上key后解决，数据更新时未发生错乱。

坑还是要踩过印象才会更深刻，现在想起N久之前学angular时貌似也遇到过类似问题，有点怀念那段时光。