Vue2升级到Vue3的注意事项

因最近需要考虑使用VUE3开发新项目，但是从公司层面担心有风险造成比较大的损失，于是需要先进行技术调研VUE2升级到VUE3的一些变动。
这里根据VUE官网进行了一个整体的梳理。
已有VUE2项目升级到VUE3项目可参考官方文档用于迁移的构建版本

1、新的框架

1. 新版的Router
2. 构建工具：Vite
3. 状态管理：Pinia
4. IDE支持：Volar
5. TypeScript命令行工具：vue-tsc
6. JSX打包插件：@vue/babel-plugin-jsx

2、浏览器兼容

VUE3实现响应式的方式为Proxy，对IE11以下的版本不兼容。

• Chrome >=87
• Firefox >=78
• Safari >=14
• Edge >=88

3、全局API

createApp，现调用createApp返回一个应用实例。

2.x 全局 API	3.x 实例 API (app)	原作用
Vue.config	app.config	全局配置
Vue.config.productionTip	移除	包含运行时编译器并有告警的构建版本才会显示
Vue.config.ignoredElements	app.config.compilerOptions.isCustomElement	支持原生自定义元素
Vue.component	app.component	注册组件
Vue.directive	app.directive	自定义指令
Vue.mixin	app.mixin	混合
Vue.use	app.use	自动安装插件
Vue.prototype	app.config.globalProperties	用于添加所有组件都能访问到的property
Vue.extend	移除	创建一个机遇VUE构造函数的子类

4、模板指令

1. v-model指令用法
   VUE2：传递下去的必须是value值，接收的也必须是input事件
   VUE3：传递下去的是modeValue和update：modeValue，替换v-bind.sync，同一个组件上可使用多个v-model绑定，支持v-model自定义修饰符
2. 节点上key的用法
   VUE2：主要用于Diff算法的优化策略，必须是字符串和数字类型，必须具有可预测性，不能随机生成。
   VUE3：用于跟踪节点身份，不仅仅用于优化渲染，可以是任何类型，可以是非可预测的。v-if/v-else/v-else-if的key不再是必须的，v-for的key应该设置在标签上而不是设置在它的子节点上。
   VUE2和VUE3中key的不同之处参考：vue2和3中key的区别
3. v-if和v-for的优先级 VUE2：v-for优先 VUE3：v-if优先 存在歧义，尽量避秒在同一元素上同时使用。
4. v-bind合并行为 v-bind=“object”和相同独立的attribute合并
   VUE2：独立的attribute会覆盖object中的绑定
   VUE3：根据先后顺序来，后定义的覆盖先定义的
5. 移除v-on.native修饰符

5、组件

1. 函数式组件
   建议只使用有状态的组件 只能使用普通函数创建函数式组件 functional attribute在单文件组件的和functional组件选项中被废弃
2. 异步组件
   VUE2：通过将组件定义为返回Promise的函数来创建的，component选项
   VUE3：使用defineAsyncComponent方法来显式定义异步组件，component选项被重命名为loader，loader不再接收reslove和reject参数，且必须返回一个Promise
3. emits选项 VUE3新增emit选项，定义组件可以向父组件触发的事件。

6、渲染函数

1. 渲染函数API
   VUE2：h作为参数传递给渲染函数，VNode嵌套，根据组件名字符串使用
   VUE3：全局导入h，VNode结构扁平化，导入resolveComponent方法查找已注册组件
2. 插槽统一
   VUE2：使用this.$ scopedSlots.引用作用域插槽；
   VUE3：移除，使用this.$ slots.引用
3. $ listeners 移除 $ listeners，事件监听现在是$ attrs的一部分
4. $ attrs包含class、style
   VUE2：虚拟DOM实现对class和style有特殊处理，在inheritAttrs：fasle时会产生副作用，class style会被应用到组件的根元素上
   VUE3：$attrs现在包含了所有传递给组件的attribute，包含class和style，

7、自定义标签的操作

1. 自定义元素
   VUE2：使用Vue.config.ignoredElements将标签配置为自定义元素
   VUE3： 使用app.config.compilerOptions.isCustomElement配置
2. 定制内置元素
   VUE2：任何元素都能使用is，将被渲染为is指定的组件 ，会阻碍元素的原生用法
   VUE3：将is属性限制在了标签中，普通元素解析为vue组件需加**vue:**前

8、移除的API

1. 按键修饰符 不再支持使用数字（比如键码）作为v-on的修饰符，而是使用别名。
2. 事件API $on $off $once实例方法已被移出，事件总线模式可以使用外部库，比如mitt 或 tiny-emitter
3. 过滤器 filters移除
4. 内联模板Attribute 内联模版特性已被移除
5. $children 获取子组件，被移除，可以使用ref进行模板引用
6. propsData，在创建Vue实例过程中传入prop

9、其他变化

1. attribute强制行为
2. 自定义指令，指令的钩子函数被重命名，以更好的与组件的生命周期保持一致
3. data选项，合并来自mixin或者extend的多个data返回值，合并操作浅层次的，只合并到根级属性，复杂数据会被组件中的同名数据覆盖。
4. 被挂载的template应用之前会替换掉目标元素，现在会作为子元素插入。
5. 在prop的默认函数中访问this
6. 过渡类名v-enter修改为v-enter-from，v-leave修改为v-leave-from，transition组件的相关prop变更
7. Transition作为根节点，当从组件外部被切换时，将不再触发过渡效果。
8. Transition-group不再默认渲染根元素，但仍然可以用tag attribute创建根元素
9. VNode生命周期，通过事件来监听组件生命周期，之前以hook:开头，现在由vue:开头
10. Watch侦听数组，只有当数组被替换时才会触发回调，如需在数组被改变时触发回调，要指定deep选项