SoFunction
Updated on 2025-04-04

Detailed explanation of the official release function of Vue 2.7 codenamed Naruto

introduction

Vue officially released version 2.7, with the version name Naruto, which is Naruto.

Although Vue 3 is now the default version, many users still have to continue using Vue 2 due to dependency compatibility, browser support requirements, or insufficient bandwidth upgrades. In Vue 2.7, some of the most important features were ported backwards from Vue 3 so that Vue 2 users can benefit from it as well.

Backward porting function

In addition, the following APIs are supported:

  • defineComponent(): With improved type inference (withcompared to);
  • h()、useSlot()、useAttrs()、useCssModules()；
  • set()、del()andnextTick()Also available as a named export in ESM build.

Vue 2.7 also supports the use of ESNext syntax in template expressions. When using the build system, the compiled template rendering function will be configured for normal JavaScriptloaders / plugins. This means if.jsThe file is configured with Babel, which will also be applied to expressions in the SFC template.

Things to note

  • In an ESM build, these APIs are provided as named exports (only named exports):
import Vue, { ref } from 'vue'
 // undefined, instead use naming to export
  • In UMD and CJS builds, these APIs are exposed as properties on global Vue objects.

Behavioral Differences from Vue 3

Composition API using Vue 2 basedgetter/setterThe responsive system is backported to ensure browser compatibility. This means that it is based on Vue 3proxyThere are some important behavioral differences in the system:

  • All Vue 2 Change Detection Warnings Still Applicable;
  • reactive()、ref()andshallowReactive()Will convert the original object directly instead of creating a proxy:
// It is possible in 2.7, not inreactive(foo) === foo
  • readonly()It does create a separate object, but it does not track newly added properties and does not work with arrays;
  • Avoidreactive()Use array asrootvalue, because if there is no attribute access, changes in the array are not tracked (this will result in a warning);
  • Reactivity APIs Ignore withsymbolProperties of the key.

Additionally, the following features are not ported:

  • ❌ createApp()(Vue 2 has no independent application scope)
  • ❌ <script setup>Top-level await in Vue 2 does not support asynchronous component initialization)
  • ❌ TypeScript syntax in template expressions (incompatible with Vue 2 parser)
  • ❌ Reactivity transform (still in the experimental stage)
  • ❌ optionsComponents are not supportedexposeOptions (but<script setup>supportdefineExpose()）。

Upgrade Guide

Vue CLI / webpack

(1) Place the local@vue/cli-xxxUpgrade the dependency to the latest version within the range of the major version (if applicable):

  • For v4:~4.5.18
  • For v5:~5.0.6

(2) Upgrade Vue to ^2.7.0. It can also be removed from dependenciesvue-template-compiler, because it is no longer needed in 2.7. Note: If using@vue/test-utils, it may need to be temporarily kept in the dependency, but this requirement will also be cancelled in the new version of Test Utils.

(3) Check the package managerlockFile to ensure that the following dependencies meet version requirements. They may beTransitive dependencies not listed in:

  • vue-loader: ^15.10.0
  • vue-demi: ^0.13.1

If not, need to be deletednode_modulesandlockand reinstall the files to make sure they are upgraded to the latest version.

(4) If used before@vue/composition-api, please import it to update it to vue. Note that some APIs exported by plugins, such ascreateApp, not transplanted in 2.7.

(5) If using<script setup>Unused variables were encounteredlintError, pleaseeslint-plugin-vueUpdated to the latest version (9+).

(6) The SFC compiler for Vue 2.7 now uses PostCSS 8. PostCSS 8 should be backward compatible with most plugins, but upgrades can cause problems if you used a custom PostCSS plugin that can only be used with PostCSS 7 before. In this case, the relevant plug-in needs to be upgraded to a version compatible with PostCSS 8.

Vite

Vue2.7 support for Vite is provided through a new plug-in:@vitejs/plugin-vue2. This new plugin requires Vue 2.7 or higher and replaces the existing onevite-plugin-vue2。

Note that the new plugin does not handle Vue-specific JSX/TSXtransform, this is intentional. Vue 2 JSX / TSXtransformIt should be handled in a separate dedicated plugin that will be available soon.

Volar Compatibility

Vue 2.7 provides improved type definitions, so installation is no longer required@vue/runtime-domTo support Volar template type inference. Now only need toMake the following configurations:

{
  // ...
  "vueCompilerOptions": {
    "target": 2.7
  }
}

Devtools Support

Vue Devtools 6.2.0 adds support for checking the status of the 2.7 Composition API, but the extension may still take several days to pass the review on various publishing platforms.

Impact of version 2.7

Vue 2.7 is the final minor version of Vue. After this release, Vue 2 entered LTS (Long-term Support), which lasted for 18 months from now and will no longer receive new features. This means Vue 2 will end its life cycle by the end of 2023. This should provide plenty of time for most ecosystems to migrate to Vue 3.

Additional details

In preparing for this release, the Vue team ported the Vue 2 code base from Flow to TypeScript, based on core team members@pikaxefforts. This makes it easier to reuse code in Vue 3 and automatically generate type definitions for the ported API. In addition, unit tests were moved from Karma + Jasmine to Vitest, greatly improving the stability of maintaining DX and CI.

Translate the original text/posts/

The above is the detailed explanation of the official release function of Vue 2.7 code-named Naruto. For more information about the functions of Vue 2.7 Naruto, please follow my other related articles!