1.vue2.0相比,vue3.0的变化主要有以下几点:
-
组合API和选项式API,开发人员根据自己情况和习惯,可以选择不同写法,组合式更加接近与原生的写法
-
性能提升:Vue3这个框架将Vue全部重构了。新的框架。底层采用TS来进行重构,性能提升能达到100%
-
对TS的支持,Vue3底层默认采用TS进行开发。我们Vue开发过程中,一般也会默认结合TS来使用
-
按需加载
-
新增组件:Fragment、Teleport、Suspense
-
Vue3目前创建项目采用了新的打包工具,vite工具(xxx)团队他们自己发布的一个打包。目标干掉webpack
vue3的优势:
- 更快:vue3重写了虚拟dom。性能提升很多
- 更小:新增了tree shaking技术,你们项目中没有用到的代码。打包会默认去掉。
- 更易于维护:Flow到TypeScript变化,让我们代码实现起来更加规范
2、Vue3的响应式
比较vue2和vue3的响应式
Vue2的响应式
- 对象: 通过 defineProperty 对对象的已有属性值的读取和修改进行劫持(监视/拦截)
- 数组: 通过重写数组更新数组一系列更新元素的方法来实现元素修改的劫持
- 存在问题:对象直接新添加的属性或删除已有属性, 界面不会自动更新;直接通过下标替换元素或更新 length, 界面不会自动更新
- 通过 Proxy(代理): 拦截对 data 任意属性的任意(13 种)操作, 包括属性值的读写, 属 性的添加, 属性的删除等…
- 通过 Reflect(反射): 动态对被代理对象的相应属性进行特定的操作
Vue3的响应式
- 通过 Proxy(代理): 拦截对 data 任意属性的任意(13 种)操作, 包括属性值的读写, 属 性的添加, 属性的删除等…
- 通过 Reflect(反射): 动态对被代理对象的相应属性进行特定的操作