|
1 | 1 | # [2.7.0](https://github.com/vuejs/vue/compare/v2.7.0-beta.8...v2.7.0) (2022-07-01)
|
2 | 2 |
|
| 3 | +## Backported Features |
| 4 | + |
| 5 | +2.7 backports some of the most important features from Vue 3 so that Vue 2 users can benefit from them as well: |
| 6 | + |
| 7 | +- [Composition API](https://vuejs.org/guide/extras/composition-api-faq.html) |
| 8 | +- SFC [`<script setup>`](https://vuejs.org/api/sfc-script-setup.html) |
| 9 | +- SFC [CSS v-bind](https://vuejs.org/api/sfc-css-features.html#v-bind-in-css) |
| 10 | + |
| 11 | +In addition, the following APIs are also supported: |
| 12 | + |
| 13 | +- `defineComponent()` with improved type inference (compared to `Vue.extend`) |
| 14 | +- `h()`, `useSlot()`, `useAttrs()`, `useCssModules()` |
| 15 | +- `set()`, `del()` and `nextTick()` are also provided as named exports in ESM builds. |
| 16 | +- The `emits` option is also supported, but only for type-checking purposes (does not affect runtime behavior) |
| 17 | + |
| 18 | + 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. |
| 19 | + |
| 20 | +### Notes on API exposure |
| 21 | + |
| 22 | +- In ESM builds, these APIs are provided as named exports (and named exports only): |
| 23 | + |
| 24 | + ```js |
| 25 | + import Vue, { ref } from 'vue' |
| 26 | + |
| 27 | + Vue.ref // undefined, use named export instead |
| 28 | + ``` |
| 29 | + |
| 30 | +- In UMD and CJS builds, these APIs are exposed as properties on the global `Vue` object. |
| 31 | + |
| 32 | +- When bundling with CJS builds externalized, bundlers should be able to handle ESM interop when externalizing CJS builds. |
| 33 | + |
| 34 | +### Behavior Differences from Vue 3 |
| 35 | + |
| 36 | +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: |
| 37 | + |
| 38 | +- All [Vue 2 change detection caveats](https://v2.vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats) still apply. |
| 39 | + |
| 40 | +- `reactive()`, `ref()`, and `shallowReactive()` will directly convert original objects instead of creating proxies. This means: |
| 41 | + |
| 42 | + ```js |
| 43 | + // true in 2.7, false in 3.x |
| 44 | + reactive(foo) === foo |
| 45 | + ``` |
| 46 | + |
| 47 | +- `readonly()` **does** create a separate object, but it won't track newly added properties and does not work on arrays. |
| 48 | + |
| 49 | +- 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). |
| 50 | + |
| 51 | +- Reactivity APIs ignore properties with symbol keys. |
| 52 | + |
| 53 | +In addition, the following features are explicitly **NOT** ported: |
| 54 | + |
| 55 | +- ❌ `createApp()` (Vue 2 doesn't have isolated app scope) |
| 56 | +- ❌ Top-level `await` in `<script setup>` (Vue 2 does not support async component initialization) |
| 57 | +- ❌ TypeScript syntax in template expressions (incompatible w/ Vue 2 parser) |
| 58 | +- ❌ Reactivity transform (still experimental) |
| 59 | +- ❌ `expose` option is not supported for options components (but `defineExpose()` is supported in `<script setup>`). |
| 60 | + |
| 61 | +## Upgrade Guide |
| 62 | + |
| 63 | +### Vue CLI / webpack |
| 64 | + |
| 65 | +1. Upgrade local `@vue/cli-xxx` dependencies the latest version in your major version range (if applicable): |
| 66 | + |
| 67 | + - `~4.5.18` for v4 |
| 68 | + - `~5.0.6` for v5 |
| 69 | + |
| 70 | +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. |
| 71 | + |
| 72 | + 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. |
| 73 | + |
| 74 | +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`. |
| 75 | + |
| 76 | + - `vue-loader`: `^15.10.0` |
| 77 | + - `vue-demi`: `^0.13.1` |
| 78 | + |
| 79 | + 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. |
| 80 | + |
| 81 | +4. If you were previously using [`@vue/composition-api`](https://github.com/vuejs/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. |
| 82 | + |
| 83 | +5. 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. |
3 | 84 |
|
4 | 85 | ### Bug Fixes
|
5 | 86 |
|
|
0 commit comments