Vue 使用的一些小技巧

We can’t change history, but we can change the future. --忘了哪里看到的

起手

最近一直在用 Vue 开发，期间并没有很认真的做个总结，本文也只是对自己印象较为深刻的点列举一二。

Router key

由于 Vue 会复用相同组件，例如 /page?id=1 => /page?id=2 这类跳转的情况，组件将不会执行 created， mounted 等钩子函数，此时常用解决方案如下。

watch

watch: {
  $route(to, from) {
    // XXXX
  }
}

给 router-view 绑定一个 unique key

// $route.fullPath: 完成解析后的 URL，包含查询参数和 hash 的完整路径
<router-view :key="$route.fullPath"></router-view>

原理可以看官网中对 key 的定义：https://cn.vuejs.org/v2/api/index.html#key，当然了，如果没有类似的场景不建议使用，毕竟每次渲染还是要付出一丢丢性能代价的。

$attrs

该属性用的人不多，可能知道的人也不多，我也是在实现自定义 input 组件的时候，Google 到的。
官方解释：包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。
示例：

<template>
  <input
		class="u-input"
    v-bind="$attrs"
    @input="handleInput"
    @focus="handleFocus"
    @blur="handleBlur"
    @change="handleChange"
  >
</template>

这是一个简单的 input 组件封装，使用 v-bind="$attrs" 可以直接将引用该组件的地方的参数悉数传入 input 组件，不再需要定义一堆的 props。

错误捕获

一般情况下，我们捕获错误的目的无非就是做一个通用的错误提示处理，或者做前端错误日志的采集等。
那么在 Vue 里面我们怎么捕获错误呢？

全局捕获：errorHandLer

errorHandLer: 指定组件的渲染和观察期间未捕获错误的处理函数。这个处理函数被调用时，可获取错误信息和 Vue 实例。
具体用法：

Vue.config.errorHandler = function (err, vm, info) {
  // handle error
}

组件捕获：errorCaptured

errorCaptured: 当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。
errorCaptured 是一个钩子函数，在没有阻止传播的情况下，该错误依然会被全局的 errorHandLer 捕获，所以这个更适合于处理即时性的错误，性质上有点类似于 try catch。

总结

这里只是简单记录几个自己开发过程中遇到的，不甚了解的点，如果有错误的地方，欢迎留言指正~~