« Changelog History


Vue.js v2.7.0 Release Notes

Release Date: 2022-07-01 // almost 2 years ago

  • Backported Features

    👍 In addition, the following APIs are also supported:

    • defineComponent() with improved type inference (compared to Vue.extend)
    • h(), useSlot(), useAttrs(), useCssModules()
    • 🏗 set(), del() and nextTick() are also provided as named exports in ESM builds.
    • 👍 The emits option is also supported, but only for type-checking purposes (does not affect runtime behavior)

    2.7 also supports using ESNext syntax in template expressions. When using a build system, the compiled template render function will go through the same loaders / plugins configured for normal JavaScript. This means if you have configured Babel for .js files, it will also apply to the expressions in your SFC templates.

    Notes on API exposure

    • 🏗 In ESM builds, these APIs are provided as named exports (and named exports only):
      import Vue, { ref } from 'vue'

  Vue.ref // undefined, use named export instead

    • 🏗 In UMD and CJS builds, these APIs are exposed as properties on the global Vue object.

    • 🏗 When bundling with CJS builds externalized, bundlers should be able to handle ESM interop when externalizing CJS builds.

    Behavior Differences from Vue 3

    💻 The Composition API is backported using Vue 2's getter/setter-based reactivity system to ensure browser compatibility. This means there are some important behavior differences from Vue 3's proxy-based system:

    • All Vue 2 change detection caveats still apply.

    • reactive(), ref(), and shallowReactive() will directly convert original objects instead of creating proxies. This means:

      // true in 2.7, false in 3.x
  reactive(foo) === foo

    • readonly() does create a separate object, but it won't track newly added properties and does not work on arrays.

    • ⚠ Avoid using arrays as root values in reactive() because without property access the array's mutation won't be tracked (this will result in a warning).

    • Reactivity APIs ignore properties with symbol keys.

    In addition, the following features are explicitly NOT ported:

    • ❌ createApp() (Vue 2 doesn't have isolated app scope)
    • 👍 ❌ Top-level await in <script setup> (Vue 2 does not support async component initialization)
    • 📜 ❌ TypeScript syntax in template expressions (incompatible w/ Vue 2 parser)
    • ❌ Reactivity transform (still experimental)
    • 👍 ❌ expose option is not supported for options components (but defineExpose() is supported in <script setup>).

    TypeScript Changes

    • defineComponent provides improved type inference similar to that of Vue 3. Note the type of this inside defineComponent() is not interoperable with this from Vue.extend().

    • 🚚 Similar to Vue 3, TSX support is now built-in. If your project previously had manual JSX type shims, make sure to remove them.

    ⬆️ Upgrade Guide

    Vue CLI / webpack

    ⬆️ 1. Upgrade local @vue/cli-xxx dependencies the latest version in your major version range (if applicable):

    • ~4.5.18 for v4
    • ~5.0.6 for v5

    ⬆️ 2. Upgrade vue to ^2.7.0. You can also remove vue-template-compiler from the dependencies - it is no longer needed in 2.7.

    Note: if you are using @vue/test-utils, you may need to keep it in the dependencies for now, but this requirement will also be lifted in a new release of test utils.

    📦 3. Check your package manager lockfile to ensure the following dependencies meet the version requirements. They may be transitive dependencies not listed in package.json.

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

    If not, you will need to remove node_modules and the lockfile and perform a fresh install to ensure they are bumped to the latest version.

    ⚡️ 4. If you were previously using @vue/composition-api, update imports from it to vue instead. Note that some APIs exported by the plugin, e.g. createApp, are not ported in 2.7.

    ⚡️ 5. Update eslint-plugin-vue to latest version (9+) if you run into unused variable lint errors when using <script setup>.

    1. The SFC compiler for 2.7 now uses PostCSS 8 (upgraded from 7). PostCSS 8 should be backwards compatible with most plugins, but the upgrade may cause issues if you were previously using a custom PostCSS plugin that can only work with PostCSS 7. In such cases, you will need to upgrade the relevant plugins to their PostCSS 8 compatible versions.

    Vite

    🔌 2.7 support for Vite is provided via a new plugin: @vitejs/plugin-vue2. This new plugin requires Vue 2.7 or above and supersedes the existing vite-plugin-vue2.

    🔌 Note that the new plugin does not handle Vue-specific JSX / TSX transform, which is intentional. Vue 2 JSX / TSX transform should be handled in a separate, dedicated plugin, which will be provided soon.

    Volar Compatibility

    👍 2.7 ships improved type definitions so it is no longer necessary to install @vue/runtime-dom just for Volar template type inference support. All you need now is the following config in tsconfig.json:

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

    👍 Devtools Support

    👍 Vue Devtools 6.2.0 has added support for inspecting 2.7 Composition API state, but the extensions may still need a few days to go through review on respective publishing platforms.

    🐛 Bug Fixes

    • sfc: only include legacy decorator parser plugin when new plugin is not used (326d24a)