Tag

Composition API

1 views collected around this technical thread.

Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Apr 20, 2025 · Frontend Development

Vue 2.0 vs Vue 3.0: Core Differences, Reactive System, Composition API, Lifecycle Hooks and Practical Code Examples

This article provides a comprehensive comparison between Vue 2 and Vue 3, covering changes in reactivity implementation, the introduction of the Composition API, lifecycle hook updates, component caching, data binding techniques, state‑management alternatives, storage options, and numerous code snippets that illustrate each concept for developers preparing for interviews or upgrading projects.

Composition APIJavaScriptVue
0 likes · 25 min read
Vue 2.0 vs Vue 3.0: Core Differences, Reactive System, Composition API, Lifecycle Hooks and Practical Code Examples
IT Services Circle
IT Services Circle
Feb 10, 2025 · Frontend Development

Introducing Vorms: A Lightweight 12KB Form Validation Library for Vue 3

Vorms is a 12KB, TypeScript‑based form validation library built with Vue 3's Composition API that offers strong typing, tree‑shakable size, easy integration, and flexible support for Yup, Zod and custom rules, making form handling both simple and powerful.

Composition APIVormsVue
0 likes · 5 min read
Introducing Vorms: A Lightweight 12KB Form Validation Library for Vue 3
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Feb 8, 2025 · Frontend Development

Understanding Vue Hooks: From Vue 2 to Vue 3 and Practical Applications

This article explains the evolution of Vue development, introduces Vue Hooks as the core of the Composition API, demonstrates their advantages over Mixins with clear code examples, and provides best‑practice guidelines and common pitfalls for building maintainable, reusable front‑end components.

Composition APIHooksJavaScript
0 likes · 14 min read
Understanding Vue Hooks: From Vue 2 to Vue 3 and Practical Applications
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Dec 1, 2024 · Frontend Development

Migrating a Vue2 Project to Vue3 with Pinia and Composition API

This article details a step‑by‑step migration from Vue 2 to Vue 3, emphasizing the use of the latest Vue 3 version, TypeScript typings, replacing mixins with composition functions, adopting Pinia for state management, and demonstrating how to share and protect reactive state with composition APIs.

Composition APIPiniaVue3
0 likes · 8 min read
Migrating a Vue2 Project to Vue3 with Pinia and Composition API
Java Tech Enthusiast
Java Tech Enthusiast
Nov 25, 2024 · Frontend Development

Understanding Vue Composables (Hooks) and Their Usage

Vue’s reusable logic pattern, called Composables, are functions built with the Composition API that encapsulate reactive state via ref and lifecycle hooks, follow a use‑prefix naming convention, and let developers like the mouse‑tracker example share stateful behavior across components cleanly.

ComposablesComposition APIHooks
0 likes · 5 min read
Understanding Vue Composables (Hooks) and Their Usage
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Oct 3, 2024 · Frontend Development

Using and Building Custom Hooks in Vue 3

This article explains what Hooks are, demonstrates how to use them in Vue 3, and guides readers through building reusable custom Hook functions such as useMouse and useTable, covering pagination, parameter handling, and best practices for clean, maintainable frontend code.

Composition APIHooksJavaScript
0 likes · 23 min read
Using and Building Custom Hooks in Vue 3
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Sep 28, 2024 · Frontend Development

Our Team’s Journey with Vue 3 Composition API and Insights from ECS Architecture

The article recounts a frontend team's evolution from Vue 2 to Vue 3, detailing their experiments with the script‑setup syntax, challenges of maintainability, and how concepts from game‑engine ECS architecture inspired new composition‑API best practices for scalable, readable code.

Best PracticesComposition APIECS
0 likes · 14 min read
Our Team’s Journey with Vue 3 Composition API and Insights from ECS Architecture
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Aug 25, 2024 · Frontend Development

How vueuse Supports Vue 2 & Vue 3 via vue‑demi and Implements Dark Mode

This article explains how the vueuse utility library works with both Vue 2 and Vue 3 by leveraging the vue‑demi compatibility layer, and then dives into the implementation of its useDark hook, showing the underlying media‑query logic and CSS techniques for dark‑mode support.

Composition APIVueVueUse
0 likes · 15 min read
How vueuse Supports Vue 2 & Vue 3 via vue‑demi and Implements Dark Mode
IT Services Circle
IT Services Circle
Jul 23, 2024 · Frontend Development

Vue2 vs Vue3: Differences, New Features, and Migration Guide

This article provides a comprehensive comparison between Vue 2 and Vue 3, detailing their architectural differences, new features such as the Composition API, TypeScript support, fragments, teleport, suspense, virtual‑DOM optimizations, and guidance on state management, build tools, and migration strategies.

Composition APIFrontend DevelopmentJavaScript
0 likes · 20 min read
Vue2 vs Vue3: Differences, New Features, and Migration Guide
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Jul 9, 2024 · Frontend Development

Vue 3 Composition API: defineProps, defineEmits, defineExpose, defineOptions, and defineSlots – Detailed Guide and Usage Examples

This article provides a comprehensive overview of Vue 3's new composition API functions—defineProps, defineEmits, defineExpose, defineOptions, and defineSlots—explaining their purposes, basic usage, practical examples, and suitable scenarios, helping developers master component communication, reuse, and advanced configuration in modern frontend development.

Composition APITutorialVue3
0 likes · 13 min read
Vue 3 Composition API: defineProps, defineEmits, defineExpose, defineOptions, and defineSlots – Detailed Guide and Usage Examples
ByteFE
ByteFE
May 10, 2024 · Frontend Development

Understanding and Using Custom Hooks (Composition API) in Vue 3

This article explains the concept of custom hooks—known as the Composition API—in Vue 3, discusses when and why to use them for logic reuse, provides practical examples and code snippets, and shares a curated list of useful Vue 3 hook libraries and resources.

Composition APICustom HooksJavaScript
0 likes · 9 min read
Understanding and Using Custom Hooks (Composition API) in Vue 3
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
May 7, 2024 · Frontend Development

Understanding and Using Custom Hooks (Composition API) in Vue 3

This article explains what Vue 3 custom hooks (Composition API) are, why they are useful for logic reuse, shows how to create both business‑specific and highly reusable hooks with practical code examples, and lists popular open‑source hook libraries for developers.

Composition APICustom HooksJavaScript
0 likes · 8 min read
Understanding and Using Custom Hooks (Composition API) in Vue 3
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Jan 8, 2024 · Frontend Development

Understanding and Using Hooks in Vue 3 Composition API

This article introduces Vue 3 Hooks, explains their relationship to the Composition API, compares them with mixins and class‑based patterns, provides best‑practice guidelines, and offers multiple TypeScript code examples for creating, using, and managing custom hooks to improve code reuse and maintainability.

Composition APIHooksJavaScript
0 likes · 17 min read
Understanding and Using Hooks in Vue 3 Composition API
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Sep 22, 2023 · Frontend Development

A Comprehensive Guide to Building a Reusable useList Hook for CRUD Pages in Vue 3

This article explains how to create a generic useList hook for Vue 3 that handles pagination, data fetching, filtering, resetting, exporting, and customizable success/error hooks, complete with TypeScript generics and Element‑Plus UI integration.

Composition APIExportHook
0 likes · 13 min read
A Comprehensive Guide to Building a Reusable useList Hook for CRUD Pages in Vue 3
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Sep 17, 2023 · Frontend Development

Comprehensive Vue 3 Tutorial: Project Setup, Option vs Composition API, and Custom Hooks

This tutorial walks through creating a Vue 3 project, explains key changes and the differences between Option API and Composition API, demonstrates useful CLI commands, and provides detailed examples of custom composable hooks such as useWindowSize, usePagination, and useFetch, along with best practices.

Composition APICustom HooksOption API
0 likes · 19 min read
Comprehensive Vue 3 Tutorial: Project Setup, Option vs Composition API, and Custom Hooks
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Sep 11, 2023 · Frontend Development

Converting State‑Driven Dialogs to Command‑Style Calls with the useCommandComponent Hook

This article explains how to convert state‑driven Element‑Plus Dialog components into a command‑style API using a custom useCommandComponent hook, discusses the drawbacks of traditional Dialog handling, outlines required component conventions, provides implementation code, and offers practical usage examples for Vue developers.

Composition APIDialogHooks
0 likes · 11 min read
Converting State‑Driven Dialogs to Command‑Style Calls with the useCommandComponent Hook
php中文网 Courses
php中文网 Courses
Mar 10, 2023 · Frontend Development

Differences Between Vue 2 and Vue 3: Reactivity, Runtime, Compiler, and New Features

The article explains how Vue 3 improves upon Vue 2 by replacing Object.defineProperty with Proxy for reactivity, introducing a refined runtime renderer, a compiler that transforms templates into render functions, and new features such as the Composition API, script setup, and built‑in components like Fragment and Teleport.

Composition APIFrontend DevelopmentReactivity
0 likes · 6 min read
Differences Between Vue 2 and Vue 3: Reactivity, Runtime, Compiler, and New Features
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Nov 24, 2022 · Frontend Development

Implementing an Icon Component in Vue3: Structure, Props, CSS Variables, and Global Registration

This article walks through building a reusable Icon component with Vue3's Composition API, covering directory layout, prop definitions, TypeScript typing, CSS variable styling, local and global registration, type augmentation, and the use of the defineOptions macro for component naming.

CSS variablesComponent RegistrationComposition API
0 likes · 25 min read
Implementing an Icon Component in Vue3: Structure, Props, CSS Variables, and Global Registration
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Oct 18, 2022 · Frontend Development

Implementing Vue 3 Computed API from Scratch

This article explains how to recreate Vue 3's computed API using the composition API, covering getter/setter handling, effect integration, caching with a dirty flag, dependency tracking, and trigger mechanisms, and provides step‑by‑step code examples to build a functional ComputedRef implementation.

Composition APIJavaScriptReactivity
0 likes · 10 min read
Implementing Vue 3 Computed API from Scratch