vue2 对比 Vue3 有很多新特性增加，也有很多功能属于破坏性更新。
列举值得关注的新特性
- 第一个肯定是组合式API
setup以及setup语法糖模式 - 新增的内置组件
TelePort以及Suspense - 响应式原理的变化从
Object.defineProperty换成了proxy - 对ts支持比较友好
- 自定义
hooks逻辑拆分 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.productionTipVue.extend
具有影响的改动点 之前的Vue.prototype 改为 app.config.globalProperties
//2.x //定义全局属性或者方法 vue.prototype.xxxxxx //3.x app.config.globalProperties.xxxxxxx
2.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 }
3.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)` } } }
4.v-for v-if指令优先级调整
2.x 版本中在一个元素上同时使用 v-if 和 v-for 时，v-for 会优先作用
3.x 版本中 v-if 总是优先于 v-for 生效。
5.异步组件
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'))
6.生命周期名字改变
destroyed 生命周期选项被重命名为 unmounted
beforeDestroy 生命周期选项被重命名为 beforeUnmount
7.transition组件部分class重命名
leave-class 已经被重命名为 leave-from-class (在渲染函数中可以写leaveFromClass)
enter-class 已经被重命名为 enter-from-class (在渲染函数中可以写enterFromClass)
迁移策略
.v-enter 字符串实例替换为 .v-enter-from
.v-leave 字符串实例替换为 .v-leave-from
8.自定义指令破坏性更新
主要是生命周期的替换方便记忆
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 } }
3.$children 移除
在2.x使用 $children 访问子组件实例，Vue3 推荐使用模板引用也就是ref访问子组件
4.全局函数 set 和 delete 以及实例方法 $set 和 $delete。基于代理的变化检测已经不再需要它们了
5.按键修饰符
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">
结束语
如果有漏掉的欢迎补充，私信联系。祝大家迁移顺畅。
