Vue.js组件开发从1到100

100

如果说从0到1是解决温饱的过程，那么从1到100就是实现共同富裕的漫漫长路。

认真看过Vue.js官方文档和《Vue.js组件开发从0到1》的同学相信已经能胜任正常的业务开发了，但就像前文中提到的“实现同样一个小功能，可以有千万种写法”，作为一个积极向上的程序猿，我们始终在思考怎样才能写出优雅的代码，也就是更适合当前业务场景的代码。本文希望和大家共同探索学习如何从1到100优雅地开发Vue.js组件。

组件的基本逻辑复用 - mixins

说到基于Vue.js的前端项目中的代码复用，个人总结下来有三种：

复用类型	复用形式	例子
UI复用	组件	通用对话框
框架无关的纯js逻辑复用	工具类	日期时间转换工具类
与框架相关的逻辑复用（使用了框架的相关接口）	mixin	页面渲染测速上报

UI复用我们已通过组件来实现。纯js逻辑的复用我们一般会把可复用代码抽离到一个工具类里，通过模块化的方式引入到各处使用。而与框架相关的逻辑代码怎么复用呢？例如这部分逻辑代码作为组件生命周期钩子函数的回调。Vue给我们提供了一种解决方案-混合 (mixins)。

mixins在官方文档中被定义为“一种分发 Vue 组件中可复用功能的非常灵活的方式”，其行为与继承特别像。 在mixin里定义的属性、方法会被自动挂载到使用该mixin的组件上。与继承不同的是，当mixin中定义的方法与组件中方法同名时，这两个同名方法都会被保留下来，并且默认优先执行mixin中的方法，而同名的是对象时，组件的键值对会覆盖mixin中对应的键值对。但选项合并的策略也是能自定义的，具体的例子请参考官方文档-选项合并和官方文档-自定义渲染合并策略，这里将举个页面渲染测速上报的例子来说明mixins的用法。

在页面（页面也就是一个组件）加载前（beforeCreate）记录时间点，在页面挂载到DOM后（mounted）再记录一个时间点，就能算出当前页面渲染耗时。这里可以看到，我们主要使用了Vue.js提供的生命周期钩子beforeCreate和mounted，代码如下：

<template>
<div>页面测速demo</div>
</template>
<script>
export default {
    startTime: 0,
    beforeCreate() {
        console.log('beforeCreate');
        this.startTime = Date.now();
    },
    mounted() {
        console.log('mounted');
        console.log((Date.now() - this.startTime) + ' ms');
        // 数据上报
    }
};
</script>

页面渲染过程（部分）如下timeline（时间线）所示：