mixins的实用案例和常见问题

Bertha 。 2023-07-13 03:54 12阅读 0赞

### 文章目录 ###

*   *   *  mixins介绍
         *  mixins局部使用和使用同名钩子函数的执行顺序
         *   *   *  看源码：
                 *  执行结果：
                 *  结果分析
         *  mixins函数覆盖问题
         *   *   *  看源码
                 *  执行结果
                 *  结果分析
         *  mixins变量替换合并问题
         *   *   *  看源码
                 *  执行结果
                 *  结果分析
         *  全局引用mixin
         *   *   *  新建一个mixinjs
                 *  main.js注册
                 *  组件直接使用
                 *  执行结果
         *  写到后面

### mixins介绍 ###

[官方链接][Link 1]

*  说人话就是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>
    
    
    <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，下面说一下怎么全局引用这个模块

##### 新建一个mixinjs #####

let 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/>'
    })

##### 组件直接使用 #####

##### 执行结果 #####

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

### 写到后面 ###

*  写到这里mixin的使用和遇到的基本的问题就写完了，但是这里简单的说一下，我们在使用的时候尽量使用我们的局部的，全局的可能会污染一些我们公共的组件中的功能，所以谨慎使用，分发路由的时候使用全局的还是很方便的。感谢您的阅读，喜欢的可以关注一下，一起交流讨论，也可以加我的微信进群，下篇文章见！

[Link 1]: https://cn.vuejs.org/v2/guide/mixins.html