Vue3源码解析,打造自己的Vue3框架

发布于:2022-11-07 ⋅ 阅读:(900) ⋅ 点赞:(0)

e9f43e6a7b63c89ba3bf7bf81c6228a4.jpeg

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性能更高,体积更小,复用性更好,代码维护更方便。
0086b3a6a42acda4441b28611b860783.jpegVite的使用
Vite简介
Vite官方文档:Vite |下一代前端工具链

Vite(法语意为“快”,读作/vit/,读作“veet”)是一款全新的前端构建工具。

优势

使用原生ESM文件快速启动服务,无需打包。

轻型热过载,总是极快模块热过载(HMR)

功能丰富,支持打字稿、JSX、CSS等开箱即用。

等等

为什么要Vite?
Webpack启动项目-> webpack打包编译->将打包结果交给浏览器->浏览器运行。

Vite启动项目->把打包编译的工作交给浏览器->浏览器直接分析业务。

传统方式

基于packager的启动,你必须先抓取并构建你的整个应用程序,然后才能提供服务。

更新速度会随着应用量的增加而直线下降。

Vite模式
a2df1cac82dcb184ecc6c262367b0ff2.jpegVite提供原生ESM模式的源代码。这实际上使浏览器接管了打包程序的部分工作。

Vite只需要在浏览器请求源代码时进行转换,按需提供源代码。

根据情况动态导入代码,即只有在当前屏幕上实际使用时才会进行处理。

问题摘要:

Vite提供服务前需要打包吗?

可以用webpack创建vue3项目吗?


网站公告

今日签到

点亮在社区的每一天
去签到