vue 设计与实现

阅读《vue设计与实现》，个人理解整理

设计思路

• 虚拟DOM用来描述真实DOM的js对象
• 模版template
  • 虚拟DOM比模版灵活；模版比虚拟DOM更加直观
• 渲染器 将虚拟DOM转化为真实DOM
• 组件 就是一组DOM元素的封装，本质就是虚拟DOM;可以是返回虚拟DOM的函数也可以是对象
• 编译器 将模版编译为渲染函数
  • 渲染器与编译器之间的交流 => 虚拟DOM
  • 编译器编译的时候可以寻找变更点，patchFlag

实现响应式

• 副作用函数 会产生副作用的函数--函数的执行会直接或间接影响其他函数的执行
• 响应式数据
• 响应式系统设计
  • 读取/设置 操作时分别对副作用函数进行收集和读取执行操作；
  • 被代理对象->被操作（读取/设置）字段名->使用effect函数注册的副作用函数effectFn：三者的树形结构：
    • WeakMap与Map的区别；
  • 分支切换 执行代码分支跟随判断值的变化而变化；
  • cleanup 在分支切换后，被代理对象的字段属性与副作用函数的依赖关系发生改变，遗留副作用函数会导致不必要的更新。需清空之前的依赖关系重新进行依赖收集；
  • 嵌套effect与effect栈
  • 避免无限递归循环
  • 执行调度：控制执行顺序和执行次数