- 综合排序
- 最热优先
- 最新优先
- 来自专栏Vue开发社区
Composition API详解
vue3.0中新增了非常多的组合API，组合式API受到了 React Hooks 很大的启发。 Api的入口。 $store VueX } } </script> 最后 在逻辑组织和逻辑复用方面，Composition API是优于Options API，因为Composition API几乎是函数，会有更好的类型推断 ，Composition API对 tree-shaking 友好，代码也更容易压缩，Composition API中见不到this的使用，减少了this指向不明的情况，说到这里我们对Vue3.0的Composition-Api 有了一个大致的了解，可以看出composition api他更灵活，有利于写出高内聚、低耦合的代码。
1.6K21编辑于 2022-12-01 - 来自专栏方球
vue composition-api tips
Watch watch 监听 props 属性时，不能使用解构赋值 // 解构 setup({ notifie }){ const localNotifie = ref({}) const [ set, { add, remove } ] = useSet(localNotifie.value.target) // notifie 变化时， 无法触发监听 watch( () => notifie, () => {
43010发布于 2020-04-24 vue3的Composition API
什么是 Composition API？ Composition API 也叫组合式API, 是在vue3中新引入的一种API,vue2中已经有option API了，那为什么要新稿这么一套呢，其实主要原因是要解决vue2中的option API 为此Composition API通过函数的方式来组织代码，使得逻辑更加模块化和可组合，这就变得很灵活。 生命周期钩子Composition API 提供了与 Options API 对应的生命周期钩子函数，如 onMounted、onUnmounted 等。 相比于 Vue 2 的 Options API，Composition API 使得在大型项目中管理复杂逻辑变得更加容易。以下是对 Vue 3 Composition API 的详细解释：
61510编辑于 2024-08-04- 来自专栏小鑫同学编程历险记
打包 Composition API、Vue3
写作背景： 到目前为止 Vue 为我们提供了两种开发组件的 API 风格，选项式 API 和组合式 API。 组合式 API 可以由我们导入不同的 API 函数来描述组件的逻辑，在 SFC 组件中通常还会在 script 标签显示标注setup来使用。 为了可以将这些组合式 API 实现的功能进行整合，Vue 给我们提供了一种组合式函数的概念。我们可以利用组合式 API 来打包（封装和复用）这些有状态逻辑的函数。 同选项式 API 两种风格都能够欧覆盖大部分的应用场景，选项式 API 也是组合式 API 的实现，在官网的描述中我们可以在构建工具或复杂度高的场景下使用组合式 API，在其他时候按我们先来先得的选项式 API 就完全可以满足。
75320编辑于 2022-12-26 - 来自专栏云前端
对比 React Hooks 和 Vue Composition API
原文：https://dev.to/voluntadpear/comparing-react-hooks-with-vue-composition-api-4b32 Vue 最近提出了 Composition 注意: Vue Composition API 仍在不断改进，会收到特性改变的影响。在 Vue 3.0 到来之前不要把 Vue Composition API 视为 100% 确定的。 注意：可以在 Vue 2.x 中通过 @vue/composition-api 插件尝试新 API。 Composition API 提供了两个助手函数以处理 refs 和 reactive 对象。 使用 Composition API 的时候，模版 refs 和反应式 refs 是一致的。
7.4K30发布于 2020-06-15 - 来自专栏程序员poetry的专栏
vue3之Composition API详解
Composition API也叫组合式API，是Vue3.x的新特性。 通过创建 Vue 组件，我们可以将接口的可重复部分及其功能提取到可重用的代码段中。 在处理如此大的应用程序时，共享和重用代码变得尤为重要 通俗的讲： 没有Composition API之前vue相关业务的代码需要配置到option的特定的区域，中小型项目是没有问题的，但是在大型项目中会导致后期的维护性比较复杂 Vue3.x中的composition-api就是为了解决这个问题而生的 compositon api提供了以下几个函数： setup ref reactive watchEffect watch computed 非组合式api中的写法 <! 组合式api中的写法 Provider： 在 setup() 中使用 provide 时，我们首先从 vue 显式导入 provide 方法。
2.5K11发布于 2021-10-16 Vue3 Composition API 实战指南
Vue3 Composition API 实战指南 通过实际场景掌握 Vue3 Composition API 的核心用法 前言 Vue3 的 Composition API 改变了我们编写 Vue 相比 Options API，它提供了更好的逻辑复用、类型推导和代码组织能力。本文将通过几个实战场景，帮你快速掌握 Composition API 的精髓。 为什么选择 Composition API？ 的选择 何时使用 Composition API？ 开始你的 Vue3 Composition API 之旅吧！如果你有任何问题，欢迎在评论区讨论。
23510编辑于 2025-12-15- 来自专栏js笔记
vue3-Composition-API实操
我们都知道composition api是可以和options api一起使用、友好相处的，比如下面的示例： const { createApp } = Vue createApp({ data bar() { console.log('我是bar方法'); } }, }).mount('#app') 但是setup里面this指向window，composition composition-api引入了独立的数据响应式方法reactive，它可以将传入的对象做响应式处理： const state = reactive({ foo: 'foo', }) watchEffect
60930编辑于 2022-10-25 - 来自专栏前端达人
【译】Vue 3 Composition API: Ref vs Reactive
前言 Vue 3.0发布至今已经大半年过去了，我从最初的Option API的思维转换成Composition API花了很长时间，在使用过程中也出现了很多问题。 Vue 3最大的特点就是Composition API。这提供了一种创建组件的替代方法，该方法与现有的Option API截然不同。 虽然您不会使用Composition API重写整个应用程序，但可以让您思考如何进一步提高创建组件和编写功能的方式。 在开始之前，我将假设您至少已经了解了Composition API。 Ref vs Reactive 使用Options API，定义响应式性数据时必须遵循一些规则，Composition API也不例外。您不能只声明数据并期望Vue进行跟踪更改。
2.3K31发布于 2021-05-11 初识 vue3的Composition API
什么是 Composition API？ Composition API 也叫组合式API, 是在vue3中新引入的一种API,vue2中已经有option API了，那为什么要新稿这么一套呢，其实主要原因是要解决vue2中的option API 为此Composition API通过函数的方式来组织代码，使得逻辑更加模块化和可组合，这就变得很灵活。 核心概念setup 函数setup 是使用组合式API的入口函数，用于替代vue2中的data、computed 、methods等选项,setup函数参数为（props, context）props可以理解为
68510编辑于 2024-07-01- 来自专栏青年码农
Vue3 Composition API 之 setup 函数
Vue 3 中引入的一种新的编写 Vue 组件的方式，可以将 2.x 中与组件逻辑相关的选项以 API 函数的形式重新设计。 是不是可以将一个功能点涉及到的数据和逻辑组织到一起，Composition API 就这么诞生了，它很好的解决了上面的问题。 接下来认识下 Composition API，由于对 TS 支持更友好，所以 demo 用 ts 做示例 <template>
<a-button type="primary" const props = defineProps({ treeCode: String, }); } </script> script setup 是一种编译时语法糖，可在 SFC 内使用 Composition API 时极大地提升工作效率。63821编辑于 2022-12-13来自专栏Vue3《vue3第四章》Composition API 的优势，包含Options API 存在的问题、Composition API 的优势
@toc四、Composition API 的优势1.Options API 存在的问题使用传统OptionsAPI中，新增或者修改一个需求，就需要分别在data，methods，computed里修改
Composition API 的优势-图1.gif Composition API 的优势-图2.gif 2.Composition API 的优势我们可以更加优雅的组织我们的代码，函数。Composition API 的优势-图3.gif Composition API 的优势-图4.gif 44410编辑于 2024-10-30来自专栏软件开发Vue3学习笔记（二）——组合式API（Composition API）
一、常用 Composition API 官方文档: https://v3.cn.vuejs.org/guide/composition-api-introduction.html 组合式 API (Composition 对于更老的 Vue 2 版本，可以使用官方维护的插件 @vue/composition-api。 setup是所有Composition API（组合API）“ 表演的舞台 ”。 组件中所用到的：数据、方法等等，均要配置在setup中。 扩展：toRefs 与toRef功能一致，但可以批量创建多个 ref 对象，语法：toRefs(person) 二、其它 Composition API 2.1.shallowReactive 与 3.2.Composition API 的优势 我们可以更加优雅的组织我们的代码，函数。让相关功能的代码更加有序的组织在一起。
5.2K31编辑于 2022-10-31来自专栏Web前端开发Vue composition API 实现一键复制
composition API 中实现一键复制 <input type="text" ...
46810发布于 2020-12-22来自专栏云前端用 Typescript + Composition API 重构 Vue 3 组件
原文：https://vuejs-course.com/blog/vuejs-3-typescript-options-composition-api Options API、Composition API 本文会将使用 JavaScript 和 Options API 构建的传统结构 Vue 3 组件，重构为使用 TypeScript 和 Composition API 的版本。 确实这样的重构并非特别有趣，且并不为用户直接带来任何商业收益，但其确实能对开发者引发一些有意思的讨论点： 我们该使用 Composition API 还是 Options API？ Composition API vs. Options API 这可能是从 Vue 2 转换至 Vue 3 时最大一个问题了。 刚开始学 Composition API 时就是这样 -- 只要在一个 <script> 标签中构建一些小原型就好了。
1.7K30发布于 2020-07-09来自专栏前端知否Vue3 Composition API教程及示例
Vue引入了Composition API（基于功能的API）作为当前基于Option的API的补充。 该API将随Vue 3一起发布，但是现在您可以通过将Vue 3 Composition API添加到您的Vue 2应用程序中来进行尝试。 充分利用新的Vue 3 Composition API（基于函数的API）的示例：将代码拆分为函数 添加Vue Composition API会发生什么变化？ 在当前的Vue 2项目中使用Vue 3 Composition API 通过安装@vue/composition-api模块，我们可以在当前的Vue 2.x项目中使用新的Vue 3 Composition 非常简单，只需运行以下命令： npm install @vue/composition-api or yarn add @vue/composition-api 然后将其导入main.js。
5.2K20发布于 2020-03-23来自专栏林德熙的博客WPF 使用 Composition API 做高性能渲染
在 WPF 使用的 DX 只是优化等级为 9 和 DX 9 差不多的性能，微软在很多开发者的提议开放了现代渲染方法 Composition API 这是 UI 应用的里程碑的技术 现在这个技术只是最小可用版本 VisualStudio 2019 打开 通过 Nuget 还原两个库，一个是 Microsoft.Windows.SDK.Contracts 这是一个包含在桌面使用的 Windows Runtime API 而是在创建一个窗口使用 Composition 因为 WPF 的渲染和 Composition 的不相同 也是因为使用了这个技术，所以会存在一些坑，将会在本文下面告诉大家 通过 COM 等方法调用额外的系统相关的接口 如果只是创建一个空白的窗口是没法直接用到 Composition API 需要使用一些黑科技，这些代码都在 CompositionHost 因为我也看不懂，所以就跳过 如果想不开请看 Using the API 做出好看界面，但是因为主要技术是通过 HwndHost 方法，这个方法也还没有正式使用，存在下面的不足 特效依赖于 Win2d 但是现在 win2d 还没有支持桌面的 Nuget 库，需要编译源代码
2.4K20发布于 2019-04-22来自专栏云前端Vue 3 Composition API 之单元测试
原文：https://itnext.io/testing-the-composition-api-fae3bae3f592 ? Vue 3 的 Composition API 的单元测试看起来会是什么样子呢？ 为了让开发者们更早的尝鲜 Composition API，Vue 团队释出了一个让我们能在 Vue 2 中使用的插件，可以在 https://github.com/vuejs/composition-api -3-from-scratch-and-trying-the-new-composition-api-6d997f32e5b4 ，再不行就谷bai歌du一下；总有很多可用的 Composition API 总结 本文演示了如何测试一个使用了 Composition API 的组件和测试一个传统的 options API 组件时，无论是想法还是概念，都是何其相同。
1.9K10发布于 2020-06-15来自专栏九彩拼盘的叨叨叨第 008 期 用 Composition API 重构 Mixins 代码
Composition API 可以很好的解决这些问题。组件可以用 Composition API 暴露出的可响应数据。组件和 Composition API 不能读取和修改各自内部的数据和方法。 /mixin' export default { mixins: [listMixins], } </script> 用 Composition API 重构 我们用 Composition API SearchItem, TableGrid }, list, fetchList, searchQuery, } = useList() </script> 参考文档 Vue3 Composition API 如何替换 Vue Mixins Composition API 推荐阅读 聚集零散业务代码的解决方案 - Vue 3 Composition API
50100发布于 2021-04-05来自专栏Web前端开发Vue composition API 中 this.$message 的写法
$message({ type: 'success', message: '删除成功' }) ... vue composition API 写法： ... setup(props, ctx)
3.5K20发布于 2020-12-22
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号