Vue 2 Mixin 混入

混入（Mixins）是一种在Vue组件中重用代码的方式。它允许你定义一些可复用的选项对象，然后将这些选项合并到不同的组件中。混入可以用于在多个组件之间共享逻辑、方法、生命周期钩子等。

示例：

<!DOCTYPE html>
<html><head><title>Vue mixin demo</title><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head><body><div id="app"><my-component></my-component></div><script>// 定义一个混入对象const myMixin = {data() {return {message: 'Hello from mixin!'}},methods: {greet() {console.log(this.message)}}}Vue.component('my-component', {mixins: [myMixin],template: '<div>{{message}}</div>',created() {this.greet()}})var vm = new Vue({el: '#app',});</script>
</body></html>

选项合并

当组件和混入对象的选项同名时，数据对象data中同名选项以组件的优先，进行递归合并；同名钩子函数则会被合并为数组，它们都会执行，且混入对象的钩子函数先执行。

对于methods、components、directives这些值为对象的选项，同名键的合并例子如下：

<!DOCTYPE html>
<html><head><title>Vue mixin demo</title><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head><body><div id="app"></div><script>const mixin = {methods: {greet() {console.log('Hello from Mixin!');},sayHello() {console.log('Mixin says hello!');},}};var Component = Vue.extend({methods: {greet() {console.log('Hello from extend!');},sayHello() {console.log('extend says hello!');},sayGoodbye() {console.log('extend says goodbye!');}}});new Component({mixins: [mixin],methods: {greet() {console.log('Hello from component!');},},created() {this.greet();        // Output: Hello from component!this.sayHello();     // Output: Mixin says hello!this.sayGoodbye();   // Output: extend says goodbye!}});</script>
</body></html>

由上面得出选项合并优先级：new Component > mixins > Vue.extend。

全局混入

全局混入会影响每一个Vue实例。

使用Vue.mixin({})方法创建全局混入。

尽量避免使用全局混入，这样会导致逻辑分散、代码难以阅读、维护困难。

⭐自定义选项合并策略

下面是一个示例：

const customMergeStrategies=Vue.config.optionMergeStrategies
customMergeStrategies.customOption=function(parentVal,childVal){if(!childVal) return parentValif(!parentVal) return childVal//合并逻辑，可根据需要修改return parentVal.concat(childVal)
}