@vue/reactivity

What are @vue/reactivity's main functionalities?

import { reactive } from '@vue/reactivity';
const state = reactive({ count: 0 });

import { computed } from '@vue/reactivity';
const count = reactive({ num: 1 });
const plusOne = computed(() => count.num + 1);

import { watch } from '@vue/reactivity';
const state = reactive({ count: 0 });
watch(() => state.count, (newVal, oldVal) => {
  console.log(`Count changed from ${oldVal} to ${newVal}`);
});

3.4.1 (2023-12-30)

Bug Fixes

• compat: correct enum value for COMPILER_FILTERS feature (#9875) (77d33e2)
• defineModel: always default modifiers to empty object (9bc3c7e), closes #9945
• defineModel: support local mutation when only prop but no listener is passed (97ce041)
• types: fix defineModel watch type error (#9942) (4af8583), closes #9939

Features

• compiler-sfc: support passing template parsing options when parsing sfc (6fab855) (necessary to fix https://github.com/vitejs/vite-plugin-vue/issues/322)

Read this blog post for an overview of the release highlights.

Potential Actions Needed

1. To fully leverage new features in 3.4, it is recommended to also update the following dependencies when upgrading to 3.4:

   • Volar / vue-tsc@^1.8.27 (required)
   • @vitejs/plugin-vue@^5.0.0 (if using Vite)
   • nuxt@^3.9.0 (if using Nuxt)
   • vue-loader@^17.4.0 (if using webpack or vue-cli)

2. If using TSX with Vue, check actions needed in Removed: Global JSX Namespace.

3. Make sure you are no longer using any deprecated features (if you are, you should have warnings in the console telling you so). They may have been removed in 3.4.

Features

• general: MathML support (#7836) (d42b6ba), closes #7820
• reactivity: more efficient reactivity system (#5912) (16e06ca), closes #311 #1811 #6018 #7160 #8714 #9149 #9419 #9464
• reactivity: expose last result for computed getter (#9497) (48b47a1)
• runtime-core / dx: link errors to docs in prod build (#9165) (9f8ba98)
• runtime-core: add once option to watch (#9034) (a645e7a)
• runtime-core: provide full props to props validator functions (#3258) (8e27692)
• compiler-core: export error message (#8729) (f7e80ee)
• compiler-core: support specifying root namespace when parsing (40f72d5)
• compiler-core: support v-bind shorthand for key and value with the same name (#9451) (26399aa)
• compiler-core: improve parsing tolerance for language-tools (41ff68e)
• compiler-core: support accessing Error as global in template expressions (#7018) (bcca475)
• compiler-core: lift vnode hooks deprecation warning to error (8abc754)
• compiler-core: export runtime error strings (#9301) (feb2f2e)
• compiler-core: add current filename to TransformContext (#8950) (638f1ab)
• compiler-sfc: analyze import usage in template via AST (#9729) (e8bbc94), closes #8897 nuxt/nuxt#22416
• compiler-sfc: expose resolve type-based props and emits (#8874) (9e77580)
• compiler-sfc: bump postcss-modules to v6 (2a507e3)
• compiler-sfc: promote defineModel stable (#9598) (ef688ba)
• compiler-sfc: support import attributes and using syntax (#8786) (5b2bd1d)
• compiler-sfc: defineModel support local mutation by default, remove local option (f74785b), closes /github.com/vuejs/rfcs/discussions/503#discussioncomment-7566278
• ssr: add __VUE_PROD_HYDRATION_MISMATCH_DETAILS__ feature flag (#9550) (bc7698d)
• ssr: improve ssr hydration mismatch checks (#5953) (2ffc1e8), closes #5063
• types: use enum to replace const enum (#9261) (fff7b86), closes #1228
• types: add emits and slots type to FunctionalComponent (#8644) (927ab17)
• types: export AriaAttributes type (#8909) (fd0b6ba)
• types: export ObjectPlugin and FunctionPlugin types (#8946) (fa4969e), closes #8577
• types: expose DefineProps type (096ba81)
• types: expose PublicProps type (#2403) (44135dc)
• types: improve event type inference when using h with native elements (#9756) (a625376)
• types: provide ComponentInstance type (#5408) (bfb8565)
• types: support passing generics when registering global directives (#9660) (a41409e)

Performance Improvements

• compiler-sfc: avoid sfc source map unnecessary serialization and parsing (f15d2f6)
• compiler-sfc: remove magic-string trim on script (e8e3ec6)
• compiler-sfc: use faster source map addMapping (50cde7c)
• compiler-core: optimize away isBuiltInType (66c0ed0)
• compiler-core: optimize position cloning (2073236)
• codegen: optimize line / column calculation during codegen (3be53d9)
• codegen: optimize source map generation (c11002f)
• shared: optimize makeMap (ae6fba9)

BREAKING CHANGES

Global JSX Registration Removed

Starting in 3.4, Vue no longer registers the global JSX namespace by default. This is necessary to avoid global namespace collision with React so that TSX of both libs can co-exist in the same project. This should not affect SFC-only users with latest version of Volar.

If you are using TSX, there are two options:

1. Explicitly set jsxImportSource to 'vue' in tsconfig.json before upgrading to 3.4. You can also opt-in per file by adding a /* @jsxImportSource vue */ comment at the top of the file.

2. If you have code that depends on the presence of the global JSX namespace, e.g. usage of types like JSX.Element etc., you can retain the exact pre-3.4 global behavior by explicitly referencing vue/jsx, which registers the global JSX namespace.

Note that this is a type-only breaking change in a minor release, which adheres to our release policy.

Deprecated Features Removed

• Reactivity Transform was marked deprecated in 3.3 and is now removed in 3.4. This change does not require a major due to the feature being experimental. Users who wish to continue using the feature can do so via the Vue Macros plugin.
• app.config.unwrapInjectedRef has been removed. It was deprecated and enabled by default in 3.3. In 3.4 it is no longer possible to disable this behavior.
• @vnodeXXX event listeners in templates are now a compiler error instead of a deprecation warning. Use @vue:XXX listeners instead.
• v-is directive has been removed. It was deprecated in 3.3. Use the is attribute with vue: prefix instead.