Vue3的工具函数

「我正在参与掘金会员专属活动-源码共读第一期，点击参与」

本篇文章主要介绍的是Vue3和Vue2的工具函数对比。之前介绍过了Vue2的工具函数了。如果和Vue2相同的函数就会省略。

拉取源码

git clone https://github.com/vuejs/core.git

看到Vue3 目录就和2.x的有很大不同，包管理工具为pnpm。首先就是源码的主要集中在package里，而不是src，其次每个package里的文件夹都是一个独立的项目，就是说可以单独引用，脱离整个项目。

工具函数

package/shared目录下就是工具函数。

• “__tests__”：测试代码文件夹

expect(
        xxx
      ).toMatchSnapshot()

看看测试代码，这里有段陌生的方法toMatchSnapshot,这个测试执行完成之后会生成一个snapshot（快照），下次测试在执行的时候会和快照做比对，如果一样表示测试通过。

• “src”: 源码文件夹

  • codeframe: 用于根据AST分析出的错误将原始代码转换为标记出错误的代码片段及行数的字符串。效果如下图所示：

  • escapeHtml: 将字符串中特殊符号（如：<``&）转换为ASCII码

  • normalizeProps: 标准化props,包括了class和style，class返回的是空格拼接的字符串，style返回是一个标准的对象。

  • PatchFlags、ShapeFlags、SlotFlags: 通过二进制定义的标志，这样做| 和& 计算的时候会比十进制快。

  • toDisplayString: 用于转换{{}}为字符串。

    稍微复杂的工具函数就是codeframe了，我们来解读一下它

    • 首先传入的参数是一段原始代码的字符串，需要^标记的起始位置和结束位置
    • 接着算出代码的行数lines, newlineSequences需要插入行的数组
    • 当循环进入到错误的起始位置start的时候，在插入行添加空格，一直到错误位置添加^， 到结束后添加空格。
    • 最后结果通过\n换行符连接成字符串。
• “index.js” 这里的工具函数就和Vue.js2.x有很多类似的了。

结束语

Vue3里有很多精彩的代码片段是值得反复推敲和阅读的。包括项目的这种架构，每个包是个独立项目的管理，也是值得学习。