What's new in Vue 2.7 beta ?

ยท

2 min read

What's new in Vue 2.7 beta ?

Vue 2.7 is now in beta.

Despite Vue 3 now being the default version, there are still many users who have to stay on Vue 2 due to dependency compatibility, browser support requirements, or simply not enough bandwidth to upgrade. In Vue 2.7, some of the most important features have been backported from Vue 3 so that Vue 2 users can benefit from them as well.

Backported feature -

  • Composition APi

  • SFC <script setup>

  • SFC CSS v-bind

  • 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)

Difference 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.

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>).

2.7 stable is scheduled to land around end of June 2022. As stated before, it will be the final minor release of Vue 2.x. Once 2.7 is released as stable, Vue 2 will no longer receive new features, and will enter LTS (long-term support) which lasts for 18 months. This means Vue 2 will reach End of Life by the end of 2023. Although there might be extended support available for sometime beyond the end of 2023 but it's still not sure to be there. So projects should migrate over to Vue 3.

Did you find this article valuable?

Support Aryan Srivastava by becoming a sponsor. Any amount is appreciated!

ย