资料内容:
1、Vue3 出现解决了什么问题?它有哪些优势?
Vue2 代码模式下存在的⼏个问题:
随着功能增加,复杂的组件代码越来越多,变得难以维护。主要原因是 vue2 通过选项式API组织的代码,⼀个逻辑功能可能有多处代
码,不易别⼈上⼿。
缺少⼀个⽐较⼲净的在多个组件之间可以提取和复⽤逻辑的机制。
类型推断不友好。
没有静态类型检查,只有代码运⾏之后才能发现错误等等。
Vue3 是在 Vue2 的基础上进⾏了⼀些优化,对 typeScript 有了更好的⽀持。Vue3 和 Vue2 是可以共存的,Vue3 能够向下兼容⽀持选项式
API ,同时⼜新增了⼀些特性,⼤⼤提升了性能。
Vue3 的优势:
性能更好
体积更⼩
更好地 ts ⽀持
更好的代码组织
更好的逻辑抽离
更多新的功能
2、Vue3 新特性有哪些?
vue3的新增特性有:
1、性能提升
响应式性能提升,由原来的 Object.defineProperty 改为基于ES6的 Proxy ,使其速度更快,消除警告。
重写了 Vdom ,突破了 Vdom 的性能瓶颈。
进⾏模板编译优化。
更加⾼效的组件初始化。
2、更好的⽀持 typeScript
有更好的类型推断,使得 Vue3 把 typeScript ⽀持得⾮常好。
3、新增Composition API
Composition API 是 vue3 新增的功能,⽐ mixin 更强⼤。它可以把各个功能模块独⽴开来,提⾼代码逻辑的可复⽤性,同时代码压缩性更
强。
4、新增组件
Fragment 不再限制 template 只有⼀个根⼏点。
Teleport 传送门,允许我们将控制的内容传送到任意的 DOM 中。
Supense 等待异步组件时渲染⼀些额外的内容,让应⽤有更好的⽤户体验。
5、Tree-shaking:⽀持摇树优化
摇树优化后会将不需要的模块修剪掉,真正需要的模块打到包内。优化后的项⽬体积只有原来的⼀半,加载速度更快。
6、Custom Renderer API: ⾃定义渲染器
实现 DOM 的⽅式进⾏ WebGL 编程。
3、vue2 和 vue3 的响应式有什么区别?
vue2 的响应式原理:
对象:是通过 Object.defineProperty 对 对象的已有属性值的读取和修改进⾏劫持。
Object.defineProperty( 'data', 'count', {get(){ },
set(){ }
})
存在的问题:对象直接添加新属性或删除已有属性的时候,界⾯不会⾃动更新。