Vue3源码解析,打造自己的Vue3框架
下栽ke呈:https://www.666xit.com/3851/
Vue3动机和新特性-面试问题
Vue3设计概念组合API征求意见稿| Vue组合API
动机和目的:
更好的逻辑重用和代码组织(组合api)
OptionsAPI(旧)=> compositionAPI(新),效果:代码组织更方便,逻辑重用更方便,非常有利于维护!!
更好的类型派生(受typescript支持)
Vue3源代码用ts重写,vue3支持ts更友好(ts可以让代码更稳定,类型检查!)
vue3的新特性:
数据响应原理的重新实现(ES6代理代替了ES5的Object.defineProperty属性)
已解决:数组更新检测等bug,大大优化了响应式监听-覆盖的性能。
(原来检测对象属性的变化需要逐个递归监控属性。)代理可以直接劫持整个对象。
虚拟DOM-新算法(更快更小)
提供组合api是为了更好的逻辑重用。
一个模板可以有多个根元素。
用源typescript重写,有更好的类型派生(更严格更稳定的类型检测)。
...事件总线过滤器被丢弃。...
总结:vue3性能更高,体积更小,复用性更好,代码维护更方便。Vite的使用
Vite简介
Vite官方文档:Vite |下一代前端工具链
Vite(法语意为“快”,读作/vit/,读作“veet”)是一款全新的前端构建工具。
优势
使用原生ESM文件快速启动服务,无需打包。
轻型热过载,总是极快模块热过载(HMR)
功能丰富,支持打字稿、JSX、CSS等开箱即用。
等等
为什么要Vite?
Webpack启动项目-> webpack打包编译->将打包结果交给浏览器->浏览器运行。
Vite启动项目->把打包编译的工作交给浏览器->浏览器直接分析业务。
传统方式
基于packager的启动,你必须先抓取并构建你的整个应用程序,然后才能提供服务。
更新速度会随着应用量的增加而直线下降。
Vite模式Vite提供原生ESM模式的源代码。这实际上使浏览器接管了打包程序的部分工作。
Vite只需要在浏览器请求源代码时进行转换,按需提供源代码。
根据情况动态导入代码,即只有在当前屏幕上实际使用时才会进行处理。
问题摘要:
Vite提供服务前需要打包吗?
可以用webpack创建vue3项目吗?