vue3随笔
vite:
相比webpack webpack先通过入口文件找依赖 然后打包bounder 然后启动devServer
vite 直接启动devServer 然后找依赖模块 由浏览器去请求本地服务返回依赖模块
项目越多模块越大 vite越好
效率提升
- 静态提升
静态节点 没有动态绑定的内容会提升到render函数和外面去
静态属性 静态属性也会被提升
2. 预字符串化
当编译器发现大量连续静态内容 大概20个 会直接将其编译为一个普通的字符串节点
虚拟节点会降低很多 vue2没有这个
3, 缓存事件处理函数
4.block tree vue2对比虚拟节点不知道哪些是静态节点哪些是动态节点 会一层一层比较
vue3会记录这个节点和后面有哪些节点是动态哪些是静态 直接找到对应的block去比较
标记1,2
左block[input1, input2] 右block[input1, input2]
4.PatchFlag
vue2在对比每个节点时 并不知道这个节点哪些相关信息会发生变化 因此只能将所有信息依次比对
会打上 Text ,Class 等变化标记
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单,K8s 太复杂?w7panel 让容器管理更轻松!