vue2 和 vue3 的比较

147 阅读1分钟

创建实例

vue2 使用new创建实例

const vm = new Vue({})

vue3使用函数创建实例

const app = Vue.createApp({}) 

动机:对ts的支持变得更好,可以很准确声明createApp的每个参数类型,让用户写的参数更加明确,new Vue()也不是不行,它里面的参数使用的this是变动和扩展的,ts无法感知,这时候就需要做很多配置,用起来很麻烦,所以Vue2整合ts显得特别别扭,createApp是一种流派,还有一种流派是,装饰器+class类会经量避免对this的访问,大大说,早期使用的就是这个,后来没有用,是因为,它认为装饰器性能有问题,又没有正式的规范

实例方法使用

vue2 使用Vue.component

Vue.component('comp',{template:'<div>123</div>'})

vue3使用app.component

app.component('comp',{template:'<div>123</div>'})//还有mixins 等等

动机:避免全局污染,vue2使用Vue.component是全局的,会污染全局代码,而且Vue.component不利于tree-shake,静态调用很难分析依赖

实例挂载方式

vue2 使用$mount

vm.$mount('#app')

render(h){h('div',{attrs:{},})}

vue3 使用mount

app.mount('#app')
render(){Vue.h('div',{全部设置为一层,属性属于那个类型是由框架去判断})}

动机:对api的简化,一致性增强