9. 介绍vue2中的mixins和vue3的composition api的用法、区别等

什么是mixins和composition api

mixins

mixins是一种在Vue组件中分发可复用功能的灵活方式。一个mixins对象可以包含任意的组件选项，当一个组件使用一个mixins时，所有mixins的选项将被“混合”进入该组件自身的选项。

// 定义一个混入对象
var myMixin = {
  created: function () {
    this.hello()
  },
  methods: {
    hello: function () {
      console.log('hello from mixin!')
    }
  }
}

// 定义一个使用混入对象的组件
var Component = Vue.extend({
  mixins: [myMixin]
})

var component = new Component() // => "hello from mixin!"

Composition Api

composition api是一组API，允许我们使用导入的函数来编写Vue组件，而不是声明选项。它是一个统称，涵盖了以下API：

• 反应性API，例如ref()和reactive()，允许我们直接创建反应性状态、计算状态和观察者。
• 生命周期钩子，例如onMounted()和onUnmounted()，允许我们以编程方式挂钩到组件生命周期。
• 依赖注入，即provide()和inject()，允许我们在使用反应性API时利用Vue的依赖注入系统。
• 暴露公共属性，即expose()，允许我们在组件外部访问组件实例的属性。

composition api是Vue 3和Vue 2.7的内置特性。对于旧版本的Vue 2，可以使用官方维护的@vue/composition-api插件。在Vue 3中，它主要与单文件组件中的<script setup>语法一起使用。

<script setup>
import { ref, onMounted } from 'vue'

// reactive state
const count = ref(0)

// functions that mutate state and trigger updates
function increment() {
  count.value++
}

// lifecycle hooks
onMounted(() => {
  console.log(`The initial count is ${count.value}.`)
})
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

composition api的主要优势是，它可以以可组合函数的形式实现干净、高效的逻辑复用。它解决了mixins的所有缺点，mixins是Options API的主要逻辑复用机制。

composition api还提供了更灵活的代码组织方式。许多用户喜欢我们使用Options API时默认编写有组织的代码：每个选项都有其所属的位置。然而，Options API在单个组件的逻辑超过一定的复杂度阈值时，就会带来严重的限制。这种限制在需要处理多个逻辑关注点的组件中尤为突出，这是我们在许多生产Vue 2应用中亲眼目睹的。

如何使用和比较mixins和composition api

mixins

mixins的用法：

在组件选项中使用mixins数组，将一个或多个mixins对象混合到组件中。

mixins对象可以包含data、props、computed、methods、watch、生命周期钩子等任意组件选项。

当组件和mixins对象包含同名选项时，它们将以适当的方式进行合并。

例如，data对象会进行递归合并，同名钩子函数会合并为一个数组，同名方法会被组件覆盖。

可以使用全局混入，但要谨慎使用，因为它会影响每个创建的Vue实例，包括第三方组件。

可以使用自定义选项合并策略，向Vue.config.optionMergeStrategies添加一个函数。

mixins的区别：

• mixins是一种基于对象的代码复用方式，它会将mixins对象的属性和方法混合到组件实例中，这可能会导致命名冲突、数据来源不清晰、逻辑分散等问题。

• mixins不利于类型推断，需要使用Vue.extend()或Vue.component()来声明组件类型，这会增加代码的冗余和复杂度。

• mixins不支持``tree shaking```，即使没有使用mixins，也会将其打包到最终的构建中，这会增加构建的大小和运行时的开销。

composition api

composition api的用法：

在组件中使用setup()函数作为composition api的入口点，它接收props和context两个参数。

在setup()函数中，可以使用反应性API(ref, relative)创建和返回反应性状态，也可以使用其他composition api，如生命周期钩子、依赖注入、暴露公共属性等。

在单文件组件中，可以使用<script setup>语法，以更简洁和优雅的方式编写composition api，不需要显式地返回状态或方法。

可以使用自定义的可组合函数，将相关的逻辑封装在一个函数中，然后在setup()函数中调用它们，实现逻辑的复用和组合。

composition api的区别：

• composition api是一种基于函数的代码复用方式，它不会修改组件实例，而是通过返回对象来暴露状态和方法，这可以避免命名冲突、数据来源不清晰、逻辑分散等问题。

• composition api利于类型推断，可以使用TypeScript的类型注解来声明和检查状态和方法的类型，这可以提高代码的可读性和可维护性。

• composition api支持树摇，只有使用的API才会被打包到最终的构建中，这可以减少构建的大小和运行时的开销。

mixins和composition api的优缺点

mixins的优点：

• 灵活地分发可复用功能
• 与Options API保持一致
• 兼容Vue 2和Vue 3

mixins的缺点：

• 可能导致命名冲突、数据来源不清晰、逻辑分散等问题
• 不利于类型推断
• 不支持tree shaking

composition api的优点：

• 实现干净、高效的逻辑复用和组合
• 利于类型推断
• 支持tree shaking
• 提供更灵活的代码组织方式

composition api的缺点：

• 需要学习新的API和语法
• 需要使用插件或Vue 3才能使用
• 与Options API不兼容