vue3 新特性

念衢

已于 2022-11-11 23:56:02 修改

阅读量1.6k

点赞数

分类专栏： vue3学习文章标签： vue.js javascript 前端

于 2022-11-11 23:56:01 首次发布

本文链接：https://blog.youkuaiyun.com/qq_45947664/article/details/127810473

版权

Vue3引入了组合式API，它是一系列API的集合，包括响应性API、生命周期钩子和依赖注入等。组合式API的主要优势在于提高了逻辑复用的效率，提供了更灵活的代码组织方式，且在生产包体积上更小。setup函数作为组合式API的入口点，允许在组件创建前使用props和上下文。ref和reactive分别用于简单数据和对象数据的响应性处理，替代了data和methods。在setup中，props和context用于访问和修改组件状态，实现父子组件的数据传递。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

重点：组合式API

what——组合式 API

▣组合式 API 是一系列 API 的集合，使我们可以使用函数而不是声明选项的方式书写 Vue 组件。它是一个概括性的术语，涵盖了以下方面的 API：

▣响应性 API：例如ref()和reactive()，使我们可以直接创建响应式状态、计算属性和侦听器。
生命周期钩子：例如onMounted()和onUnmounted()，使我们可以在组件各个生命周期阶段添加逻辑。
▣依赖注入：例如provide()和inject()，使我们可以在使用响应性 API 时，利用 Vue 的依赖注入系统。

why——组合式 API

1、组合式 API 最基本的优势是它使我们能够通过组合函数来实现更加简洁高效的逻辑复用。它解决了所有mixins的缺陷，那是选项式 API 中一种逻辑复用机制。

2、更灵活的代码组织
选项式 API 在单个组件的逻辑复杂到一定程度时，也面临了一些限制，主要体现在需要处理多个逻辑关注点的组件中，同一个逻辑关注点相关的代码没有被归为了一组，程序员为了一个逻辑关注点在不同的选项块间来回滚动切换，如果是大项目，后期维护非常困难。

3、生产包体积更小
搭配<script setup>使用组合式 API 比等价情况下的选项式 API 更高效，对代码压缩也更友好。这是由于<script setup>;形式书写的组件模板被编译为了一个内连函数，和<script setup>中的代码位于同一作用域。不像选项式 A