前言

在开发的过程中遇到了一些奇妙的坑。与其说坑，倒不如说自己以前从来没有遇见过或者考虑过这些东西。甚至其中某几个还曾一度被我认为是Bug。在查阅资料后发现那种设计还是有其道理的。

1. 关于伪元素

在比赛中用到伪元素的地方不多也不少，其实我认为伪元素的出现给开发带来了很多方便，代码也变得很干净整洁。因为伪元素并不是真正的元素，却又和真正的元素没什么差别。

但是，伪元素也有其限制。

现有需求如下图：

因为头像右下角的相机在样式上是不变的，所以首选应该就是伪元素。于是我开始编写此代码：

HTML:

<img src="avatar.png" />

img {
    width: 83px;
    height: 83px;
    border-radius: 50%;
    position: relative;
    &::after {
        content: '';
        position: absolute;
        bottom: 0;
        right: 0;
        display: block;
        width: 22.5px;
        height: 22.5px;
        background: url('camera@3x.png') 100% e('/') 100% no-repeat;
    }
}

查看效果后发现：

伪元素不见了！不见了！不见了！！！

后来查阅资料才发现：

大部分行级元素也可以设置伪元素，但是像img可替换元素，因为其外观和尺寸有外部资源决定，那么如果外部资源正确加载，就会替换掉其内部内容，这时伪元素也会被替换掉，但是当外部资源加载失败时，设置的伪元素是可以起作用的。

原来img标签资源加载正确就不会显示伪元素。。

后来经过测试，发现Input元素中的伪元素也无法显示。所以据此推测，没有子元素的元素也不能有伪元素。

2. Input当类型为Number是能输入e

一开始我是无意间刷键盘，发现Number的Input居然能输入e！我当时认为是浏览器的Bug，但是在Firefox浏览器下一样能输入e。

查找资料后发现并非是Bug，其实e是被当作自然对数的底数，所以e也是一个数字。但是我们并不希望出现e。

解决方法：

<input type='number' onkeypress='return( /[\d]/.test(String.fromCharCode(event.keyCode) ) )' />

3. Vue.js在命名路由之间切换不执行生命周期钩子

一开始确实没有考虑过这个问题，后来仔细一想：因为命名路由实质上还是同一个组件，就算切换路由也不会触发生命周期的钩子函数。

这个问题解决起来其实并不困难。一开始我想用watch来解决问题，但是查阅Vue Router的官方文档后发现官方有个名为“导航守卫”的功能。

记住参数或查询的改变并不会触发进入/离开的导航守卫。你可以通过观察 $route 对象来应对这些变化，或使用 beforeRouteUpdate 的组件内守卫。

但是文档上有这么一句话，所以在本例中的导航守卫应该采用组件内的导航守卫beforeRouteUpdate进行路由参数变化的观察。

beforeRouteUpdate (to, from, next) {
  () => {
    //当路由变化时，这里的代码将会执行
  }
  next() //执行完之后跳转到to所匹配到的路由
}