vue中mixins的使用必知

mixins

mixins 是一种可以扩展组件功能的复用对象.
该混合对象可以包含组件中的任何属性.
当一个组件使用该混合对象时,混合对象的属性会合并当前组件的属性.

mixins和工具组件的区别

组件在引用之后相当于在父组件内开辟了一块单独的空间，来根据父组件props过来的值进行相应的操作，单本质上两者还是泾渭分明，相对独立.

而mixins则是在引入组件之后，则是将组件内部的内容如data等方法、method等属性与父组件相应内容进行合并。相当于在引入后，父组件的各种属性方法都被扩充了.

mixins的使用特别简单

定义一个getter.js 用于向组件提供store中getter数据

import { mapGetters } from "vuex";

const getters = {
  data() {
    return {
      num: 0,
    };
  },
  computed: {
    ...mapGetters(["name"]),
  },
};

export default getters;

在组件中使用

<script>
import getters from "@/mixins/getters";

export default {
  name: "extends",
  mixins: [getters],   //引入mixins对象
  components: {},
  data() {
    return {};
  },
  computed: {},
  created() {
    console.log(this.name);  //打印出 store中的name数据
    this.num++;  // 在组件中操作mixins的num数据
    console.log(this.num);  // 打印出1
  },
  methods: {},
};
</script>

mixins的特点

方法和参数在各组件中不共享

我们在另外一个组件中引入该mixins对象

<script>
import getters from "@/mixins/getters";

export default {
  data() {
    return {};
  },
  mixins: [getters],
  created() {
    console.log(this.num);  // 打印出 0
  },
  methods: {},
};
</script>

结论: 虽然在组件1中的参数num进行+1的操作,但是组件2中的num值仍是mixins中mum的初始值.

钩子函数先优先执行mixins的然后再执行组件的

getters.js文件

const getters = {
  data() {
    return {
      num: 0,
    };
  },
  computed: {
    ...mapGetters(["name"]),
  },
  created() { //添加钩子函数
    console.log("mixins created");  
  },
};

组件文件

export default {
  name: "extends",
  mixins: [getters],
  components: {},
  data() {
    return {};
  },
  computed: {},
  created() { //添加钩子函数
    console.log("component 1 created");
  },
  methods: {},
};

结论: 先输出“mixins created”,然后才输出“component 1 created”.说明钩子数据的执行mixins的优先于组件的执行.

组件的data、methods等如果与mixins定义的重名,组件数据会覆盖mixins数据

export default {
  name: "extends",
  mixins: [getters],
  components: {},
  data() {
    return {
      num: 10,  //与mixins的num重名
    };
  },
  computed: {},
  created() {
    console.log(this.num);   //打印 10
  },
  methods: {},
};

与vuex的区别

vuex：用来做状态管理的，里面定义的变量在每个组件中均可以使用和修改，在任一组件中修改此变量的值之后，其他组件中此变量的值也会随之修改。

Mixins：可以定义共用的变量，在每个组件中使用，引入组件中之后，各个变量是相互独立的，值的修改在组件中不会相互影响。

与公共组件的区别

组件：在父组件中引入组件，相当于在父组件中给出一片独立的空间供子组件使用，然后根据props来传值，但本质上两者是相对独立的。

Mixins：则是在引入组件之后与组件中的对象和方法进行合并，相当于扩展了父组件的对象与方法，可以理解为形成了一个新的组件。