- 综合排序
- 最热优先
- 最新优先
- 来自专栏Vue开发社区
Composition API详解
setup () { onMounted(()=>{ // }); onUnmounted(()=> { // }); } }; 生命周期2.x与Composition onBeforeUnmount destroyed -> onUnmounted errorCaptured -> onErrorCaptured setup 理解 setup()函数是vue3中专门新增的方法，可以理解为Composition $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 - 来自专栏FECoding
浅谈 Composition Event
Composition Event，中文译为复合事件，是 DOM 3 级事件中新添加的一类事件类型，用于处理 IME 的输入序列。 注：本文参考尤雨溪博客中 DOM COMPOSITION EVENTS COMPATIBILITY NOTES 一文。
1.8K20发布于 2019-04-25 - 来自专栏技术点滴
组合模式（Composition）
组合模式（Composition） 组合模式（Composition） 意图：将对象组合成树形结构以表示“部分-整体”的层次结构，使得用户对单个对象和组合对象的使用具有一致性。
80760发布于 2018-02-05 - 来自专栏方球
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通过函数的方式来组织代码，使得逻辑更加模块化和可组合，这就变得很灵活。 生命周期钩子Composition API 提供了与 Options API 对应的生命周期钩子函数，如 onMounted、onUnmounted 等。 Vue 3 的 Composition API 是一种新的方式来定义和组织组件的逻辑，它提供了更灵活、可组合和可重用的代码结构。 相比于 Vue 2 的 Options API，Composition API 使得在大型项目中管理复杂逻辑变得更加容易。以下是对 Vue 3 Composition API 的详细解释：
61510编辑于 2024-08-04- 来自专栏数据小魔方
sparklines迷你图系列13——Composition(TreeMap)
今天跟大家分享的是sparklines迷你图系列12——Composition(TreeMap)。
927100发布于 2018-04-11 - 来自专栏数据小魔方
sparklines迷你图系列15——Composition(BoxPlot)
今天要跟大家分享的是sparklines迷你图系列14——BoxPlot。 箱线图是用于呈现数据分布形态（功能类似直方图）的一种图表，对于连续型数据，箱线图可以展现数据分布的极差、中值以及各个分位数，
81840发布于 2018-04-11 - 来自专栏小鑫同学编程历险记
打包 Composition API、Vue3
到目前为止 Vue 为我们提供了两种开发组件的 API 风格，选项式 API 和组合式 API。组合式 API 可以由我们导入不同的 API 函数来描述组件的逻辑，在 SFC 组件中通常还会在 script 标签显示标注setup来使用。
75420编辑于 2022-12-26 - 来自专栏数据小魔方
sparklines迷你图系列12——Composition(Cascade)
今天继续跟大家分享的sparklines迷你图系列12——Composition(Cascade)。 不知道为啥这个图的名字英文看起来这么怪，但是其实他就是我们之前分享过的瀑布图。
1.2K40发布于 2018-04-11 - 来自专栏云前端
对比 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
2.5K11发布于 2021-10-16 - 来自专栏数据小魔方
sparklines迷你图11——Composition(Stacked)
今天要分享的是sparklines迷你图系列12——Composition(Stacked)。 Stack中文含义为堆积，该图表也就是我们常用到的堆积图。
68070发布于 2018-04-11 - 来自专栏前端达人
【译】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，而不是Composition API的机制，如果您对这方面的深入教程感兴趣，请告诉我。
2.3K31发布于 2021-05-11 Vue3 Composition API 实战指南
Vue3 Composition API 实战指南 通过实际场景掌握 Vue3 Composition API 的核心用法 前言 Vue3 的 Composition API 改变了我们编写 Vue 本文将通过几个实战场景，帮你快速掌握 Composition API 的精髓。 为什么选择 Composition API？ -- Composition API --> <script setup> import { ref } from 'vue' const count = ref(0) const increment ; } :root.dark { --bg-color: #1a1a1a; --text-color: #ffffff; } </style> 与 Options API 的选择 何时使用 Composition 开始你的 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 - 来自专栏青年码农
Vue3 Composition API 之 setup 函数
是不是可以将一个功能点涉及到的数据和逻辑组织到一起，Composition API 就这么诞生了，它很好的解决了上面的问题。 接下来认识下 Composition API，由于对 TS 支持更友好，所以 demo 用 ts 做示例 <template>
<a-button type="primary" background: @main-color-theme1; } } </style> 代码中我们可以看到，少了一些选项，功能点逻辑更加集中，看不懂没关系，这里只是演示，后面会详细讲解，这篇文章主要讲解 Composition const props = defineProps({ treeCode: String, }); } </script> script setup 是一种编译时语法糖，可在 SFC 内使用 Composition63821编辑于 2022-12-13初识 vue3的Composition API
什么是 Composition API？ Composition API 也叫组合式API, 是在vue3中新引入的一种API,vue2中已经有option API了，那为什么要新稿这么一套呢，其实主要原因是要解决vue2中的option API 为此Composition API通过函数的方式来组织代码，使得逻辑更加模块化和可组合，这就变得很灵活。
68610编辑于 2024-07-01来自专栏数据小魔方sparklines迷你图系列12——Composition（Pie）
今天分享sparklines迷你图系列13——Composition（Pie）。 大家看到名字就肯定知道是饼图了。
92370发布于 2018-04-11来自专栏数据小魔方sparklines迷你图系列9——Composition(Pareto)
今天继续跟大家分享sparklines迷你图系列9——Composition中的Pareto。
66570发布于 2018-04-11来自专栏九彩拼盘的叨叨叨第 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
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号