Vue——mixin的使用

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/HarryHY/article/details/102003815

VUE官网给我们解释了

mixins 选项接受一个混入对象的数组。这些混入实例对象可以像正常的实例对象一样包含选项，他们将在 Vue.extend() 里最终选择使用相同的选项合并逻辑合并。举例：如果你的混入包含一个钩子而创建组件本身也有一个，两个函数将被调用。

Mixin 钩子按照传入顺序依次调用，并在调用组件自身的钩子之前被调用。
首先要了解的是什么是mixin（通俗）
——mixin是Vue给我们提供的混入的方法

一般适用的场景：

1.在项目中临时增加了一个需求（但是这个需求只存在一定的时间比如节假日促销）
2.项目中出现了大量的重复的方法（重复调用）

下面直接上代码（后面会有一些注意的事项）

在你的项目中创建一个文件夹mixin在index.js文件
我这里是Cache.js

export const Cache =  {
  data() {
    return {};
  },
  methods: {
    setCache() {
    },
    //取出缓存信息
    getCache() {
    }
  },
  created() {
    this.getCache();
  },
  destroyed() {
    this.setCache();
  }
};

然后在你的想要调用的组件书写

import  {Cache}  from "../../mixin/Cache";
export default {
  mixins:[Cache],
}

这个是我直接定义的一个const
还有一种是下面这种

export default {
  data() {
    return {};
  },
  methods: {
    setCache() {
      //判断缓存状态 做存取
     
    },
    //取出缓存信息
    getCache() {
     
    }
  },
  created() {
    this.getCache();
  },
  destroyed() {
    this.setCache();
  }
};

还是在你的页面调用

import  Cache  from "../../mixin/Cache";
export default {
  mixins:[Cache],
}

注意事项

在使用mixin时
mixin也是可以存在生命周期的，并且mixin的生命周期执行的顺序要大于组件本身的执行周期

例如：

1.mixin中有一个created 你组件也有一个created 这时会先执行mixin的created在执行组件的created
2.全局的mixin的生命周期执行的顺序会大于以上所说的所有

全局mixin执行 > mixin > 组件的生命周期钩子函数

mixin里面的方法名和组件里的方法名有冲突时 这个时候mixin的优先级小于组件的所以会触发组件的方法名
所以大家不要重名了哦