[TOC]

在项目的main.js文件中,有可能会出现
image.png
Vue.mixin(customizedMixin);…
new Vue(…);
这里的Vue.mixin()方法是将引入的customizedMixin文件(主要是customizedMixin文件中的全局方法、生命周期钩子中的特殊处理、以及其他属性如data、watch等等)挂载到全局。

当全局引入的customizedMixin中有部分函数、同名变量的定义在子组件中也同时存在,那么子组件的方法、同名变量会覆盖全局引入的customizedMixin。
举例如下:
// customizedMixin.js
data() {return { a: 3 }}

// Child.vue

如果有部分通用的功能不需要全局混入,也可以在组件内通过与components、data、computed同级的mixins属性引入。用法如下。
// ChildA.vue
components: {},
mixins: [commonFuncMixin, windowSizeMixin],
data() {},
computed: {}

在项目的main.js文件中,大概率能看到
Vue.use() 如
image.png
上面的VideoPlayer我们称它为插件(Plugin)

插件本质上是一个函数。它接受Vue实例作为第一个参数,也接受第二个可选参数。
形如function(Vue, options) {}
image.png
一般情况下,我们用对象的形式提供插件。并通过Vue.use()方法使用
image.png
Vue.use()方法调用了插件里的install()方法实现了全局混入。