了解 Vue 中混入 mixin 的使用

子曰：万里之行，始于足下。

环境

1. OS: windows 10
2. 应用：Vuejs + Android 壳的 hybrid app 应用
3. IDE： Visual Studio Code

问题

在最近的 hybrid app 项目中，有一个需求是需要使用 aliyun 的 oss 进行对 pdf、txt、word、xlsx 的预览，而图片、视频则需要在调用 Native 的方法进行预览。

这个需求在项目的多处使用，例如列表页、详情页等。

解决方案

开始简单的将预览的相关代码复制一份，COPY TO Everywhere。后期在测试、维护的时候发现，当一处有BUG 时，需要将所有的修改都 COPY 一份，导致工作量大增，而且极易出错。

优化方案

后来发现可以使用 Vue 的混入 mixin 来解决代码在多处复用的问题。

混入 mixin

基础

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

选项合并

当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。

1. 数据对象在内部会进行递归合并，并在发生冲突时移组件数据有限（组件优先）。
2. 值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对（组件优先）。
3. 同名钩子函数（例如：beforeCreate 、created 、beforeMount 、mounted 、beforeUpdate 、updated 、activated 、deactivated 、beforeDestroy 、destroyed ）将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用（混入优先）。

例子

1. 在文件中新建一个 mixin 文件夹，文件夹中在建一个 mixin.js 用来放入混入的代码。

   src
   -- api
   -- common
   -- mixin
   ---- mixin.js
   -- components

2. 在 mixin.js 写入需要混入的代码

   export default {
     data () {
       return {
         name: 'mixin-name',
         title: 'mixin-title'
       }
     },
   
     created(){
       console.log('mixin-created')
     },
     mounted(){
       console.log('mixin-created')
     },
   
     methods: {
       handleClick(){
         console.log('mixin-methods-handleClick')
         this.name = 'mixin-name-2'
       },
       handleClick2(){
         console.log('mixin-methods-handleClick2')
       }
     },
   }

3. 在 .vue 单文件中引入

   <template>
   <div class="layout">
     <h1>{{name}}</h1>
     <h2>{{title}}</h2>
     <button @click="handleClick">btn1</button>
     <button @click="handleClick2">btn2</button>
   </div>
   </template>
   <script>
   import mixin from "@/views/index/mixin/mixin.js";
   export default {
     mixins: [mixin],
     data () {
       return {
         title: 'title'
       }
     },
     
     created(){
       console.log('sfc-created')
     },
     mounted(){
       console.log('sfc-created')
     },
   
     methods: {
       handleClick2(){
         console.log('sfc-methods-handleClick2')
       }
     },
   }
   </script>
   <style scoped>
   </style>

4. 页面运行效果
   图片0

   

   图片1

   

5. 点击 btn1 的效果
   图片2

   

   图片3

   

6. 点击 btn2 的效果
   图片4

   

   图片5

   

验证

1.图片0 中的title ，验证了

1. 数据对象在内部会进行递归合并，并在发生冲突时移组件数据有限（`组件优先`）。

2.图片1 中的mixin-created 在sfc-created 验证了

3. 同名钩子函数（例如：`beforeCreate` 、`created` 、`beforeMount` 、`mounted` 、`beforeUpdate` 、`updated` 、`activated` 、`deactivated` 、`beforeDestroy` 、`destroyed` ）将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子`之前`调用（`混入优先`）。

3.点击 btn2 ，使得图片5 中的输出的是 sfc-methods-handleClick2 验证了

2. 值为对象的选项，例如 `methods`、`components` 和 `directives`，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对（`组件优先`）。

参考文档

1.Vue.js 官方文档混入