directives的作用是减少DOM操作的重复
mixins的作用是减少data、methods、钩子的重复

创建mixin文件

将重复的data、methods、钩子放到一个js文件内

  1. const log = {
  2.   data() {
  3.     return {
  4.       name: undefined,
  5.       time: undefined
  6.     };
  7.   },
  8.   created() {
  9.     if (!this.name) {
  10.       throw new Error("need name");
  11.     }
  12.     this.time = new Date();
  13.     console.log(`${this.name}出生了`);
  14.   },
  15.   beforeDestroy() {
  16.     const now = new Date();
  18.     console.log(`${this.name}死亡了，共生存了 ${now - this.time} ms`);
  19.   }
  20. };
  22. export default log;

在其他文件中引入mixins

  1. <template>
  2.   <div>Child1</div>
  3. </template>
  5. <script>
  6. // 引入文件
  7. import log from "../mixins/log.js";
  8. export default {
  9.   data() {
  10.     return {
  11.       name: "Child1"
  12.     };
  13.   },
  14.   created() {
  15.     console.log("Child 1 的 created");
  16.   },
  17.   // 设置mixins
  18.   mixins: [log]
  19. };
  20. </script>

选项合并

当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。

  • 数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。
  • 同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。
  • 值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。