Vue2迁移Vue3，如何迁移？

vue2 对比 Vue3 有很多新特性增加，也有很多功能属于破坏性更新。

列举值得关注的新特性

1. 第一个肯定是组合式API ​​setup​​​ 以及 ​​setup语法糖​​模式
2. 新增的内置组件 ​​TelePort​​​ 以及 ​​Suspense​​
3. 响应式原理的变化从 ​​Object.defineProperty​​​ 换成了 ​​proxy​​
4. 对ts支持比较友好
5. 自定义​​hooks​​ 逻辑拆分
6. ​​v-memo​​ 新指令可以小幅度提升性能

破坏性更新的API以及功能

1. 不在需要手动实例化Vue 废弃了 ​​new Vue​​​ 这个操作,取而代之的是​​createApp​​接受一个根组件实例

import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App).mount('#app')

同时返回的app实例也跟之前不一样 废弃了​​Vue.config.productionTip​​​ ​​Vue.extend​​

具有影响的改动点 之前的​​Vue.prototype​​​ 改为 ​​app.config.globalProperties​​

//2.x 
//定义全局属性或者方法
vue.prototype.xxxxxx
//3.x
app.config.globalProperties.xxxxxxx

1. ​​nextTick​​ nextTick 源码内部不再判断各种兼容性

//Vue2.x 还在判断 promise MutationObserver setImmediate setTimeout
let timerFunc
if (typeof Promise !== 'undefined' && isNative(Promise)) {
  const p = Promise.resolve()
  timerFunc = () => {
    p.then(flushCallbacks)
    if (isIOS) setTimeout(noop)
  }
  isUsingMicroTask = true
} else if (!isIE && typeof MutationObserver !== 'undefined' && (
  isNative(MutationObserver) ||
  MutationObserver.toString() === '[object MutationObserverConstructor]'
)) {
  let counter = 1
  const observer = new MutationObserver(flushCallbacks)
  const textNode = document.createTextNode(String(counter))
  observer.observe(textNode, {
    characterData: true
  })
  timerFunc = () => {
    counter = (counter + 1) % 2
    console.log('counter', counter)
    textNode.data = String(counter)
  }
  isUsingMicroTask = true
} else if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
  timerFunc = () => {
    setImmediate(flushCallbacks)
  }
} else {
  timerFunc = () => {
    setTimeout(flushCallbacks, 0)
  }
}
//Vue3.x 直接使用promise
export function nextTick<T = void>(
  this: T,
  fn?: (this: T) => void
): Promise<void> {
  const p = currentFlushPromise || resolvedPromise
  return fn ? p.then(this ? fn.bind(this) : fn) : p
}

1. v-model 终极破坏性更新
   2.x 默认的props 是 ​​value​​ 3.x 默认为 ​​modelValue​​2.x emit派发 ​​input​​ 3.x默认为​​update:modelValue​​同时废除了​​sync修饰符​​ 和 ​​native修饰符​​新增了可以使用多v-model 语法，并且可以支持自定义修饰符
   详细请看 v-model视频教程

<template>
   <!--废弃-->
   <div xxx.sync></div>
   <A @click.native></A>
   <!--新增多v-model用法以及自定义修饰符-->
   <B v-model:xxx='a' v-model:cccc='a' v-model:ddd.yyy.ccc='a'></B>
  </template>
  export default {
   props: {
     modelValue: String // 以前是`value：String`
   },
   emits: ['update:modelValue'],
   methods: {
     changePageTitle(title) {
       this.$emit('update:modelValue', title) // 以前是 `this.$emit('input', title)`
     }
   }
 }

1. ​​v-for v-if​​​指令优先级调整
   2.x 版本中在一个元素上同时使用 ​​v-if​​ 和 ​​v-for​​ 时，​​v-for​​ 会优先作用
   3.x 版本中 ​​v-if​​ 总是优先于 ​​v-for​​ 生效。
2. 异步组件
   2.x 异步组件直接通过​​promise​​返回
   3.x 异步组件需要通过​​defineAsyncComponent​​包裹返回
   例子

//2.x
const asyncModal = () => import('./Modal.vue')

//3.x
import { defineAsyncComponent } from 'vue'
const asyncModal = defineAsyncComponent(() => import('./Modal.vue'))

1. 生命周期名字改变
   ​​​destroyed​​​ 生命周期选项被重命名为 ​​unmounted​​​​beforeDestroy​​​ 生命周期选项被重命名为 ​​beforeUnmount​​
2. ​​transition​​​组件部分class重命名
   ​​​leave-class​​​ 已经被重命名为 ​​leave-from-class​​ (在渲染函数中可以写​​leaveFromClass​​)
   ​​​enter-class​​​ 已经被重命名为 ​​enter-from-class​​ (在渲染函数中可以写​​enterFromClass​​)
   迁移策略
   ​​​.v-enter​​​ 字符串实例替换为 ​​.v-enter-from​​​​.v-leave​​​ 字符串实例替换为 ​​.v-leave-from​​
3. 自定义指令破坏性更新
   主要是生命周期的替换方便记忆

2.x
bind - 指令绑定到元素后调用。只调用一次。
inserted - 元素插入父 DOM 后调用。
update - 当元素更新，但子元素尚未更新时，将调用此钩子。
componentUpdated - 一旦组件和子级被更新，就会调用这个钩子。
unbind - 一旦指令被移除，就会调用这个钩子。也只调用一次。

3.x
created - 新增！在元素的 attribute 或事件监听器被应用之前调用。
bind → beforeMount
inserted → mounted
beforeUpdate：新增！在元素本身被更新之前调用，与组件的生命周期钩子十分相似。
update → 移除！该钩子与 updated 有太多相似之处，因此它是多余的。请改用 updated。
componentUpdated → updated
beforeUnmount：新增！与组件的生命周期钩子类似，它将在元素被卸载之前调用。
unbind -> unmounted

移除的API以及方法

1. ​​$on​​​，​​$off​​ 和 ​​$once​​ 实例方法已被移除，组件实例不再实现事件触发接口。 2.x 会使用这两个方法进行​​eventBus​​封装在Vue3中移除了，使用​​mitt库​​代替。
2. filters过滤器已经移除

//2.x
<template>
  <h1>Bank Account Balance</h1>
  <p>{{ accountBalance | currencyUSD }}</p>
</template>
<script>
  export default {
    props: {
      accountBalance: {
        type: Number,
        required: true
      }
    },
    filters: {
      currencyUSD(value) {
        return '$' + value
      }
    }
  }
</script>

//3.x 可以添加一个全局过滤器使用
const app = createApp(App)

app.config.globalProperties.$filters = {
  currencyUSD(value) {
    return '$' + value
  }
}

1. $children 移除
   在2.x使用 ​​$children​​ 访问子组件实例，Vue3 推荐使用模板引用也就是​​ref​​访问子组件
2. 全局函数 ​​set​​ 和 ​​delete​​ 以及实例方法 ​​$set​​ 和 ​​$delete​​。基于代理的变化检测已经不再需要它们了
3. 按键修饰符
   2.x config.keyCode 可以自定义按键修饰符

Vue.config.keyCodes = { f1: 112 }
<input v-on:keyup.f1="showHelpText" />

在Vue3已经废除 Vue 3 继续支持这一点就不再有意义了。因此，现在建议对任何要用作修饰符的键使用 kebab-cased (短横线) 名称

<!-- Vue 3 在 v-on 上使用按键修饰符 -->
<input v-on:keyup.page-down="nextPage">

<!-- 同时匹配 q 和 Q -->
<input v-on:keypress.q="quit">

结束语

如果有漏掉的欢迎补充，私信联系。祝大家迁移顺畅。