Vue中mixin混入的使用

mixin混入

mixin定义

  1. 将组件的公共逻辑或者配置提取出来,哪个组件需要用到时,直接将提取的这部分混入到组件内部即可
    1. 可以减少代码冗余度
    2. 后期维护更加容易
  2. 是一个对象,对象里面可以包含Vue组件中的一些常见配置,如data、methods、created等

mixin和Vuex的区别

  • Vuex公共状态管理:如果在一个组件中更改了Vuex中的某个数据,那么其它所有引用了Vuex中该数据的组件也会跟着变化
  • mixin:数据和方法都是独立的,组件之间使用后是互相不影响

mixin的使用

新建mixin混入文件

  1. 新建一个命名为mixin.js的文件(文件名任意),在其中定义一个对象,在对象中配置data、methods、created等属性与生命周期钩子,最后将对象导出
  2. 如下:
    export default const mixin = {
        data () { ... },
        created () { ... },
        methods: { ... }
    }
    

使用mixin混入

全局混入

  1. 在main.js中引入mixin.js文件
    import mixin from '...mixin.js'
    
  2. 全局使用mixin混入
    Vue.mixin(mixin)
    

局部混入

  1. 在需要使用mixin混入的组件中引入mixin.js

    import mixin from '...mixin.js'
    
  2. 组件内使用mixin混入,配置mixins属性,属性值为数组,数组值为引入的mixin

    mixins: [ mixin ]
    

mixin的优先级

  1. mixin的优先级主要分以下三种情况:
    1. 对于created,mounted等生命周期函数 mixin.js文件中的代码先执行,组件中的后执行
    2. 对于data中定义的字段:
      1. mixin.js和组件中均重复定义:组件中定义组件覆盖mixin中同名字段
      2. mixin.js中定义,而组件中未定义:整合mixin.js中定义的data数据和组件中的data数据到一起
    3. method中的同名方法:组件内的同名方法覆盖mixin中的方法

mixin的优缺点

优点

  • 提高代码复用性
  • 无需传递状态
  • 维护方便,只需要修改一个地方即可

缺点

  • 容易出现命名冲突问题
  • 滥用的话后期很难维护
  • 不好追溯源,排查问题稍显麻烦

你可能感兴趣的:(Vue2,vue.js,javascript,前端)