Vue Mixin 的混入 了解即可

局部和全局的 mixin 混入

// 新建 mixin 文件夹
export default {
    data() {
        return {
            name: '小顾'
        }
    }
}

// 局部的导入 src/mixin/index.js
export const mixins = {
  data() {
    return {};
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {},
}

// 直接使用
<p>{{name}}</p>
// 局部使用
<script>
// 局部导入
import  mixin from './mixins'
export default {
  // 局部注册
  mixins: [mixin]
}
</script>

// 劝全局注册, 全局使用
import mixin from './mixins'
Vue.mixin(mixin)

1. 简单总结一下:

• mixin中的生命周期函数会和组件的生命周期函数一起合并执行。
• mixin中的data数据在组件中也可以使用。
• mixin中的方法在组件内部可以直接调用。
• 生命周期函数合并后执行顺序：先执行mixin中的，后执行组件的
• 不同组件中的mixin是相互独立的!
• 建议使用局部混入, 而全局混入它会影响每个单独创建的 Vue 实例 (包括第三方组件)。

2. 优点:

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

3. 缺点:

• 命名冲突
• 滥用的话后期很难维护
• 不好追溯源，排查问题稍显麻烦
• 不能轻易的重复代码