Vue.js mixin 和 mixins 区别

mixin ⽤于全局混⼊，会影响到每个组件实例，通常插件都是这样做初始化的,但是这种⽅式会影响到每个组件的 beforeCreate 钩⼦函数

//文档也不建议我们直接使⽤ mixin，我还没用过

mixins 如果多个组件中有相同的业务逻辑， 就可以将这些逻辑剥离出来，通过 mixins 混⼊代码，⽐如上拉下拉加载数据、窗体禁止拖拽。

需要注意的是 mixins 混⼊的钩⼦函数会先于组件内的钩⼦函数执⾏（生命周期），并且在遇到同名选项的时候也会有选择性的进⾏合并。
Mixins：可以定义共用的变量，在每个组件中使用，引入组件中之后，各个变量是相互独立的，值的修改在组件中不会相互影响。

//用法 就是导出一个模块
//这是一个electron-vue 窗体禁止拖拽 功能
// 全局监听drag和drop事件，当用户拖入一个文件但是又不是拖入可拖拽区域的时候，将其屏蔽掉
// 避免electron应用像浏览器那样，拖入pdf或图片会自动打开
const disDrag = {
    mounted () {
        this.disableDragEvent()
    },
    methods: {
        disableDragEvent () {
            window.addEventListener('dragenter', this.disableDrag, false)
            window.addEventListener('dragover', this.disableDrag)
            window.addEventListener('drop', this.disableDrag)
        },
        disableDrag (e) {
            const dropzone = document.getElementById('upload-area') // 这个是可拖拽的上传区
            if (dropzone === null || !dropzone.contains(e.target)) {
                e.preventDefault()
                e.dataTransfer.effectAllowed = 'none'
                e.dataTransfer.dropEffect = 'none'
            }
        }
    },
    beforeDestroy () {
        window.removeEventListener('dragenter', this.disableDrag, false)
        window.removeEventListener('dragover', this.disableDrag)
        window.removeEventListener('drop', this.disableDrag)
    }
}

export {disDrag};

//接下来就是引入了  如果是vue的话可以直接引入到APP.vue中
//这个方法可是比引入工具函数好用多了吧！可以在不同的生命周期中写逻辑，最最重要的就是引入简单呀！！！
import {disDrag} from "../assets/js/vue_disDrag";

export default {
  mixins:[disDrag],
  name: "test.vue",
  data () {
    return {
      num:0
    }
  },
  mounted() {}

下面说一下合并的情况,我刚才说了默认情况下, mixins将首先被调用, 然后是组件，但是如果你有特殊逻辑，需要用到组件内部的方法时，就跟mixins调用相同的函数，这时候就会合并，结果就是vue实例组件胜出，vue组件的函数会覆盖mixins里的函数。