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

Vue对比

不同点vue3vue2
...
实例创建Vue.createAppnew 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,unmountedbind,inserted,update,componentUpdated,unbind
data代理ProxydefineProperty
异步组件新的 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.xVue 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.xVuex 3.x
...
创建storeconst 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] })

注:? 表示存疑

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值