尝鲜Vue3之五:源码结构

简介: 尝鲜Vue3之五:源码结构

代码结构



源码位置是在package文件件内,实际上源码主要分为两部分,编译器和运行时环境。


  • 编译器


  • compiler-core 核心编译逻辑


  • 基本类型解析
  • AST


  • compiler-dom 针对浏览器的编译逻辑


  • v-html
  • v-text
  • v-model
  • v-clock


  • 运行时环境


  • runtime-core 运行时核心


  • inject
  • 生命周期
  • watch
  • directive
  • component


  • runtime-dom 运行时针对浏览器的逻辑


  • class
  • style


  • runtime-test 测试环境仿真


主要为了解决单元测试问题的逻辑 在浏览器外完成测试比较方便


  • reactivity 响应式逻辑


  • template-explorer 模板解析器 可以这样运行


yarn dev template-explorer




然后打开index.html



  • vue 代码入口


整合编译器和运行时



  • server-renderer 服务器端渲染(TODO)


  • share 公用方法


相关文章
|
1天前
Vue3 项目的 setup 函数
【10月更文挑战第23天】setup` 函数是 Vue3 中非常重要的一个概念,掌握它的使用方法对于开发高效、灵活的 Vue3 组件至关重要。通过不断的实践和探索,你将能够更好地利用 `setup` 函数来构建优秀的 Vue3 项目。
|
4天前
|
JavaScript Java API
vue3知识点:setup
vue3知识点:setup
16 5
|
4天前
|
资源调度 JavaScript 前端开发
vue3第一章基础:创建Vue3.0工程,包括使用vue-cli 创建、使用 vite 创建
vue3第一章基础:创建Vue3.0工程,包括使用vue-cli 创建、使用 vite 创建
14 5
|
1天前
|
存储 JavaScript 前端开发
vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
【10月更文挑战第21天】 vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
|
4天前
|
API
vue3知识点:reactive对比ref
vue3知识点:reactive对比ref
15 3
|
4天前
|
API
vue3知识点:响应式数据的判断
vue3知识点:响应式数据的判断
14 3
|
4天前
|
JavaScript API
vue3知识点:ref函数
vue3知识点:ref函数
13 2
|
4天前
|
JavaScript API
Vue3快速上手简介
Vue3快速上手简介
15 2
|
4天前
|
API
vue3知识点:reactive函数
vue3知识点:reactive函数
12 1
|
4天前
|
JavaScript 前端开发 API
vue3知识点:Vue3.0中的响应式原理和 vue2.x的响应式
vue3知识点:Vue3.0中的响应式原理和 vue2.x的响应式
11 0