概览

大纲

1. DOM 的概念及使用 (从熟悉的概念引入)
2. Virtul DOM 概念及及解决的问题
   1. 简化对 DOM 的操作,核心模型

   let Vnode = {
     tag: 'h1',
     props:{
       id:'demo',
       onClick:() => {}
       //...
     },
     children:[]
   }

   Vnode 树描述 DOM 树

   2. 抽象 UI 模型方便其他渲染模型处理
3. 抛出渲染函数,解决如何把 Vnode -> Real DOM 的问题

   // h create Vnode
   function h(tag,props,children) {
     // return vnode
   }
   
   // render create real dom
   function render(h) {
     return h('h1',{},[
       h('p','text')
     ])
   }

4. 渲染函数如何触发,抛出 MVVM 模型解决渲染的问题
5. 整体结构
   1. 响应式模块 解决模型到视图映射
   2. 编译模块 模板 -> 渲染函数的处理
   3. 渲染模块, 视图 -> DOM 的问题
      1. 渲染阶段 模型 -> Vnode
      2. 挂载阶段 Vnode -> DOM
      3. 补丁阶段 新 Vnode diff 就 Vnode -> DOM

参考资料

• Vue 3 overview