vue3 vs vue2 / Vue Router 4.x vs 3.x / Vuex 4.x vs 3.x 主要不同点对比

Vue对比

不同点	vue3	vue2
.	.	.
实例创建	Vue.createApp	new Vue
el选项	无，需调用$.mount()挂载	有，在option可选
emits选项	有，触发自定义事件需定义(可选)	无
默认v-model语法糖	原生标签：:value，@input 组件：:model-value，@update:model-value	原生标签：:value，@input 组件：:value，@input
自定义组件的 v-model	使用参数：v-model:foo，为:foo，@update:foo语法糖	使用组件选项：{model: { prop: ‘valueName’, event: ‘eventName’} }
.sync修饰符	无，可用v-model:foo替代，等价于vue2的:foo.sync	:foo.sync为:foo，@update:foo语法糖
全局组件	Vue.createApp({}).component({})	Vue.component({})
全局混入	Vue.createApp({}).mixin({})	Vue.mixin({})
全局指令	Vue.createApp({}).directive(‘name’,{})	Vue.directive(‘name’,{})
自定义指令钩子函数	created，beforeMount，mounted，beforeUpdate，updated，beforeUnmount，unmounted	bind，inserted，update，componentUpdated，unbind
data代理	Proxy	defineProperty
异步组件	新的 defineAsyncComponent 助手方法，用于显式地定义异步组件 工厂函数component 选项被重命名为 loader 工厂函数本身不再接收 resolve 和 reject 参数，且必须返回一个 Promise	无 defineAsyncComponent 方法 工厂函数使用component 选项 工厂函数接收 resolve 和 reject 参数
是否支持多根节点组件	支持，需要显式定义attribute分布在哪个节点	不支持
teleport	支持，类似React的Portals，提供了一种将子节点渲染到存在于父组件以外的 HTML DOM 节点的方案，但虚拟节点仍然挂载于父组件之下	不支持
渲染函数VNode Prop 格式化	扁平化 ，{ innerHTML: ‘’, onClick: submitForm }	嵌套，{domProps: { innerHTML: ‘’ }, on: { click: submitForm } }
插件install第一个参数	app，由 Vue 的 createApp 生成的 app 实例	Vue，vue的构造函数
插件添加实例方法	app.config.globalProperties，这些 property 将被复制到应用中，作为实例化组件的一部分	Vue.prototype，挂载到Vue原型链上，非真正实例方法
组合式api	支持	不支持
$listeners	不支持	支持
? 多事件处理器	支持	不支持

Vue Router 对比

不同点	Vue Router 4.x	Vue Router 3.x
.	.	.
创建路由	const router = VueRouter.createRouter({ routes }) ; const app = Vue.createApp({}) ; app.use(router) ;	const router = new VueRouter({ routes }) ; const app = new Vue({ router }).$mount(’#app’)
路由参数中自定义正则	支持，不再支持 * 号通配符	不支持，可使用 * 号通配符
历史模式	const router = VueRouter.createRouter({ history: createWebHashHistory() // or createWebHistory() })	const router = new VueRouter({ mode: ‘hash’ // or ‘history’})
导航守卫	支持返回值resolve 守卫。返回false可取消导航；返回路由地址可重新导航。同时支持next函数resolve守卫（需要守卫本身支持）	只支持next函数resolve守卫（需要守卫本身支持）
组合式api	支持	不支持
在<router-link>使用v-slot api	支持	3.1.0支持
<keep-alive> 和 <transition>	必须通过 v-slot API 在 <router-view> 内部使用	可在 <router-view> 外部使用

Vuex 对比

不同点	Vuex 4.x	Vuex 3.x
.	.	.
创建store	const store = createStore({ }) ; const app = createApp({ }) ; app.use(store)	Vue.use(Vuex) ; const store = new Vuex.Store({ })
组合式api	支持	不支持
插件	const store = createStore({ plugins: [myPlugin] })	const store = new Vuex.Store({ plugins: [myPlugin] })

注：? 表示存疑