[已解决 ]vue源码:你们是怎么看vue源码的?

冉娃娃
  • 1.2k

已经### 业务背景

给自己定了个看vue源码的任务,第一步是看模板语法相关原理.模拟实现一个简单的模板语法功能

比如: 下面这个实例化过程,vue在后面到底做了哪些工作

<img id="app" src="xxx" />

new Vue({
  el: '#app',
})

断断续续起码花了2,3天才搞清楚大致的流程

  • _init
  • $mount

    • parse
    • compile
    • _patch
    • update

目前的思路

要想搞明白模板语法具体的步骤,就得搞清楚

  • HTML字符串是怎么转换到抽象语法树的
  • 抽象语法树又是怎么生成渲染函数的
  • 新老数据是如何对比差量数据的
  • .....

目前看源码的方法

  • 源码dev跑上,打断点看流程
  • 删除调试代码

    • 比如那些istanbool
  • 删除和当前关心的模块无关的代码

    • 比如parse我现在只看单标签<img />的编译
    • 调用parseHTML时传了很多函数进去,其中和单标签无关的全部删掉比如end(), chars()等

遇到的困难

在第一步就卡上了

HTML字符串编转换成抽象语法树这一步

  • 里面包含非常多方法

    • 转换HTML节点
    • 转换属性节点
    • 转换子节点
    • ...

为了从简单开始,我就只搞了一个img标签,还木有绑定任何动态数据..

结果,今天搞了几个小时,都还木有把parse这一步走完......

问题

  1. 你们看vue源码大概花了多少时间呢?特别是抽象语法树这一坨
  2. 我木有学过编译原理,是因为这个基础太差的原因吗?
  3. 还是我的思路有问题?应该跳过抽象语法树这一坨?

    • 但是跳过的话,就完全不知道模板语法是怎么实现的了

感觉我好笨~!~

评论
阅读 3.1k
2 个回答
✓ 已被采纳

死磕

别人的方法对于你来说,可能有用,也可能木有用

遇到问题时,进度非常慢,确实很恼火,但只要坚持啃上它几天,就会摸索出适合自己的方法来

所以最好的方式就是坚持

我的方法

  • clone官方仓库下载到本地
  • 找到入口文件
  • 梳理整体流程

    • 声明构造函数

      • 挂载各种原型方法
    • 实例化对象

      • html字符串转ast
      • ast转渲染函数
      • 渲染函数转虚拟DOM
      • 虚拟DOM转真实DOM
      • 渲染文档
  • 创建一个最小化的index.html,引入打包后的dist/vue.js
  • 在关键节点打debugger

    • 比如我要看怎么把html字符串转换成ast节点的
    • 就在parse函数里面打个断点
    • 一行一行的跟
  • 复制关键的代码到另外一个项目,实现迷你版的vue

    • 去掉开发环境代码
    • 去掉istanbool
    • 去掉ie兼容
  • 用xmind写总结

然后重复上面的步骤

  • 最开始不绑定任何数据
  • 然后使用vue指令
  • 然后调用实例方法
  • .....
  • 把vue官方文档上api里面的所有属性过一遍

不绑定任何数据的最小化示例代码

<img id="app" src="####" alt="ranwawa">

<script>
new Vue({
  el: '#app',
});
</script>

总结的xmind导图

image.png

image.png

vue的源码,其实很优秀的,也很规范。

正常使用,你肯定会先new Vue()啊,那就从入口开始撸起, 你的添加一个chrome的GitHub插件,这样看起来好一些(Octotree)

打开src/core/index.js啊:
image.png

然后你看啊。有一个 initGlobalAPI 这个东东,打开:
image.png

继续撸,在这里你得到为啥Vue上面会有哪些方法挂载,看着你会发现这里有段这个代码:
image.png

再进去看,你会学校vue初始化过程插件如何挂载,mixin如何使用balabala。

仅仅通过new Vue() 你就可以学习整个vue的过程中各种思路,是不是很好,很流畅。

以上。

撰写回答

登录后参与交流、获取后续更新提醒

宣传栏