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不兼容