"　　关于 Vue.mixin 在 vue 官方文档中是这么解释的：　　混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。　　我们的理解：Vue.mixin ...."

someone1
AI专业者开发社区 1 号成员
AI开发者社区 • 0 回帖 • 7 浏览 • 4 个月前

理解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>
&lt;router-view&gt;&lt;/router-view&gt;

</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 混入对象的同名对象进行覆盖；

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

相关帖子

随便看看

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