在vue的使用过程中会遇到各种场景，当普通使用时觉得没什么，但是或许优化一下可以更高效更优美的进行开发。下面有一些我在日常开发的时候用到的小技巧，在下将不定期更新~
感兴趣的同学可以加文末的微信群，一起讨论吧～
1. 多图表resize事件去中心化
1.1 一般情况
有时候我们会遇到这样的场景，一个组件中有几个图表，在浏览器resize的时候我们希望图表也进行resize，因此我们会在父容器组件中写：
mounted() { setTimeout(() => window.onresize = () => { this.$refs.chart1.chartWrapperDom.resize() this.$refs.chart2.chartWrapperDom.resize() // ... }, 200) destroyed() { window.onresize = null } 复制代码
这样子图表组件如果跟父容器组件不在一个页面，子组件的状态就被放到父组件进行管
理，为了维护方便，我们自然希望子组件的事件和状态由自己来维护，这样在添加删除组件的时候就不需要去父组件挨个修改
1.2 优化
这里使用了lodash的节流throttle函数，也可以自己实现，这篇文章也有节流的实现可以参考一下。 以Echarts为例，在每个图表组件中：
computed: { /** * 图表DOM */ chartWrapperDom() { const dom = document.getElementById('consume-analy-chart-wrapper') return dom && Echarts.init(dom) }, /** * 图表resize节流，这里使用了lodash，也可以自己使用setTimout实现节流 */ chartResize() { return _.throttle(() => this.chartWrapperDom && this.chartWrapperDom.resize(), 400) } }, mounted() { window.addEventListener('resize', this.chartResize) }, destroyed() { window.removeEventListener('resize', this.chartResize) } 复制代码
1.3 再次优化
感谢 @JserWang 的提醒，这里因为多个 chart 实例都使用同一套初始化逻辑，可以使用 extends 来考虑复用，因此我想到了 Vue 提供的 Mixins，所以我在这里做了点优化，可以让每个同类型的 chart 组件更优雅一点： 新建一个 mixin.js 文件：
import Echarts from 'echarts' import _ from 'lodash' export default { computed: { /* 图表DOM */ $_chartMixin_chartWrapperDom() { const dom = document.getElementById(this.thisDomId) return dom && Echarts.init(dom) }, /** 图表resize节流，这里使用了lodash，也可以自己使用setTimout实现节流 */ $_chartMixin_chartResize() { return _.throttle(() => this.$_chartMixin_chartWrapperDom.resize(), 400) } }, methods: { /* 图表初始化 */ $_chartMixin_initChart() { this.$_chartMixin_chartWrapperDom.setOption({ /* options */ }) }, mounted() { this.$_chartMixin_initChart() window.addEventListener('resize', this.$_chartMixin_chartResize) }, destroyed() { window.removeEventListener('resize', this.$_chartMixin_chartResize) } } 复制代码
然后在每个 chart 组件中：
<script type='text/javascript'> import ChartMixin from './mixin' export default { mixins: [ChartMixin], data() { return { thisDomId: 'consume-analy-chart-wrapper' } } } </script> 复制代码
这样就可以在每个图表组件中混入之前在 mixin.js 中定义的 resize 事件逻辑，且自动初始化，并在 destroyed 的时候自动销毁事件~
当然可以进一步优化一下，比如一个页面有多个图表的话，上面的实现就力有不逮了，这里需要重构一下，具体代码可以参照 chartInitMixin - Github 的实现~
2. 全局过滤器注册
2.1 一般情况
官方注册过滤器的方式：
export default { data () { return {} }, filters:{ orderBy (){ // doSomething }, uppercase () { // doSomething } } } 复制代码
但是我们做项目来说，大部分的过滤器是要全局使用的，不会每每用到就在组件里面去写，抽成全局的会更好些。官方注册全局的方式：
// 注册 Vue.filter('my-filter', function (value) { // 返回处理后的值 }) // getter，返回已注册的过滤器 var myFilter = Vue.filter('my-filter') 复制代码
但是分散写的话不美观，因此可以抽出成单独文件。
2.2 优化
我们可以抽出到独立文件，然后使用Object.keys在main.js入口统一注册
/src/common/filters.js
let dateServer = value => value.replace(/(\d{4})(\d{2})(\d{2})/g, '$1-$2-$3') export { dateServer } 复制代码
/src/main.js
import * as custom from './common/filters/custom' Object.keys(custom).forEach(key => Vue.filter(key, custom[key])) 复制代码
然后在其他的.vue 文件中就可愉快地使用这些我们定义好的全局过滤器了
<template> <section class="content"> <p>{{ time | dateServer }}</p> <!-- 2016-01-01 --> </section> </template> <script> export default { data () { return { time: 20160101 } } } </script> 复制代码
3. 全局组件注册
3.1 一般情况
需要使用组件的场景：
<template> <BaseInput v-model="searchText" @keydown.enter="search"/> <BaseButton @click="search"> <BaseIcon name="search"/> </BaseButton> </template> <script> import BaseButton from './baseButton' import BaseIcon from './baseIcon' import BaseInput from './baseInput' export default { components: { BaseButton, BaseIcon, BaseInput } } </script> 复制代码
我们写了一堆基础UI组件，然后每次我们需要使用这些组件的时候，都得先import，然后声明components，很繁琐，这里可以使用统一注册的形式
3.2 优化
我们需要借助一下神器webpack，使用 require.context() 方法来创建自己的模块上下文，从而实现自动动态require组件。这个方法需要3个参数：要搜索的文件夹目录、是否还应该搜索它的子目录、以及一个匹配文件的正则表达式。 我们在components文件夹添加一个叫componentRegister.js的文件，在这个文件里借助webpack动态将需要的基础组件统统打包进来。
/src/components/componentRegister.js
import Vue from 'vue' /** * 首字母大写 * @param str 字符串 * @example heheHaha * @return {string} HeheHaha */ function capitalizeFirstLetter(str) { return str.charAt(0).toUpperCase() + str.slice(1) } /** * 对符合'xx/xx.vue'组件格式的组件取组件名 * @param str fileName * @example abc/bcd/def/basicTable.vue * @return {string} BasicTable */ function validateFileName(str) { return /^\S+\.vue$/.test(str) && str.replace(/^\S+\/(\w+)\.vue$/, (rs, $1) => capitalizeFirstLetter($1)) } const requireComponent = require.context('./', true, /\.vue$/) // 找到组件文件夹下以.vue命名的文件，如果文件名为index，那么取组件中的name作为注册的组件名 requireComponent.keys().forEach(filePath => { const componentConfig = requireComponent(filePath) const fileName = validateFileName(filePath) const componentName = fileName.toLowerCase() === 'index' ? capitalizeFirstLetter(componentConfig.default.name) : fileName Vue.component(componentName, componentConfig.default || componentConfig) }) 复制代码
这里文件夹结构：
components │ componentRegister.js ├─BasicTable │ BasicTable.vue ├─MultiCondition │ index.vue 复制代码
这里对组件名做了判断，如果是index的话就取组件中的name属性处理后作为注册组件名，所以最后注册的组件为：multi-condition、basic-table最后我们在main.js中import 'components/componentRegister.js'，然后我们就可以随时随地使用这些基础组件，无需手动引入了~
4. 不同路由的组件复用
4.1 场景还原
当某个场景中vue-router从/post-page/a，跳转到/post-page/b。然后我们惊人的发现，页面跳转后数据竟然没更新？！原因是vue-router"智能地"发现这是同一个组件，然后它就决定要复用这个组件，所以你在created函数里写的方法压根就没执行。通常的解决方案是监听$route的变化来初始化数据，如下：
data() { return { loading: false, error: null, post: null } }, watch: { '$route': { // 使用watch来监控是否是同一个路由 handler: 'resetData', immediate: true } }, methods: { resetData() { this.loading = false this.error = null this.post = null this.getPost(this.$route.params.id) }, getPost(id){ } } 复制代码
4.2 优化
为了实现这样的效果可以给router-view添加一个不同的key，这样即使是公用组件，只要url变化了，就一定会重新创建这个组件。
<router-view :key="$route.fullpath"></router-view> 复制代码
还可以在其后加+ +new Date()时间戳，保证独一无二
感谢网友 @rolitter 的提醒，如果组件被放在<keep-alive>中的话，可以把获取新数据的方法放在activated钩子，代替原来在created、mounted钩子中获取数据的任务。
