## Overview
`@vue/compat` (aka "the migration build") is a build of Vue 3 that provides configurable Vue 2 compatible behavior.
The migration build runs in Vue 2 mode by default - most public APIs behave exactly like Vue 2, with only a few exceptions. Usage of features that have changed or been deprecated in Vue 3 will emit runtime warnings. A feature's compatibility can also be enabled/disabled on a per-component basis.
### Intended Use Cases
- Upgrading a Vue 2 application to Vue 3 (with [limitations](#known-limitations))
- Migrating a library to support Vue 3
- For experienced Vue 2 developers who have not tried Vue 3 yet, the migration build can be used in place of Vue 3 to help learn the difference between versions.
### Known Limitations
While we've tried hard to make the migration build mimic Vue 2 behavior as much as possible, there are some limitations that may prevent your app from being eligible for upgrading:
- Dependencies that rely on Vue 2 internal APIs or undocumented behavior. The most common case is usage of private properties on `VNodes`. If your project relies on component libraries like [Vuetify](https://vuetifyjs.com/en/), [Quasar](https://quasar.dev/) or [ElementUI](https://element.eleme.io/#/en-US), it is best to wait for their Vue 3 compatible versions.
- Internet Explorer 11 support: [Vue 3 has officially dropped the plan for IE11 support](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0038-vue3-ie11-support.md). If you still need to support IE11 or below, you will have to stay on Vue 2.
- Server-side rendering: the migration build can be used for SSR, but migrating a custom SSR setup is much more involved. The general idea is replacing `vue-server-renderer` with [`@vue/server-renderer`](https://github.com/vuejs/core/tree/main/packages/server-renderer). Vue 3 no longer provides a bundle renderer and it is recommended to use Vue 3 SSR with [Vite](https://vitejs.dev/guide/ssr.html). If you are using [Nuxt.js](https://nuxtjs.org/), it is probably better to wait for Nuxt 3.
### Expectations
Please note that the migration build aims to cover only publicly documented Vue 2 APIs and behavior. If your application fails to run under the migration build due to reliance on undocumented behavior, it is unlikely that we'll tweak the migration build to cater to your specific case. Consider refactoring to remove reliance on the behavior in question instead.
A word of caution: if your application is large and complex, migration will likely be a challenge even with the migration build. If your app is unfortunately not suitable for upgrade, do note that we are planning to backport Composition API and some other Vue 3 features to the 2.7 release (estimated late Q3 2021).
If you do get your app running on the migration build, you **can** ship it to production before the migration is complete. Although there is a small performance/size overhead, it should not noticeably affect production UX. You may have to do so when you have dependencies that rely on Vue 2 behavior, and cannot be upgraded/replaced.
The migration build will be provided starting with 3.1, and will continue to be published alongside the 3.2 release line. We do plan to eventually stop publishing the migration build in a future minor version (no earlier than EOY 2021), so you should still aim to switch to the standard build before then.
## Upgrade Workflow
The following workflow walks through the steps of migrating an actual Vue 2 app (Vue HackerNews 2.0) to Vue 3. The full commits can be found [here](https://github.com/vuejs/vue-hackernews-2.0/compare/migration). Note that the actual steps required for your project may vary, and these steps should be treated as general guidance rather than strict instructions.
### Preparations
- If you are still using the [deprecated named / scoped slot syntax](https://vuejs.org/v2/guide/components-slots.html#Deprecated-Syntax), update it to the latest syntax first (which is already supported in 2.6).
### Installation
1. Upgrade tooling if applicable.
- If using custom webpack setup: Upgrade `vue-loader` to `^16.0.0`.
- If using `vue-cli`: upgrade to the latest `@vue/cli-service` with `vue upgrade`
- (Alternative) migrate to [Vite](https://vitejs.dev/) + [vite-plugin-vue2](https://github.com/underfin/vite-plugin-vue2). [[Example commit](https://github.com/vuejs/vue-hackernews-2.0/commit/565b948919eb58f22a32afca7e321b490cb3b074)]
2. In `package.json`, update `vue` to 3.1, install `@vue/compat` of the same version, and replace `vue-template-compiler` (if present) with `@vue/compiler-sfc`:
```diff
"dependencies": {
- "vue": "^2.6.12",
+ "vue": "^3.1.0",
+ "@vue/compat": "^3.1.0"
...
},
"devDependencies": {
- "vue-template-compiler": "^2.6.12"
+ "@vue/compiler-sfc": "^3.1.0"
}
```
[Example commit](https://github.com/vuejs/vue-hackernews-2.0/commit/14f6f1879b43f8610add60342661bf915f5c4b20)
3. In the build setup, alias `vue` to `@vue/compat` and enable compat mode via Vue compiler options.
**Example Configs**
<details>
<summary><b>vue-cli</b></summary>
```js
// vue.config.js
module.exports = {
chainWebpack: config => {
config.resolve.alias.set('vue', '@vue/compat')
config.module
.rule('vue')
.use('vue-loader')
.tap(options => {
return {
...options,
compilerOptions: {
compatConfig: {
MODE: 2
}
}
}
})
}
}
```
</details>
<details>
<summary><b>Plain webpack</b></summary>
```js
// webpack.config.js
module.exports = {
resolve: {
alias: {
vue: '@vue/compat'
}
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
compilerOptions: {
compatConfig: {
MODE: 2
}
}
}
}
]
}
}
```
</details>
<details>
<summary><b>Vite</b></summary>
```js
// vite.config.js
export default {
resolve: {
alias: {
vue: '@vue/compat'
}
},
plugins: [
vue({
template: {
compilerOptions: {
compatConfig: {
MODE: 2
}
}
}
})
]
}
```
</details>
4. At this point, your application may encounter some compile-time errors / warnings (e.g. use of filters). Fix them first. If all compiler warnings are gone, you can also set the compiler to Vue 3 mode.
[Example commit](https://github.com/vuejs/vue-hackernews-2.0/commit/b05d9555f6e115dea7016d7e5a1a80e8f825be52)
5. After fixing the errors, the app should be able to run if it is not subject to the [limitations](#known-limitations) mentioned above.
You will likely see a LOT of warnings from both the command line and the browser console. Here are some general tips:
- You can filter for specific warnings in the browser console. It's a good idea to use the filter and focus on fixing one item at a time. You can also use negated filters like `-GLOBAL_MOUNT`.
- You can suppress specific deprecations via [compat configuration](#compat-configuration).
- Some warnings may be caused by a dependency that you use (e.g. `vue-router`). You can check this from the warning's component trace or stack trace (expanded on click). Focus on fixing the warnings that originate from your own source code first.
- If you are using `vue-router`, note `<transition>` and `<keep-alive>` will not work with `<router-view>` until you upgrade to `vue-router` v4.
6. Update [`<transition>` class names](https://v3-migration.vuejs.org/breaking-changes/transition.html). This is the only feature that does not have a runtime warning. You can do a project-wide search for `.*-enter` and `.*-leav

a3737337
- 粉丝: 0
- 资源: 2869
最新资源
- sqlserver jtds 驱动
- 微电网逆变器控制策略与并网仿真研究:下垂控制仿真模型及其参考资料综述,微电网逆变器控制策略与并网仿真研究:下垂控制仿真模型及其应用探讨,微电网逆变器控制、并网仿真、下垂控制等仿真模型以及一些参考资料
- DeepSeek清华大学全套学习资料1-5
- 【毕业设计】Python的Django-html深度学习的安全帽佩戴检测系统源码(完整前后端+mysql+说明文档+LW+PPT).zip
- 【毕业设计】Python的Django-html深度学习的聊天机器人设计源码(完整前后端+mysql+说明文档+LW+PPT).zip
- 【毕业设计】Python的Django-html搜索的目标站点内容监测系统源码(完整前后端+mysql+说明文档+LW+PPT).zip
- 蒙特卡洛思想下的充电汽车负荷曲线生成研究报告:探索1万台汽车的充电负荷曲线模拟,基于蒙特卡洛思想的充电汽车充电负荷曲线生成研究报告-涵盖负荷曲线的精细分析与实际应用解析,基于蒙特卡洛思想生成1000
- DeepSeek 保姆级新手教程
- MATLAB下电转气协同与碳捕集垃圾焚烧虚拟电厂优化调度复现程序及仿真结果展示,基于MATLAB和CPLEX的碳捕集与垃圾焚烧虚拟电厂电转气协同优化调度算法研究,MATLAB代码:计及电转气协同的含碳
- 基于直齿行星齿轮传动系统的ode45求解方法及自由度收敛研究,基于直齿行星齿轮传动系统的ODE45求解及其自由度全收敛分析研究,直齿行星齿轮传动系统ode45求解,自由度全部收敛 本人主攻齿轮动力学
- 洪泽湖流域1951-2008年面雨量变化特征与趋势分析及其防洪减灾应用
- 基于TMS320F2812的PMSM有传感器矢量控制双闭环程序系统,TMS320F2812 DSP矢量控制实现PMSM传感器转速与电流双闭环控制程序,矢量控制dsp2812 主控为TMS320F281
- blender插件,mmd-tools-v2.10.3
- 黑龙江省近45年积温变化
- SVPWM过调制控制技术:深入解析与实际应用,基于SVPWM技术的过调制控制方法的研究与应用,SVPWM过调制控制方法 ,SVPWM; 过调制; 控制方法; 数字信号处理,SVPWM过调制控制策略
- 基于PI控制器与滑膜控制器的三相永磁同步电机无速度传感器控制策略及其SVPWM-MRAS-PI SMC算法研究与应用,基于PI控制器与滑膜控制器的三相永磁同步电机无速度传感器控制策略研究:SVPWM
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈


