Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Vue3 关于组合式API

Vue3 关于组合式API

原创
作者头像
程序员海军
发布于 2023-11-05 15:42:58
发布于 2023-11-05 15:42:58
2140
举报
文章被收录于专栏:前端笔记ing前端笔记ing

什么是Vue3 组合式API

组合式 API (Composition API) 是一系列 API 的集合,使我们可以使用函数而不是声明选项的方式书写 Vue 组件。

它涵盖了以下API:

● 响应式 API:例如 ref() 和 reactive(),使我们可以直接创建响应式状态、计算属性和侦听器。

● 生命周期钩子:例如 onMounted() 和 onUnmounted(),使我们可以在组件各个生命周期阶段添加逻辑。

● 生命周期钩子:例如 onMounted() 和 onUnmounted(),使我们可以在组件各个生命周期阶段添加逻辑。

组合式 API 并不是函数式编程。组合式 API 是以 Vue 中数据可变的、细粒度的响应性系统为基础的,而函数式编程通常强调数据不可变。

为什么要用组合式API ?

更好的逻辑复用

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

更灵活的代码组织

更好的类型推倒

组合式 API 主要利用基本的变量和函数,它们本身就是类型友好的。

TypeScript + 组合式API 享受到类型推倒的快乐,书写更健壮可靠的代码

更小的生产包体积

这是由于 <script setup> 形式书写的组件模板被编译为了一个内联函数,和 <script setup> 中的代码位于同一作用域。不像选项式 API 需要依赖 this 上下文对象访问属性,被编译的模板可以直接访问 <script setup> 中定义的变量,无需一个代码实例从中代理。这对代码压缩更友好,因为本地变量的名字可以被压缩,但对象的属性名则不能。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
Vue3 组合式 API 的特性、用法和最佳实践
Vue3 是一种流行的 JavaScript 框架,它引入了全新的组合式 API,在开发大型和复杂的应用程序时提供了更灵活和强大的工具。本文将详细介绍 Vue3 组合式 API 的特性、用法和最佳实践。
网络技术联盟站
2023/07/05
9800
Vue3学习笔记(二)——组合式API(Composition API)
官方文档: https://v3.cn.vuejs.org/guide/composition-api-introduction.html
张果
2022/10/31
4.4K0
Vue3学习笔记(二)——组合式API(Composition API)
vue3 -- 通过简单示例,聊一聊Composition API
在 vue3 版本之前,我们复用组件(或者提取和重用多个组件之间的逻辑),通常有以下几种方式:
奋飛
2020/12/09
1.9K0
vue3 -- 通过简单示例,聊一聊Composition API
在 vue3 版本之前,我们复用组件(或者提取和重用多个组件之间的逻辑),通常有以下几种方式:
奋飛
2021/08/30
5330
vue3 -- 通过简单示例,聊一聊Composition API
Vue3 初探
3.更友好 提出 composition Api,无论代码的编写还是查看都更加清晰方便
epoos
2022/06/06
7900
Vue3组合式API使用教程
简介通过使用 Vue组合式API ,我们可以将界面中重复的部分连同其功能一起提取为可重用的代码段。
零云
2023/07/24
3470
vue3的Composition API
Composition API 也叫组合式API, 是在vue3中新引入的一种API,vue2中已经有option API了,那为什么要新稿这么一套呢,其实主要原因是要解决vue2中的option API的在处理复杂组件逻辑的局限性,例如逻辑分散、代码复用性差、类型推断困难、组件组织混乱、响应式系统限制、模板逻辑复杂性、组件测试困难等问题。为此Composition API通过函数的方式来组织代码,使得逻辑更加模块化和可组合,这就变得很灵活。
iwhao
2024/08/04
1310
VueJs中如何自定义hooks(组合式)函数
在Vue当中,一个非常重要的功能就是组件的复用,编写Vue组件,更多的也是在拼装组件,将页面的各个功能进行模块化
itclanCoder
2023/02/26
7170
VueJs中如何自定义hooks(组合式)函数
vue3组合式api
这个思想上有点类似流程控制框架,将一个组件中的多个关注点分离、抽取,然后能进一步复用、编排
阿超
2022/08/21
3220
打包 Composition API、Vue3
到目前为止 Vue 为我们提供了两种开发组件的 API 风格,选项式 API 和组合式 API。组合式 API 可以由我们导入不同的 API 函数来描述组件的逻辑,在 SFC 组件中通常还会在 script 标签显示标注setup来使用。
前端小鑫同学
2022/12/26
6160
vue2升级vue3:组合式 API之Setup(props,context)—Vue2.x到Vue3注意
vue3出来已经很长一段时间,项目已经用起来了。本篇是使用过程的中的一些零零散散的笔记的。
周陆军博客
2022/06/24
1.6K0
vue3之Composition API详解
没有Composition API之前vue相关业务的代码需要配置到option的特定的区域,中小型项目是没有问题的,但是在大型项目中会导致后期的维护性比较复杂,同时代码可复用性不高。Vue3.x中的composition-api就是为了解决这个问题而生的
前端进阶之旅
2021/10/16
2.2K0
vue3之Composition API详解
Vue3 学习笔记 —— (一)深入理解组合式 API
Vue3 是向下兼容 Vue2 API 的,但是 Vue3 中提供了一种全新的 Composition API
Gorit
2021/12/08
7530
Vue3 学习笔记 —— (一)深入理解组合式 API
vue3简易入门剖析
,发音同 “veet”)是一种新型前端构建工具,能够显著提升前端开发体验。它主要由两部分组成:
张哥编程
2024/12/13
4210
再遇vue之vue3新特性
首先说明一下,vue2和vue3是Vue.js的两个主要版本。目前vue3已经更新到3.3.4的版本了
用户6297767
2023/11/21
5490
再遇vue之vue3新特性
前端学习|什么是vue
Vue.js是目前在国内最流行的前端框架之一,说最流行是因为目前来看使用人数比较多,在项目中最常用。Vue (发音为 /vjuː/,类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建,并提供了一套声明式的、组件化的编程模型,帮助你高效地开发用户界面。无论是简单还是复杂的界面,Vue 都可以胜任。在2020年9月18日,她迎来了属于自己的v3.0版本,而Vue 2 将于 2023 年 12 月 31 日停止维护。
六月暴雪飞梨花
2023/11/19
4462
前端学习|什么是vue
最全系列的vue3入门教程『图文并茂』
Vue 3 是一个流行的开源JavaScript框架,用于构建用户界面和单页面应用。它带来了许多新特性和改进,包括更好的性能、更小的打包大小、更好的TypeScript支持、全新的组合式 API,以及一些新的内置组件。
linwu
2023/07/27
5.1K0
最全系列的vue3入门教程『图文并茂』
是时候系统学习一下Vue3在Web前端中的用法了!
大家都知道互联网的技术框架更新迭代得非常快,自己如果不及时跟上就容易落伍,尤其是当一门技术或者一个框架在行业内火起来之后,这时候如果还不去学习它就容易让自己被时代所淘汰。Vue3发布都一年多了,最近接手公司项目的前端工程里就开始全面使用Vue3了。笔者也了解到,自从vue3在2020年发布之后,由于Vue3相比Vue2具有很多优势,因此国内很多互联网公司在构建前端项目时都已经开始转向使用Vue3。因为项目需要而去学总显得有些被动,毕竟现学现用多少会在一定程度上耽误自己的工作进展。而平时利用周末时间主动学习掌握的东西等到工作中需要时,直接上手即可,省去了从零开始学习的成本,当然在工作项目中用起来也是对自己学习成果的检验和强化!
用户3587585
2022/03/11
2.1K0
是时候系统学习一下Vue3在Web前端中的用法了!
Vue3 中有哪些值得深究的知识点?
众所周知,前端技术一直更新很快,这不 vue3 也问世这么久了,今天就来给大家分享下vue3中值得注意的知识点。喜欢的话建议收藏,点个关注!
玖柒的小窝
2021/12/07
1.1K0
Vue3 中有哪些值得深究的知识点?
VUE3全家桶精讲
有 <script setup> 之前,如果要定义 props, emits 可以轻而易举地添加一个与 setup 平级的属性。
HelloWorldZ
2024/03/20
2850
VUE3全家桶精讲
相关推荐
Vue3 组合式 API 的特性、用法和最佳实践
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档