petite-vue源码解析：静态视图构建过程详解？

本文共计3162个文字，预计阅读时间需要13分钟。

代码库结构介绍 + examples + 各种使用示例 + scripts + 打包发布脚本 + tests + 测试用例 + src + 指令如 v-if 等 + 实现 + app.ts + createApp + 函数 + block.ts + 块对象 + context.ts + 上下文对象 + eval.ts + 提供v-if等指令

代码库结构介绍

• examples 各种使用示例
• scripts 打包发布脚本
• tests 测试用例
• src
  • directives v-if等内置指令的实现
  • app.ts createApp函数
  • block.ts 块对象
  • context.ts 上下文对象
  • eval.ts 提供v-if="count === 1"等表达式运算功能
  • scheduler.ts 调度器
  • utils.ts 工具函数
  • walk.ts 模板解析

若想构建自己的版本只需在控制台执行npm run build即可。

深入理解静态视图的渲染过程

静态视图是指首次渲染后，不会因UI状态变化引发重新渲染。其中视图不包含任何UI状态，和根据UI状态首次渲染后状态不再更新两种情况，本篇将针对前者进行讲解。