源码目录结构设计
其中核心代码在src目录下, src下有6层目录
1 | src |
1 | ├─ src // 主要源码所在位置,核心内容 |
compiler:源码编译相关:
将template编译为render函数
将AST转化成Render
将模板解析成ast语法树
ast语法树优化
core目录包含了vue的核心代码
是Vue.js的灵魂, 需要重点分析的地方
内置组件
全局api封装
vue实例化
观察者
虚拟dom
工具函数
platform是vue的入口
- 2个目录2个入口, 分别打包成运行在web和weex上的vue.js
server: 所有服务端渲染的相关逻辑
sfc
通常我们开发vue.js 都会借助webpack构建, 然后通过.vue文件来编写组件。
这个目录下的代码逻辑会把.vue文件内容解析成一个js对象
shared
被浏览器端的vue.js 和 服务端vue.js 共享的工具方法
编译入口怎么找到
从package的启动命令scripts里, 一步步追溯到入口文件
进入config文件看
entry指向的路径,就是入口文件, resolve上面定义了, 就是拼接前面的目录,定位出入口文件就是platforms下面, 这里也包含了不同类型的入口文件
Runtime Only 对比 Runtime+Compiler
Runtime Only
我们在项目里使用vue时, 通常会借助webpack的vue-loader工具把.vue文件编译成js,这个过程是在编译阶段做的。 所以实际我们代码引入的vue只包含运行时的Vue.js代码
Runtime + Compiler
如果没有对代码进行预编译, 但是又使用了Vue的template属性传入字符串, 则需要在客户端编译模板。 编译过程发生在运行时, 所以需要带有编译器的版本。
1
2
3
4
5
6
7
8
9
10
11// 需要编译器的版本
new Vue({
template: '<div>{{ hi }}</div>'
})
// 这种情况不需要
new Vue({
render (h) {
return h('div', this.hi)
}
})
Vue入口找么找到
我们经常在项目里使用Vue, 会导入 import Vue from ‘vue’,那么我们导入的Vue是什么, 在源码怎么找到它呢
上一节找到编译入口是 src\platforms\web\entry-runtime-with-compiler.js
然后在runtime/index里面找到下一层
在core/index, 发现实际上就是一个用 Function 实现的类,我们只能通过
new Vue
去实例化它