mixins的实用案例和常见问题---何处锦绣不灰堆

mixins介绍

官方链接

说人话就是vue给我们提供了一种更加灵活的实现业务实现逻辑的方式。mixins局部使用和使用同名钩子函数的执行顺序看源码：<template> <div class="hello"> <input v-model="name" /> <button @click="func_name()">点击</button> </div> </template> <script> //验证调用先后顺序 var watchcount = { //验证调用的先后顺序 updated() { console.info(this.count + "我是mixins的updated方法"); } }; export default { name: "HelloWorld", data() { return { count: 0, name: "" }; }, mixins: [watchcount], updated() { console.info(this.count + "我是updated的方法"); }, watch: { name: function(newval, oldval) { this.count++; } } }; </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> input { width: 250px; height: 30px; outline: none; border-radius: 4px; border: 1px solid #000000; } button { width: 90px; height: 30px; outline: none; border-radius: 4px; color: #ffffff; border: none; background: burlywood; } button:hover { width: 90px; height: 30px; outline: none; border-radius: 4px; color: #000000; border: none; background: burlywood; } </style>执行结果：

1我是mixins的updated方法 1我是updated的方法

结果分析

我们首先看到了mixins是怎么使用的，我们定义一个变量，直接将我们需要的逻辑实现，这里我监听了input里面的name的指，做了一个updated的操作，每次值的变化都会引起我们mixins和vuejs的变化，那么我们验证了第一个问题就是mixins的执行顺序的问题，当存在相同钩子函数的时候，mixins是优先执行的。

mixins函数覆盖问题看源码<template> <div class="hello"> <input v-model="name" /> <button @click="func_name()">点击</button> </div> </template> <script> //验证调用先后顺序 var watchcount = { methods: { func_name() { console.info(this.count + "我是mixin里面的method的方法"); } }, }; export default { name: "HelloWorld", data() { return { count: 0, name: "", message : '您好,我是来自原生vue内容' }; }, mixins: [watchcount], methods: { func_name() { console.info(this.count + "我是原生vue里面的method的方法"); } }, watch: { name: function(newval, oldval) { this.count++; } } };执行结果

0我是原生vue里面的method的方法

结果分析

由于上面的已经将样式什么的全部贴了上来，所以这个例子就不贴样式了，自己测试的时候自己加上就可以了，这里我们说一下现象，我们可以看到的就是当我们同时使用两个同名函数的时候呢，会出现一个问题就是我们的mixins里面的函数被覆盖掉了，这个是需要注意的点。

mixins变量替换合并问题看源码<template> <div class="hello"> <input v-model="name" /> <button @click="func_name()">点击</button> </div> </template> <script> //验证同名合并性 var minxin_data = { data : function() { return { message : '您好，我是来自minxins', sex : "男" } } } export default { name: "HelloWorld", data() { return { count: 0, name: "", message : '您好,我是来自原生vue内容' }; }, mixins: [minxin_data], created() { console.info(this.$data) }, watch: { name: function(newval, oldval) { this.count++; } } }; </script>执行结果

count: 0 name: “” message: “您好,我是来自原生vue内容” sex: “男”

结果分析

我们可以看到，上面我在mixins里直接定义了message和sex，我在下面的vue实例中也定义了一个message和name、count这几个，我们要验证的是同名的会怎么样，不同名的会怎么样，结果给我们的信息是同名的会被vue里面的覆盖掉，不同名的会被加到一个新的数组里面。

全局引用mixin上面我们说的全部都是局部引用一个mixins，下面说一下怎么全局引用这个模块新建一个mixinjslet mixin = { data() { return { } }, methods: { func_name() { console.info("我是来自全局的mixin") } }, }; export default mixin;main.js注册import Vue from 'vue' import App from './App' import Mixin from './states/mixins' //路径不要写错 import router from './router' Vue.mixin(Mixin) //注册使用 Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '<App/>' })组件直接使用<template> <div class="hello"> <input v-model="name" /> <button @click="func_name()">点击</button> </div> </template>执行结果

我是来自全局的mixin 结果分析：这里我直接运行的，是可以的，前提是我将局部的和vue里面的全部都注释掉了该函数，也就是说我初步测试的结论是全局的是不比局部的优先执行的，但是网上给我的信息是全局是优先执行的，所以这个问题有待考证。这里还要注意的一个点是全局使用的是mixin是没有s的。

写到后面写到这里mixin的使用和遇到的基本的问题就写完了，但是这里简单的说一下，我们在使用的时候尽量使用我们的局部的，全局的可能会污染一些我们公共的组件中的功能，所以谨慎使用，分发路由的时候使用全局的还是很方便的。感谢您的阅读。 ---来自腾讯云社区的---何处锦绣不灰堆