vue的mixins

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第24天

vue的mixins（混入）

在项目开发中，有时会遇到这种情况：数个不同的组件中，用到了相同的处理，这些处理在生命周期方法中运行，例如本项目中的防抖函数，在mounted函数中均要在总线上实现监听图片加载事件，调用debounce以刷新页面，并且在组件销毁(destroyed)时取消总线上的监听，这里就用到了mixins

使用方法：

1. common中创建mixin.js文件（文件名及位置可以自己定义，这样存储取名比较规范）

2. 在mixin.js中创建并导出对象：

   export const itemListenerMixin = {
       //根据你要混入的生命周期函数来定义
       mounted() {
           //这里放的是你要混入的方法体
           let newRefresh = debounce(this.$refs.scroll.refresh, 100)
           this.itemImgListener = () => {
               newRefresh()
           }
           this.$bus.$on('itemImgLoad', this.itemImgListener)
       }
   }
   

3. 在组件中引入mixin.js文件，导入对应对象，用以下格式将其混入到组件对象中：

   mixins: [itemListenerMixin]
   

   注意这里mixins是与data及methods同级的对象

这样我们定义的方法就成功混入到对应的组件中了

• 并且要注意在混入中定义的方法与组件中自定义的生命周期函数会进行合并，混入的方法合并后在代码靠前位置，原组件的方法体在混入的方法体后
• 且不只是生命周期函数可以混入，data、componens、methods同样也可以混入，用来统一管理变量的定义，但与vuex不同的是，混入的变量是不同组件相互隔离，独自定义的，而不是共享的
• data域对象混入，如若与组件中对象键名冲突，则会优先使用组件中的对象
• 使用vue.mixin可以进行全局混入，但这样会导致所有组件均加入了混入对象，要谨慎使用