## 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
![avatar](https://profile-avatar.csdnimg.cn/549c4ef272cd4e00ab716f681ac5b5d8_a3737337.jpg!1)
a3737337
- 粉丝: 0
- 资源: 2869
最新资源
- 混合储能系统通过飞轮与蓄电池结合抗脉冲平均滤波和滑动平均滤波实现风电功率波动的平抑策略,混合储能系统功率分配策略:抗脉冲与滑动平均滤波实现风电功率波动平抑,混合储能(飞轮、蓄电池)平抑风电功率波动 功
- FPGA编程与VHDL语言下的ADC128s102八通道与实时仿真测试软件ISE 14.7实战体验,基于FPGA的VHDL编程与ADC128s102八通道数据采集实现及软件ISE 14.7的上板测试与
- 《Comsol激光电弧焊接中的熔池传热传质行为及其微观凝固组织模拟》,COMSOL模拟激光焊接与电弧焊接的熔池传热传质及微观凝固组织研究,comsol激光焊接、电弧焊接熔池传热传质 微观凝固组织模拟
- 基于磁流体方程的COMSOL直流电弧放电模型:探究稳态温度、流体速度与电磁场分布及电极熔化,基于磁流体方程的COMSOL直流电弧放电模型:探究稳态温度、流体速度与电磁场分布及电极熔化影响,comsol
- 风电-光伏-光热电站N-k安全优化调度模型:求解弃风弃光问题及调度策略区别,展示光热电站调度灵活性与经济性优势,采用matlab+cplex求解器 ,风电-光伏-光热电站N-k安全优化调度模型:灵活性
- 永磁同步电机非线性磁链观测器源代码:零速闭环启动与低速性能优化,超越VESC的技术突破,永磁同步电机非线性磁链观测器源代码:零速闭环启动与低速性能优化,强大扭力超越VESC,专业技术学习挑战,永磁同步
- 单相三电平NPC逆变器:载波层叠技术,SVPWM与SPWM调制方式及其参考文献概览,单相三电平NPC逆变器技术解析:载波层叠SVPWM与SPWM算法及其参考文献指南,单相三电平NPC逆变器 载波层叠
- 基于VMD分解与小波阈值去噪的信号处理程序:包含SNR评估与最佳小波函数及分解层数选择的研究,Matlab环境下基于VMD分解与小波阈值去噪算法的程序设计与SNR评价分析-探究最佳小波函数与分解层数
- COMSOL数值模拟技术:N2与CO2混合气体在THM三场耦合作用下增强煤层气抽采的实践研究,基于COMSOL的N2和CO2混合气体在THM热流固三场耦合环境下的瓦斯增强抽采数值模拟研究,COMSOL
- 多机系统稳定性分析:基于MATLAB的小扰动法状态方程求解与特征根分布研究-以9节点系统为例的静态稳定仿真,基于小扰动分析法的多机系统静态稳定仿真研究:MATLAB编程实现与特征根分布分析,多机系统
- 建筑暖通空调与微电网智能控制协同设计:高效节能的智能建筑系统设计指南,建筑暖通空调与微电网智能控制协同设计:高效节能与智能化整合实践,建筑暖通空调与微电网智能控制协同设计(代码) ,建筑暖通空调; 微
- KtAdmin-ChatGPT-AI人工智能资源
- Sourcetree3.4.22
- 基于深度强化学习技术的建筑暖通空调与微电网智能控制协同设计研究-Python代码实现与中文核心期刊发表探讨,深度强化学习驱动的智能协同设计:建筑暖通空调与微电网控制的Python代码实践解析,基于深
- 深入探讨虚假数据注入攻击:入门指南与状态估计、BDD检测及攻击生成代码程序,探索虚假数据注入攻击方向:入门解析与状态估计,BDD检测技术及攻击生成代码程序实现,虚假数据注入攻击方向 入门+状态估计、b
- 123note2011
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
![feedback](https://img-home.csdnimg.cn/images/20220527035711.png)
![feedback](https://img-home.csdnimg.cn/images/20220527035711.png)
![feedback-tip](https://img-home.csdnimg.cn/images/20220527035111.png)