理解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