理解Vue.mixin，利用Vue.mixin正确的偷懒

　　关于Vue.mixin在vue官方文档中是这么解释的：

　　混入 (mixin) 提供了一种很是灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象能够包含任意组件选项。当组件使用混入对象时，全部混入对象的选项将被“混合”进入该组件自己的选项。

 

　　咱们的理解：Vue.mixin给咱们提供了一种混入Vue实例的方法，建立了混入对象以后，咱们自定义的方法或者变量能够很轻松的挂载在Vue实例上，给咱们的偷懒带来方便；

　　Vue.mixin为咱们提供了两种混入方式：局部混入和全局混入；

　　本文仍是以demo形式来进行学习讲解，若是有条件最好仍是跟着demo敲一遍，这样印象才会深入；

　　局部混入：

　　　　顾名思义就是部分混入，也就是只有引入了mixin的混入对象才可使用，而且只有在引入了mixin混入对象的组件中才生效；

　　　   来，知道了概念，咱们一块儿来看看代码：

　　　　首先本身搭建Vue的开发环境，而后咱们在src目录中新建两个vue文件，分别是page1.vue和page2.vue；

　　　　page1.vue

<template>
    <div>page1的值是:</div>
</template>

<script> export default { data () { return { } }, } </script>

<style scoped>

</style>

 

　　　　page2.vue

<template>
    <div>page2的值是:</div>
</template>

<script> export default { data () { return { } } } </script>

<style scoped>

</style>

　　而后咱们修改App.vue

<template>
  <div id="app">
    <button @click="method1">page1</button>
    <button @click="method2">page2</button>

    <router-view></router-view>
  </div>
</template>

<script> export default { name: 'App', methods:{ method1(){ this.$router.push('/page1'); }, method2(){ this.$router.push('/page2'); } } } </script>

<style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>

　　在src目录下建立router.js文件，配置路由实现跳转

import Vue from "vue"; import VueRouter from "vue-router"; Vue.use(VueRouter); import page1 from "./page1"; import page2 from "./page2"; const routes=[ {path:"/page1",component:page1}, {path:"/page2",component:page2} ] const router=new VueRouter({ routes }) export default router

　　最后将路由引入main.js中：

// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue' import App from './App' import router from './router.js' Vue.config.productionTip = false


/* eslint-disable no-new */
new Vue({ el: '#app', router, components: { App }, template: '<App/>' })

　　完成上述准备工做以后，咱们能够看到如今的页面效果以下：

 

 

 

 

 

 

 　　没有报错，咱们开始正式进入学习Vue.mixin：

　　首先咱们在src目录下新建一个名为mixin的文件夹并在mixin文件中建立一个mixin.js文件：

//抛出混入对象，方便外部访问
export const mixin={ data(){ return { number:1 } } }

　　能够看到咱们在混入对象中建立了一个变量，是的，混入对象跟Vue实例的格式是同样的；

　　而后咱们能够将mixin.js引入到咱们的page1.vue和page2.vue中

　　page1.vue

<template>
    //这里读的值实际上是mixin的值，由于这个时候mixin已经混入到vue实例中了
    <div>page1的值是:{{number}}</div>
</template>

<script>
//引入mixin.js
import {mixin} from "./mixin/mixin" export default { //这里注意：属性名为mixins，值为数组类型
 mixins:[mixin], data () { return { } }, } </script>

<style scoped>

</style>

　　page2.vue

<template>
    <div>page2的值是:{{number}}</div>
</template>

<script> import {mixin} from "./mixin/mixin" export default { mixins:[mixin], data () { return { } } } </script>

<style scoped>

</style>

　　这个时候咱们的混入对象已经成功混入到Vue实例中，大家能够点击看看效果，是能够正常运行而且能读取到值的；

　　如今咱们来修改page1.vue的代码：　

<template>
    <div>page2的值是:{{number}}</div>
</template>

<script> import {mixin} from "./mixin/mixin" export default { mixins:[mixin], data () { return { } } } </script>

<style scoped>

</style>

　　page2不变，再运行能够发现，咱们的page1.vue中的值是执行了mounted，因此产生了自增

　　由此，咱们能够知道mixin混入对象的变量是不会共享的；也就是你page1发生了变化，并不会通知mixin进行实时刷新数据，发生的变化只会在page1.vue中生效，不影响其余组件；

　　如今咱们修改mixin.js和page1.vue中的代码：

　　mixin.js

export const mixin={ data(){ return { number:1 } }, created(){ console.log("mixin混入对象") } }

　　page1.vue

<template>
    <div>page1的值是:{{number}}</div>
</template>

<script> import {mixin} from "./mixin/mixin" export default { mixins:[mixin], data () { return { } }, created(){ console.log("这里是page1"); } } </script>

<style scoped>

</style>

　　这个时候咱们再运行能够发现控制台输出是这个样子的：

　　

 

 

 　　是的，mixin混入对象中声明了：若是是同名钩子函数将合并为一个数组，所以都被调用，可是混入对象的钩子将在自身实例钩子以前触发；

 

　　 值为对象的选项，例如methods,components等若是变量名和mixin混入对象的变量名发生冲突，将会以组件优先并进行递归合并，至关于组件数据直接覆盖了mixin中的同名数据；

　　 咱们能够修改代码mixin.js和page1.vue

　　 mixin.js

export const mixin={ data(){ return { number:1 } }, methods:{ demo1(){ console.log("mixin混入对象") } } }

 

　　page1.vue

<template>
    <div>page1的值是:{{number}}</div>
</template>

<script> import {mixin} from "./mixin/mixin" export default { mixins:[mixin], data () { return { number:10 } }, mounted(){ this.demo1(); }, methods:{ demo1(){ console.log("这里是page1"); } } } </script>

<style scoped>

</style>

　　运行代码咱们能够很清晰的看到都是执行咱们组件内的值；

　　由于在vue中咱们在实例中声明变量也是经过键值对的形式来声明的，其实也是一个对象；

 

 

　　

 　　全局混入：

　　　　全局混入咱们只须要把mixin.js引入到main.js中，而后将mixin放入到Vue.mixin()方法中便可；

　

// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue' import App from './App' import router from './router.js' import mixin from "./mixin/mixin.js" Vue.config.productionTip = false Vue.mixin(mixin) /* eslint-disable no-new */
new Vue({ el: '#app', router, components: { App }, template: '<App/>' })

 

　　　是的，全局混入更为便捷，咱们将不用在子组件声明，全局混入将会影响每个组件的实例，使用的时候须要当心谨慎；这样全局混入以后，咱们能够直接在组件中经过this.变量/方法来调用mixin混入对象的变量/方法；

 

　　不少同窗可能看到这里会有一些疑问，这不就跟Vuex差很少嘛，其实不是的：

　　mixin混入对象和Vuex的区别：

　　　　Vuex是状态共享管理，因此Vuex中的全部变量和方法都是能够读取和更改并相互影响的；

　　　　mixin能够定义公用的变量或方法，可是mixin中的数据是不共享的，也就是每一个组件中的mixin实例都是不同的，都是单独存在的个体，不存在相互影响的；

　　　　mixin混入对象值为函数的同名函数选项将会进行递归合并为数组，两个函数都会执行，只不过先执行mixin中的同名函数；

　　　　mixin混入对象值为对象的同名对象将会进行替换，都优先执行组件内的同名对象，也就是组件内的同名对象将mixin混入对象的同名对象进行覆盖；

 

原文出处：https://www.cnblogs.com/dengyao-blogs/p/11589962.html