vue3源码解析(v3.3.8)

从最基本的目录结构开始,逐渐深入,主要是为留痕,以便以后查阅

0 版本

版本:3.3.8

1 目录结构

vue3源码解析(v3.3.8)_第1张图片

├─changelogs		        // 更新日志
├─packages		        // 源码和测试代码
│  ├─compiler-core		// 跨平台的框架
│  ├─compiler-dom 		// 浏览器端编译器
│  ├─compiler-sfc 		// .vue 文件解析器
│  ├─compiler-ssr 	  	// 服务端解析器
│  ├─dts-test			// 
│  ├─reactivity			// 响应式系统的实现
│  ├─reactivity-transform       // 提供响应性语法糖,听说已经被移除了,但在最新的包里面还可以看见
│  ├─runtime-core 		// 包含虚拟 DOM 渲染器、组件实现、全局的js API。
│  ├─runtime-dom  		// 对 原生DOM API、属性、样式、事件等管理。
│  ├─runtime-test 		// 用于测试 runtime-core 的轻量级运行时,仅适用于vue内部测试
│  ├─server-renderer	        // 服务端渲染的核心实现
│  ├─sfc-playground		// 与 template-explorer 类似,不仅包含 template 部分的编译,还包含了 script 与 style 部分的编译。
│  ├─shared			// 包含多个包共享的内部实用工具库
│  ├─template-explorer    	// 用于调试模板编译输出工具。
│  ├─vue  		        // vue完整包
│  └─vue-compat			// vue3 的构建版本,提供可配置的 vue2兼容行为。
└─scripts 		        // 编译构建代码

1.1 目录解释

  • compiler-core:  Vue.js 是一个跨平台的框架,既可以在浏览器端编译,也可以在服务器端编译。compiler-core 包含所有与平台无关的代码转换插件
  • compiler-dom:  在浏览器端编译时,会使用 compiler-dom 提供的编译器,它是在 compiler-core 的基础上进行的封装。compiler-dom 包含了专门针对浏览器的代码转换插件
  • compiler-sfc:  用于实现  .vue 文件的解析,以及 template、script、style 的解析的相关代码都是由 compiler-sfc 模块实现的。
  • compiler-ssr:  在服务端编译时,会使用 compiler-ssr 提供的编译器。它是专门针对服务端渲染的转换插件。
  • runtime-core:  包含了与平台无关的运行时核心实现(vue核心代码),包括 虚拟DOM的渲染器、组件实现和一些全局的 JS API
  • runtime-dom:  基于 runtime-core 创建的以浏览器为目标的运行时,包括对原生 DOM API、属性、样式、事件等管理
  • reactivity:  包含响应式系统的实现,是 runtime-core 包的依赖,也可以作为与框架无关的包独立使用。
  • server-renderer:  包含服务端渲染的核心实现,是用户在使用 Vue.js 实现服务端渲染时所需要依赖的包。

1.2 构建版本

比较常见的是构建出来的Vue会有vue.global.js或者vue.runtime.global.js两种版本,他们分别表示:

  • vue.global.js:是包含编译器和运行时的“完整”构建版本,因此它支持动态编译模板。
  • vue.runtime.global.js:只包含运行时,并且需要在构建步骤期间预编译模板。

其中,如果需要在客户端上编译模板 (即:将字符串传递给template 选项,或者使用元素的DOM内HTML 作为模板挂载到元素),将需要编译器,因此需要完整的构建版本,如下代码所示:

// 需要编译器
Vue.createApp({
  template: '
{{ hi }}
' }) // 不需要 Vue.createApp({ render() { return Vue.h('div', {}, this.hi) } })

当使用Webpack的vue-loader时,*.vue 文件中的模板会在构建时预编译为JavaScript,在最终的捆绑包中并不需要编译器,因此可以只使用运行时构建版本。所以,如果直接在浏览器打开Vue的页面,可以直接采用

你可能感兴趣的:(vue,vue.js,javascript,前端)