惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

Security Latest
Security Latest
Recorded Future
Recorded Future
人人都是产品经理
人人都是产品经理
S
SegmentFault 最新的问题
Hacker News - Newest:
Hacker News - Newest: "LLM"
C
CXSECURITY Database RSS Feed - CXSecurity.com
博客园 - 三生石上(FineUI控件)
博客园 - 聂微东
P
Privacy & Cybersecurity Law Blog
WordPress大学
WordPress大学
Know Your Adversary
Know Your Adversary
Spread Privacy
Spread Privacy
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
量子位
L
LINUX DO - 热门话题
L
Lohrmann on Cybersecurity
博客园 - Franky
酷 壳 – CoolShell
酷 壳 – CoolShell
T
Tor Project blog
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
雷峰网
雷峰网
阮一峰的网络日志
阮一峰的网络日志
V
Visual Studio Blog
T
Threatpost
T
Tenable Blog
有赞技术团队
有赞技术团队
大猫的无限游戏
大猫的无限游戏
Engineering at Meta
Engineering at Meta
GbyAI
GbyAI
C
Cisco Blogs
H
Heimdal Security Blog
Attack and Defense Labs
Attack and Defense Labs
A
About on SuperTechFans
Last Week in AI
Last Week in AI
N
News and Events Feed by Topic
T
Threat Research - Cisco Blogs
cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
I
Intezer
V
V2EX
Cyberwarzone
Cyberwarzone
cs.CL updates on arXiv.org
cs.CL updates on arXiv.org
B
Blog RSS Feed
V
Vulnerabilities – Threatpost
N
Netflix TechBlog - Medium
T
The Blog of Author Tim Ferriss
CTFtime.org: upcoming CTF events
CTFtime.org: upcoming CTF events
U
Unit 42
PCI Perspectives
PCI Perspectives
P
Privacy International News Feed
D
Docker

时间的朋友

Windows 命令行密码重置 Anaconda安装 typescript 注解解读1 Konvajs Shape加载自定义图片 sshpass 使用 why-is-node-running webgl笔记 SharedArrayBuffer is not defined blender 常用快捷键 vue -- v3.4commit提交记录2 vue2 升级vue3报错问题整理 着色器 expressjs 源码 hyper-V arch linux 网络配置 element input数字格式化 three 拼接货架 WebAudio笔记 Windows nginx重启bat脚本 URI malformed vue3 -- Class 对象在组件中使用范例 | 时间的朋友 ruby 安装和升级 element-plus 老版本cascader使用卡死问题 vue3 内置Transition组件 前端memo的实现 Vue -- vue-class-component源码 linux 优化脚本 typescript 装饰器 microbundle 源码 WSL2问题解决WslRegisterDistribution failed with error: 0x800701bc vue -- vue3利用createVNode函数,建立命令式调用组件 SSH connection failed: connect ECONNREFUSED 请求中获取浏览器推荐语言 flutter 生命周期 双向链表 堆和栈 EventSource 单向链表 简易的事件监听EventBus fork的仓库更新分支 forwardRef 定义的组件添加静态属性 js 获取滚动元素 canvas requestAnimationFrame画一个clock mousedown event中保持input的focus状态 vue -- @vue/compiler-core整体逻辑 IOS端h5 fixed滚动问题 vue -- compile结果代码解读 vue -- transformElement源码 Vue -- 内置指令源码 vue3 -- @vue/compiler-sfc compileScript源码 浏览器工作原理 对比2个版本号的方法 vite 向entry html中注入代码 小程序 -- 内部使用webview绑定微信公众号openId github coding同步action 小程序 -- 微信外部浏览器或者链接打开方式整理 MSE -- MediaSource 的前端使用 rollup 打包vue2组件 常用工具函数整理 Benchmark.js 使用 import-html-entry js沙箱实现源码 import-html-entry 笔记 axios core源码 国内开源镜像网站 nuxt -- docker-compose进行部署 vue -- provide和inject原理 vue -- hoistStatic原理 jenkins 配置模板代码 vue -- compileTemplate原理 小程序开发问题整理 webpack-dev-server proxy代理模块 vite 代理中更改请求头问题 Async.js flutter 问题整理 比较两个数组的不同项 ms源码解析 浏览器同源策略 前端缓存笔记 webpack5 schema-utils tsc 和 babel 编译typescript区别 typescript 学习笔记 esbuild api整理 Webpack Chain 源码 deepmerge库源码解读 Vue 自定义指令的执行机制 linux 问题整理 webpack5学习笔记 elementui form多表单验证 Webpack5 -- Assest Module vue -- 实现MenuTree组件 Vue -- VFor的编译处理 vue -- 使用中问题整理 算法基础知识 浏览器环境检测函数整理 yarn 问题搜集 c++笔记 webpack 模块加载原理 webpack 模块加载原理(二) Zero Width Characters slate.js API整理 slate.js 富文本编辑器
vue -- v3.4commit提交记录
2023-12-08 · via 时间的朋友

vue – v3.4commit提交记录 🔗

  1. 复制htmlparser2 Parser Tokenizer文件 (解析器和分词)

  2. 去掉xmlMode和htmlMode,本质上vue不存在xmlMode

  3. 去除小写属性,

    1. 分词在对象构造函数中实例化
    2. buffer重写成字符串
    3. 重写slice方法
    4. 增加parse入口方法,用于实例调用
  4. 主parser中重写入口

    1. 暴露parser
    2. 增加htmlMode
  5. parser中单独实例化分词器

    1. 分词器中记录当前指针的行、列、开始的行、列
  6. 去除行列计数

  7. getPositionForIndex获取当前index所在的行列数据

  8. 用stack数组记录元素堆栈

  9. onattribname中拦截指令相关的标签,处理指令结尾

  10. currentAttrs 改为用Set记录当前属性

  11. 删除Parser中处理指令的代码,移到到分词器中处理

  12. 增加prop位置索引信息,删除外部上下文检查

  13. 删除解析中htmlMode的代码

  14. 分词器中处理插值的部分{{}}

  15. 处理v-pre指令部分

  16. 增加3种处理模式,base、sfc、html

image.png
  1. 删除buildIn类型
    1. image.png
    2. 改为手写,包括Suspense和Transition
      1. image.png
  2. refactor: swap to new template parser
    1. parser中特殊处理vFor指令
  3. 处理浏览器部分特殊字符解析
    1. image.png
  4. 标记解析时的根节点,默认为**Namespace.HTML **。
  5. 支持sfc中模版重用的功能
    1. 现在入口处直接转换成ast
      image.png
    2. 原transform部分不再进行转换ast了
      image.png
    3. compile部分优先使用ast,不存在则才使用source源码
      image.png
  6. 分词器中加入对template模板的支持
  7. 修复新解析器中vBind的处理
    image.png
  8. 如果template是从src引入的则不再处理
    image.png
  9. 重写resolveTemplateUsageCheckString中递归的写法
1
2
3
ast!.children.forEach(walk)

function walk(node: TemplateChildNode) {}
  1. 处理template lang=html的情况

    image.png
  2. 强制刷新ast

    image.png
  3. 当使用自定义编译器时,ast不可以复用

  4. 优化位置克隆,这里使用直接赋值

    image.png
  5. 去除magic-string中的script trim方法,这里作者解释可以优化10%的时间

    image.png
magic-string's trim method uses a regex check for aborting which turns
out to be extremely expensive - it cna take up to 10% time in total SFC
compilation! The usage here is purely aesthetic so simply removing it
for a big perf gain is well worth it.
  1. 合并生成代码中的一些多余操作, 这里在生成代码是的一些换行操作,原来通过push一个回车生成新行,现在标记成flag,可以提升6%
1
2
3
4
5
6
7
Previously, many CodegenContext.push() calls were unnecessarily
iterating through the entire pushed string to find newlines, when we
already know the newline positions for most of calls. Providing fast
paths for these calls significantly improves codegen performance when
source map is needed.

In benchmarks, this PR improves full SFC compilation performance by ~6%.
  1. 优化sourcemap生成, 这里直接操作context.map的原型,这里作者解释了,因为source-map-js中的addMapping()实现有一堆不必要的参数和验证检查,在我们的例子中是纯粹的开销。
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
function addMapping(loc: Position, name: string | null = null) {
    // @ts-ignore we use the private property to directly add the mapping
    // because the addMapping() implementation in source-map-js has a bunch of
    // unnecessary arg and validation checks that are pure overhead in our case.
    const { _names, _mappings } = context.map
    if (name !== null && !_names.has(name)) _names.add(name)
    _mappings.add({
      originalLine: loc.line,
      originalColumn: loc.column - 1, // source-map column is 0 based
      generatedLine: context.line,
      generatedColumn: context.column - 1,
      source: filename,
      name
    })
  }
// ....
}

release: v3.4.0-alpha.2 🔗

  1. 空行问题, 首字符为回车行,会插入空行

    image.png
  2. ssr模式下ast重用

    1. image.png
    2. 增加flag用于确认是否已经解析过
      1. image.png
  3. 增加解析容忍度

    1. image.png
  4. 修复属性参数为空的情况

    1. image.png

release: v3.4.0-alpha.3 🔗

  1. 分词器在重置方法时调用重置inRCDATA 以致后续解析其他模板时不再报错

  2. 在解析模板开始时,重置分词器是否在xml的flag

    image.png
  3. 模板在解析时,不去解析Error作为全局变量

    image.png
  4. 通过分析ast,找出模版中引入的变量使用(analyze import usage in template via AST (#9729))

    1. 解析器新增入口flag,(是否解析语句),默认时true
      image.png
    2. 新增creteSimpleExpression入口函数
      image.png
    3. 解析语句部分
      1. image.png
      2. children部分ast赋值到解析node对象上
        image.png
      3. 原来的code组装方式由原来的字符串拼接,现在采用Set进行整合去重
        image.png
  5. v-node指令监听语法升级为错误抛出

    image.png
  6. 删除v-is语法

    image.png
  7. 修复在v-pre中的插值语法

    image.png

release: v3.4.0-alpha.4 🔗

  1. 校验props的validator包含2个参数
    image.png
  2. 使用同样的解析参数进行编辑处理
    image.png
  3. 兼容最近的tc39提案,可以动态声明引入的类型https://github.com/tc39/proposal-import-attributes
1
2
import json from "./foo.json" with { type: "json" };
import("foo.json", { with: { type: "json" } });
image.png
  1. 透传filename属性
    image.png
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
    const ast = baseParse(`<div />`)
    
    const calls: any[] = []
    const plugin: NodeTransform = (node, context) => {
      calls.push({ ...context })
    }
    
    transform(ast, {
      filename: '/the/fileName.vue',
      nodeTransforms: [plugin]
    })
    
    expect(calls.length).toBe(2)
    expect(calls[1]).toMatchObject({
      filename: '/the/fileName.vue',
      selfName: 'FileName'
    })
  1. 提升ssr下面,hydrant对于html属性的检查,是否需要跳过检查
    image.png
  2. 增加 __VUE_PROD_HYDRATION_MISMATCH_DETAILS__标志,用于记录hydrant
  3. 增加MathML语法标签的支持
    image.png
  4. 增加组件类型中对于Slots的输出
    image.png
  5. 输出DefineType
    image.png