Vue2 迁移到 Vue3 的非兼容语法

一、全局改变

• 1.创建实例，使用 createApp

const app = createApp({})

全局的api成为单个实例的api

如：Vue.use 改成 app.use
    Vue.property 改为 app.config.globalProperties

继承 mixin 使用组合式API（ setup）

• 2. tree-shaking

一些全局和内部的API，转变成了按需打包，没有使用就不会打到包中。

如：Vue.nextTick 改为 import {nextTick} from 'vue'

使用到nextTick 的情况下，才会被打包到运行包中。

二、模板改变

• 1.v-model

真正实现双向绑定

不再需要使用v-bind.sync

• 2.key

v-for以外的 v-if，v-else 等的 key 会自动生成，不需要手写；

<template> 使用 v-for，key 直接写在 template 上。

• 3.v-if 和 v-for 的优先级

同一元素上，v-if 优先于 v-for，和 Vue2 中不同

• 4. v-bind 的属性加载

会按照书写顺序，后面的覆盖前面的

• 5. 移除了事件的 .native

需要触发默认事件，在子组件使用 emits 选项（新增，类似于props）

三、组件改变

• 1.函数式组件只是一个纯函数

组件开发只需要有状态组件就足够了

• 2.异步组件

新的组件类型

• 3.父子组件事件触发

子组件中使用 emits 选项

四、渲染函数

对于使用 <template> 语法开发的代码，不影响

五、其它

• destroyed 生命周期选项被重命名为 unmounted
• beforeDestroy 生命周期选项被重命名为 beforeUnmount
• 没有特殊指令的标记 (v-if/else-if/else、v-for 或 v-slot) 的 <template> 现在被视为普通元素，并将生成原生的 <template> 元素，而不是渲染其内部内容。
• keycode 不再支持，建议使用短横线修饰符

参考：https://v3.cn.vuejs.org/guide/migration/introduction.html#%E5%80%BC%E5%BE%97%E6%B3%A8%E6%84%8F%E7%9A%84%E6%96%B0%E7%89%B9%E6%80%A7