随着前端开发的框架的越来越流行，对性能和代码的冗余度也有各种各样的解决方案，其中复用是最核心的也是被广泛使用的方式，项目开发中经常会把共有的部分组件或者数据抽出来做成组件化。
vue也提供了mixin数据混入，本质其实还是单独抽出一部分数据或者钩子、方法等，然后在有需要的组件页面中直接混入，此时当前组件便拥有了该混入的功能。
写个常用的实例，在mixin文件夹中创建xxx.js
mixin：
export const myMixins = {
data() {
return {
} //可以混入重复的数据
},
inject: ['Id'], //vue提供的另外一种数据传递方式，用于父组件向子孙组件传递数据，某些组件嵌套链中都会用到的属性
computed: {
regionId() {
return this.Id() //获取id
}
},
watch: {
Id: {
handler: function() {
this.getData && this.getData() //只要全局的某个属性变化，那么就自动执行一次更新数据的函数
},
immediate: true //首次进入立即执行一次
}
}
}
inject， provide和inject是成对出现的 （这个我单独写一篇细说）
作用：用于父组件向子孙组件传递数据
使用方法：provide在父组件中返回要传给下级的数据，inject在需要使用这个数据的子辈组件或者孙辈等下级组件中注入数据。
使用场景：由于vue有$parent属性可以让子组件访问父组件。但孙组件想要访问祖先组件就比较困难。通过provide/inject可以轻松实现跨级访问父组件的数据
组件中：
import {
myMixins } from '../mixins/xxx'
export default {
mixins: [ myMixins ],
data() {
return {
}
}
methods: {
getData() {
//统一对外暴露为getData，这样，mixin就可以统一触发了
this.xxx()
},
async xxx(){
} //更新数据的方法
}