vue3的composition替代mixin

一、mixin的缺点

1、命名冲突 vue组件的默认（但可选择配置）合并策略决定了本地选项将覆盖混合器选项。但是也有例外，如果我们有 多个相同类型的生命周期钩子，那么这些钩子将会倍添加到钩子数组中，并且多有的钩子都将被依此调用。

2、隐含的依赖关系 混合器和消耗她的组件之间没有层级关系，这意味着，组件可以使用混入器重定义的数据属性（如mySharedDataProperty），但混入器也可以使用它假定在组件中定义的数据属性（如myLocalDataProperty）。当混合器被用于共享输入验证时，通常会出现这种情况。mixin可能会期望一个组件有一个输入值，它将在自己的validate方法中使用。

现在想象一下一个有一大堆mixin的组件，我们可以重构一个本地数据吗？我们可以重构一个本地数据属性吗，或者会不会破坏一个混搭？哪一个混杂项呢？我们必须手动搜索它们才能知道。

二、vue3的composition

1、例子：使用composition API定义的计数器组件

// Counter.vue
import { ref, computed } from "vue";

export default {
  setup() {
    const count = ref(0);
    const double = computed(() => count * 2)
    function increment() {
      count.value++;
    }
    return {
      count,
      double,
      increment
    }
  }
}

2、composition的优点

（1）代码提取

（2）代码重用

（3）命名冲突解决了

我们需要显式命名任何状态或从组成函数返回的方法

export default {
  setup () {
    const { someVar1, someMethod1 } = useCompFunction1();
    const { someVar2, someMethod2 } = useCompFunction2();
    return {
      someVar1,
      someMethod1,
      someVar2,
      someMethod2
    }
  }
}

（4）隐式依赖关系解决了

一个组合函数可能会使用消耗组件上定义的数据属性，这可能会使代码变得很脆弱，而且很难推理。

而组合函数也可以调用消耗组件中定义的本地变量。但不同的是，这个变量现在必须显式传递给组成函数。

import useCompFunction from "./useCompFunction";

export default {
  setup () {
    // some local value the a composition function needs to use
    const myLocalVal = ref(0);

    // it must be explicitly passed as an argument
    const { ... } = useCompFunction(myLocalVal);
  }
}

（5）包装起来

mixin模式表面上看起来很安全，然而，通过合并对象来共享代码，由于它给代码增加了脆弱性，并且掩盖了推理功能的能力，因此成为一种反模式

composition API允许vue依靠原生JS内置的保障措施来共享代码，比如将变量传递给函数以及模块系统