其实这篇文章一 两几个月前就该写出来了，甚至在调试问题的过程中就已经在构思文章的结构了。但由于懒某些原因，一直没有动键盘笔。几天间惊闻 Vue 3 已经 RC Release 了，再不写出来，恐怕就没有人会看了。写得再早也没有人会看的吧

TL;DR

• 不要用 <keep-alive>
  • 如果一定要用，请给 Vue 打几个 patch （建议使用 ds300/patch-package ，应用的 patch 参考这里）
• 每次 addEventListener 都要记得在适当的时候 removeEventListener
• 不要以为 delete domElement.onXXX 就可以移除 DOM 元素的 Event Listener ，要用 domElement.onXXX = null
• 不要在 Vue 的 Custom Directive 的 Hook Function 中引用 vnode （即第三个参数）

vue 提供了 <transition> 组件来为组件的切换添加动画，得益于这个特性， vue-router 中的 router-view 也可以在切换路由组件时播放动画。自然的，就产生了在前进/后退时使用不同动画的需求。在 vue-router 文档的 Route-Based Dynamic Transition 一节中，提供了这样的写法：

// then, in the parent component,
// watch the `$route` to determine the transition to use
watch: {
  '$route' (to, from) {
    const toDepth = to.path.split('/').length
    const fromDepth = from.path.split('/').length
    this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
  }
}

根据路径中 / 的个数来判断路由的深度，然后以此决定播放的动画。但事情并不总是那么简单。

没想到这个坑这么快就填上了，以后我也能在博客里面插入音频啦～～

顺便推荐一首歌，这几天开发的时候一直单曲循环的：

パレットには君がいっぱい · ぽわぽわP

这篇博文还没写完，似乎就又出现了三个 bug ... 囧rz ... 这里就先不立什么新功能的 Flag 了，有机会把 bug 都修掉再考虑吧 ...

UPDATE: 写了一个傻傻的 Python 脚本 来自动处理字体，只要将所需要的图标名称每行一个写入 icon-names.txt ，就能一键生成压缩好的字体文件。(2018/04/26)

以下是原文。

这几天挖了 新坑 MelodyPlayer ，其中有用到 Google 的 Material Icons 。虽然它的 woff2 格式只有 42KB ，但我只用了其中的 10 个图标，加载整个字体文件显得很不划算。虽然 Material Icons 提供了制作 Sprite 的方案，但只有 SVG 或 CSS Sprite ，我的用法是 <button> 里写图标的名字，不能兼容。

我不愿意改代码，于是想寻找一种提取字体中特定字符的方法。

经过一番搜索，找到了 fonttools 这个强大的工具，可以精确控制字体文件的每一个 Glyph ，最大限度压缩字体。