Vue 之 mixins 和 provide/inject

一、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, // 第一个混入模块中的变量a
      b: 11 // 第一个混入模块中的变量b
    }
  },
}
// 定义一个mixin2.js模块
export default {
    
    
  data() {
    
    
    return {
    
    
      a: 2, // 第二个混入模块中的变量a
      b: 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