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

1
2
3
4
5
watch: {
$route(to, from) {
// XXXX
}
}

给 router-view 绑定一个 unique key

1
2
// $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” 传入内部组件——在创建高级别的组件时非常有用。
示例:

1
2
3
4
5
6
7
8
9
10
<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 实例。
具体用法:

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

组件捕获:errorCaptured

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

总结

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

查看评论