Vue.js Core

repository·main·Indexed 13 days ago

https://github.com/vuejs/core

A progressive JavaScript framework for building user interfaces, focusing on the view layer and a reactive data model. This documentation covers core internals, distribution files for CDN and bundlers, feature flags for tree-shaking, and development tools like the SFC Playground and Template Explorer. Includes technical details for version 3.5.41 and legacy 3.0.x changes.

Tokens
76.9K
Snippets
297
Records
437
Agent score
100%

What's inside Vue.js

  1. Reactivity Transform: Use $ shorthands and optional imports

    main

    In version 3.2.25, several improvements were made to the experimental reactivity transform:

    • Support for $-shorthands for all ref-creating APIs.
    • Support for optionally importing macros.
    • The package was renamed from @vue/ref-transform to @vue/reactivity-transform.
  2. How `<script setup>` handles async context

    main
    In version 3.1.3, <script setup> was updated to automatically restore the current instance context after await statements. This ensures that subsequent code in an async setup function correctly identifies the component instance, preventing issues with lifecycle hooks or other instance-dependent APIs.
  3. Behavior of defineModel in Vue 3.4.32

    main
    In Vue 3.4.32, the defineModel macro was updated to force a local update even when the setter results in the same emitted value. Additionally, in runtime-core, the system will no longer emit an event when a defineModel ref is set with the same value it already holds.
  4. Identify self-triggering computed properties

    main
    In Vue 3.4.19 and later, the framework provides a developer experience (DX) improvement that issues a warning when a computed property is detected to be self-triggering. This helps prevent infinite loops or unexpected reactivity cycles caused by a computed property modifying its own dependencies.
  5. Understand how dts-test validates TypeScript types

    main

    The dts-test package is used to ensure that exported TypeScript types remain consistent and as expected. It supports two modes of validation:

    1. Source-based validation: When included in the root tsconfig.json, package imports are aliased to their src directories. This allows IDEs and the pnpm check script to validate types directly against the source code.
    2. Build-based validation: When running tsc using packages-private/dts-test/tsconfig.test.json, packages are resolved using standard node resolution. This validates types against the actual built .d.ts files. This mode requires that types are built first using pnpm build-dts.
  6. Understand shallow template ref unwrapping

    main
    As of 3.0.0-rc.5, template auto ref unwrapping is applied shallowly. This means unwrapping only occurs at the root level of the object, rather than recursively through all nested properties. If you rely on deep unwrapping in templates, you may need to adjust your data structures or access patterns.
  7. Understand attribute fallthrough behavior changes in v3.0.0-alpha.8

    main

    In version 3.0.0-alpha.8, the attribute fallthrough behavior was updated. Implicit fallthrough now only applies by default to a specific whitelist of attributes:

    • class
    • style
    • Event listeners
    • a11y attributes
    • data-* attributes

    Fallthrough is applied regardless of whether the component has a single root node.

  8. Note on Internal API type visibility

    main
    Starting from version 3.0.0-beta.6, internal APIs are excluded from the official type declarations (.d.ts files). This ensures that consumers only interact with the stable, public API surface and prevents accidental usage of internal implementation details.
  9. Understand setup() return value reactivity in v3.0.0-alpha.8

    main

    In version 3.0.0-alpha.8, the behavior for objects returned from setup() was reverted to ensure usability.

    Objects returned from setup() are implicitly wrapped with reactive() to allow for deep ref unwrapping. This ensures that plain objects containing refs (common in composition functions) will have their refs automatically unwrapped when accessed in templates, maintaining the "no .value in template" intuition.

    If you need to prevent a value from being reactive, use markNonReactive.