一、mixins

1、简介

​ mixins 又称 混入，是指将一些可复用的代码（JS、生命周期钩子函数等等）抽离出来，定义成mixins模块，然后混入到多个组件中，从而实现组件间的逻辑代码共享，减少重复代码。当组件使用mixins模块时，mixins模块内部的代码将会被“混合”进组件的代码，代码“混合”逻辑与Vue.extend()相同，具体逻辑下面有讲解。

2、基础使用

​ mixins模块在组件内是通过与data、mounted、methods等钩子函数同级的mixins钩子调用的，该钩子的值是一个数组，里面包含要混入当前组件的mixins模块，这些模块的混入顺序按照mixins钩子数组的排列顺序执行，而且mixins模块内如果包含生命周期钩子函数，则模块内的钩子函数执行顺序先于组件本身的钩子函数。

案例代码：

// 定义一个mixin模块 mixin.js
export default {created: function () { console.log('这里是mixin1模块的created') }
}// 在组件实例中引入并使用定义的mixin模块
// 引入mixin模块
import mixin from "../mixins/mixin";
export default {created: function () { console.log('这里是组件本身的created') },// 使用mixin模块mixins: [mixin]
}

执行结果：

3、选项合并

​ 当组件与引入的mixins模块含有同名选项时，这些钩子将依照下面的规则进行合并（ Vue.extend()的合并逻辑相同）：

​ ① mixins模块中的data数据对象，将与组件的data数据进行递归合并，如果存在同名数据，则取组件内的数据值。

​ 当组件引入多个mixins模块时，将按照mixins钩子数组的排列顺序进行合并，如果mixins模块之间存在同名数据，则取排序最后的那个mixins模块的数据值，当然，如果该数据在组件内也存在，则还是取组件内的数据值。

案例代码：

// 定义一个mixin1.js模块
export default {data() {return {a: 1, // 第一个混入模块中的变量ab: 11 // 第一个混入模块中的变量b}},
}
// 定义一个mixin2.js模块
export default {data() {return {a: 2, // 第二个混入模块中的变量ab: 22 // 第二个混入模块中的变量b}},
}// 在组件实例中引入并使用定义的mixin模块
// 引入两个mixin模块
import mixin1 from "../mixins/mixin1";
import mixin2 from "../mixins/mixin2";
export default {data() {return {b: 0, // 组件内的变量b};},mounted() {// 组件内不存在这个变量 两个混入模块存在同名变量 最终值取决于模块引用顺序console.log("经过合并后变量a的值是-----", this.a);// 组件内存在这个变量 最终值取组件内的值console.log("经过合并后变量b的值是-----", this.b);},// 使用两个mixin模块 注意先后顺序 决定同名变量的最终取值mixins: [mixin1, mixin2],
}

执行结果：

​ ② mixins模块中的钩子函数，将与组件内的同名钩子函数合并成一个数组，依次执行，且mixins模块中的钩子函数在组件同名钩子函数之前调用执行。不同名的钩子函数，依旧按照钩子函数的先后顺序执行。

​ 当组件引入多个mixins模块时，如果mixins模块之间存在同名钩子函数，则会按照mixins钩子数组的排列顺序合并成一个数组，排列顺序与执行顺序相同，排序靠前的mixins模块中的同名钩子函数先执行，排序靠后的后执行，最终才会执行组件本身的同名钩子函数。

案例代码：

// 定义一个mixin1.js模块
export default {created: function () { console.log('这里是mixin1模块的created') },
}
// 定义一个mixin2.js模块
export default {created: function () { console.log('这里是mixin2模块的created') },mounted: function () { console.log('这里是mixin2模块的mounted') },
}// 在组件实例中引入并使用定义的mixin模块
// 引入两个mixin模块
import mixin1 from "../mixins/mixin1";
import mixin2 from "../mixins/mixin2";
export default {created() {console.log("这里是组件本身的created");},// 使用两个mixin模块 注意先后顺序 决定同名钩子函数的执行顺序mixins: [mixin1, mixin2],
}

执行结果：

​ ③ mixins模块中的methods、components等值为对象的选项，将会与组件内部的对应选项合并为一个对象，当对象中的键名发生冲突时，则取组件内的键名对应的值。

​ 当组件引入多个mixins模块时，如果mixins模块之间的选项存在同名冲突时，则会按照mixins钩子数组的排列顺序进行覆盖，后面的mixins会覆盖前面的mixins，键名对应的值将取排在最后的mixins模块中对应的值，当然，如果该键名在组件内也存在，则最终还是取组件内的对应的值。

案例代码：

// 定义一个mixin1.js模块
export default {methods: {test() {console.log('这里是mixin1模块methods中的test函数')},test1() {console.log('这里是mixin1模块methods中的test1函数')}},
}
// 定义一个mixin2.js模块
export default {methods: {// 如果mixin模块之间存在键名冲突 则以组件中mixin数组的引用顺序为准// 取排序最后的键名对应的值test1() {console.log('这里是mixin2模块methods中的test1函数')}},
}// 在组件实例中引入并使用定义的mixin模块
// 引入两个mixin模块
import mixin1 from "../mixins/mixin1";
import mixin2 from "../mixins/mixin2";
export default {mounted() {this.test();this.test1();},// 使用两个mixin模块 注意先后顺序 决定键名冲突的最终结果mixins: [mixin1, mixin2],methods: {// 如果mixin模块与组件本身键名冲突 则以组件为最终结果test() {console.log("这里是组件本身methods中的test函数");},},}

执行结果：

总结：

​ 当一个组件使用了多个mixins时，它们的顺序很重要。因为当mixins之间的选项存在冲突时，后面的mixins会覆盖前面的mixins。而且同名钩子函数的执行顺序也取决于多个mixins的顺序。

​ 当组件与mixins的选项存在冲突时，一切以组件为准。

​ 在使用多个mixins时，记得注意命名冲突问题。

4、全局混入

​ 上面我们举的例子都是在组件中依次引入mixins模块，如果我们想要在多个组件中，甚至是所有组件中都引入某个mixins模块，如果在每个组件中都引入一次，就太过繁琐。此时我们可以使用全局混入特性。

​ 全局混入是指将声明的mixins模块，在main.js文件中的全局Vue实例创建之前，通过Vue.mixin()方法，挂载到Vue上。其作用相当于全局引入了mixins模块，会影响到每一个单独创建的Vue页面实例和组件，因此请慎用该特性！！！

​ 如果全局混入的mixins模块中包含生命周期钩子函数，那么该钩子函数将会根据当前页面做包含的Vue实例数量来决定执行的次数，main.js文件的中的 全局Vue实例也算。

案例代码：

// 定义一个allmixin.js 模块
export default {created: function () { console.log('这里是全局mixin模块的created') },methods: {test() {console.log('这里是全局mixin模块methods中的test函数')}},
}// 在main.js中引入并进行全局混入
import Vue from 'vue'
import App from './App.vue'
import allMixin from './mixins/allMixin'
// 一定要在 new Vue 之前  否则不起作用
Vue.mixin(allMixin)
// 创建全局Vue实例
new Vue({render: h => h(App),
}).$mount('#app')// 此时的页面结构
// mian.js的new Vue -> APP.vue -> test.vue

执行结果：

5、自定义选项

​ 我们该可以结合this.$options自定义选项来使用全局混入，只有使用自定义选项的组件才会触发相关逻辑，从而局限mixins模块中部分代码的作用范围：

案例代码：

// 定义一个allmixin.js 模块
export default {created: function () {// 自定义选项 并接收传递的值const myOptionValue = this.$options.myOption// 输出传递的值if (myOptionValue) {console.log('-*------', myOptionValue)}},
}// 在main.js中引入并进行全局混入
import Vue from 'vue'
import App from './App.vue'
import allMixin from './mixins/allMixin'
// 一定要在 new Vue 之前  否则不起作用
Vue.mixin(allMixin)
// 创建全局Vue实例
new Vue({render: h => h(App),
}).$mount('#app')// 在组件使用全局混入中自定义的选项
export default {data() {return {}},// 使用自定义选项myOption: "这是我向自定义选项传递的字符串",
}

执行结果：

​ mixins模块中的自定义选项在合并时，使用的是默认策略，即简单的覆盖已有的值。当然我们也可以通过Vue.config.optionMergeStrategies来自定义合并逻辑：

// 自定义合并逻辑
Vue.config.optionMergeStrategies.myOption = function (toVal, fromVal) {// 返回合并后的值
}
// 或者
// 采用现有逻辑 与methods相同
Vue.config.optionMergeStrategies.myOption = Vue.config.optionMergeStrategies.methods

​

二、provide/inject

1、简介

​ provide/inject 是Vue在2.2.0版本新增的特性，该特性可以实现祖先组件向其后代组件跨层级传递数据，无论两者中间相隔多少组件层级，相对于传统的props传递方式，减少了传递数据的繁琐操作，提升了代码的可读性和可维护性。该特性与React 框架的上下文特性很相似。

​ 但是过多的使用provide/inject 特性，会增加组件之间的耦合性，降低组件的可复用性，因此使用该特性时要谨慎，不可滥用。而且provide和inject的绑定并不是响应式的，传递的数据并不会自动响应数据变化，如果想要响应数据变化，请借助data或computed。

2、provide

​ provide选项需要在祖先组件中使用，作用是向后代组件传递数据，其选项值为一个对象或一个返回值为对象的函数，对象的属性即为要向其后代组件传递的数据。传递的数据可以是任意类型的数据，如基本类型、对象、函数等等。

​ provide选项中支持使用 ES2015 Symbols 作为 key，但是只在原生支持 Symbol 和 Reflect.ownKeys 的环境下可工作

案例代码：

// provide 的选项值为一个对象
export default {data() {return {}},provide: {a: "这是祖先组件向后代组件传递的字符串数据",b: {c: "这是祖先组件向后代组件传递的对象数据",},f: function () {console.log("这是祖先组件向后代组件传递的函数数据");},},
}// provide 的选项值为一个返回值为对象的函数
export default {data() {return {}},provide() {return {a: "这是祖先组件向后代组件传递的字符串数据",b: {c: "这是祖先组件向后代组件传递的对象数据",},f: function () {console.log("这是祖先组件向后代组件传递的函数数据");},};},
}

3、inject

​ inject选项是在后代组件中使用，作用是接收祖先组件传递的数据，其选项值为一个字符串数组（推荐）或一个对象。更推荐使用字符串数组的形式，其中数组元素对应的是provide对象中的key，通过this.数组字符串元素的形式来访问祖先组件传递的对应数据；如果使用对象形式，则需要通过键值对来接收数据，键名表示当前组件内的访问名称，value为字符串，对应的是provide对象中的key，通过this.键名的形式来访问祖先组件传递的对应数据。

案例代码：

// inject 的选项值为一个字符串数组（推荐）
export default {data() {return {}},inject: ["a", "b", "f"],
}// inject 的选项值为一个对象（不推荐）
export default {data() {return {}},inject: {a: "a",b: "b",f: "f",},
}// 在后代组件中通过inject接收传递的数据之后 调用传递的数据
mounted() {console.log("inject接收的祖先组件传递过来的字符串数据-----", this.a);console.log("inject接收的祖先组件传递过来的对象数据-----", this.b);console.log("inject接收的祖先组件传递过来的函数数据-----", this.f);
},

执行结果：

4、进阶知识

① 在Vue的2.2.1版本之后，后代组件中通过inject接收传递的数据，会在props和data初始化之前得到，因此我们可以使用inject中的数据给props和data中的数据设置默认值。

export default {inject: ['foo'],props: {a: {default() {return this.foo}}},data() {return {b: this.foo}},
}

② 在Vue的2.5.0 版本之后，我们可以给选项值为对象形式的inject中的数据设置默认值，使其在祖先组件中变成可选项，即在不传递数据时，后代组件依旧能正常工作。from属性设置数据源，default属性设置默认值。

与props设置默认值类似，如果直接将非原始值(复杂数据类型)作为默认值，那么它将成为所有子组件实例之间共享的引用，相互之间会产生影响。因此我们需要对非原始值(复杂数据类型)使用一个工厂方法，以便于每次使用默认值时都获得一个新的副本，而不是共享同一个引用。

export default {inject: {// 当组件内名称与祖先组件的key相同时，可省略form属性foo: { default: 'foo' },// 当组件内名称与祖先组件的key不同时，需要通过form属性指定对应的数据bar: {from: 'barFather',default: 'bar'},// 对复杂数据类型使用一个工厂方法arr: {from: 'arr',default: () => [1, 2, 3]},},data() {return {}},
}

三、参考资料

Vue官方文档

ChatGPT