vue中如何将两个变量拼接_Vue3 Composition API如何替换Vue Mixins

想在你的Vue组件之间共享代码？如果你熟悉Vue 2 则可能知道使用mixin，但是新的Composition API 提供了更好的解决方案。

在本文中，我们将研究mixins的缺点，并了解Composition API如何克服它们，并使Vue应用程序具有更大的可伸缩性。

回顾Mixins功能

让我们快速回顾一下mixins模式，因为对于下一部分我们将要讲到的内容，请务必将其放在首位。

通常，Vue组件是由一个JavaScript对象定义的，它具有表示我们所需功能的各种属性——诸如 data，methods，computed 等。

// MyComponent.js
export default {
    
  data: () => ({
    
    myDataProperty: null
  }),
  methods: {
    
    myMethod () {
     ... }
  }
  // ...
}

当我们想在组件之间共享相同的属性时，可以将公共属性提取到一个单独的模块中：

// MyMixin.js
export default {
    
  data: () => ({
    
    mySharedDataProperty: null
  }),
  methods: {
    
    mySharedMethod () {
     ... }
  }
}

现在，我们可以通过将其分配给 mixin config属性将其添加到任何使用的组件中。在运行时，Vue会将组件的属性与任何添加的mixin合并。

// ConsumingComponent.js
import MyMixin from "./MyMixin.js";

export default {
    
  mixins: [MyMixin],
  data: () => ({
    
    myLocalDataProperty: null
  }),
  methods: {
    
    myLocalMethod () {
     ... }
  }
}
<