vue2和vue3的区别

152 阅读1分钟

1.vue2使用的是Options API,vue3使用的是Composition API。

Options API:在一个vue文件中配置methods,computed,data等等属性和方法,共同处理页面逻辑。
Composition API:组件根据逻辑功能来组织的,一个功能所定义的所有 API 都放在sepup方法中。
使用组合式API更符合大型项目的开发,通过setup可以将该部分抽离成函数,在执行setup的时候还没有进行项目的初始化,就不能访问data或者是methods中的数据和方法,所以setup中没有this。

2.在响应式原理上vue2使用Object.defineProperty实现数据劫持,vue3使用Proxy和Reflect实现数据劫持。

Object.defineProperty:方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。
Proxy:用于改变对象的默认访问行为,实际上是在访问对象之前增加一层拦截,在任何对对象的访问行为都会通过这层拦截。
Object.defineProperty无法检测到对象属性的新增或删除。

3.vue3可以在template模板中写多个根元素,vue2则报错。

4.在生命周期中vue3移除了beforeCreate和created,setup是围绕beforeCreate和created生命周期钩子运行的。

5.vue2是通过new Router()方法来创建路由的,vue3是使用createRouter()方法来创建的。

hash模式: 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。
路由跳转方式有:this.router.push()this.router.push(),this.router.replace()。
获取路由参数方式:this.route.querythis.route.query,this.route.params。

6.创建vue实例方法vue2:new Vue({}),vue3: vue.createApp({})。