Vue中的Mixin理解

当有不同组件的选项存在相同处理时，Vue为我们提供了一种叫做Mixin的混入功能。
它通过递归操作，将Mixin对象上的选项与组件中的选项合并，避免了组件间相同处理的代码冗余。
下面，我在项目中创建了一个叫做Comment的组件，然后将此组件作为另一个组件Mixin选项后，新组件就完全复制了Comment组件的功能。

Comment.vue

<template>
...
</template>

<script>
import writecontent from "../components/Writecontent";
export default {
  name: "comment",
  data() {
    return {
      ...
    };
  },
  computed: {
    ...
  },
  created() {
    console.log("这是Comment组件的created钩子函数");
  },
  methods: {
    ...
  },
  components: {
    writecontent: writecontent
  }
};
</script>

Mixin组件

<template>
  <template>
...
</template>
</template>

<script>
export default {
  mixins: [mcomment]
};
</script>

上面两个组件的template内容完全相同，只是Mixin组件内部选项只设定了mixins为comment，最终的效果即Mixin组件完全复制了Comment组件的功能。

合并时的注意点

数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。

//Comment组件的script
export default {
  name: "comment",
  data() {
    return {
      //index: undefined,
      //list: [],
      //flgEdit: false,
      test:"这是Comment组件的test"
    };
  }
};

//Mixin组件的script
import mcomment from "../components/Comment";
export default {
  mixins: [mcomment],
  data(){
      return {
          test:"这是Mixin组件的test"
      }
  }
};

混入后，效果为：

• 同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。

//定义全局混入，将每个组件的生命周期，输出到控制台
Vue.mixin({
  created(){
    console.log("触发了去全局定义的混入")
  }
})

//Mixin组件定义
import mcomment from "../components/Comment";
export default {
  mixins: [mcomment],
  created(){
      console.log('这是Mixin组件内部的created钩子函数')
  }
};

• 值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。