页面表现

• v-if
  • true: 显示DOM
  • false: 用注释节点占位
  • 注释节点与DOM之间的切换
• v-show
  • true: 不作处理（用户自己设置的 display）
  • false: 行内样式设置**display: none**
  • 行内样式：style or style="display: none"

实现

思路

1. 对 data 进行数据劫持
2. 分析 ast 数，找到元素绑定的 v-if 以及 @methods 事件函数
   1. 分别放进 showPool 和 eventPool 中（数据格式为 Map）
      1. showPool 数据格式
         1. key: DOM对象
         2. value: { type: 'if/show', prop: data.xxx }
      2. eventPool 数据格式
         1. key: DOM对象
         2. value: methods.xxx 方法
3. 绑定事件处理函数
4. 初次渲染
   1. 如果遇到 v-if ，先给 showPool 中对应 value 加个 comment 注释节点用于后续占位
5. 用户触发 methods 事件函数
   1. data数据更新
   2. 触发了属性 setter
   3. 进行 update 更新页面

函数

• initData 数据响应式
  • 参数：
    • vm 实例（获取 vm.$data）
    • showPool（setter 触发，在 showPool 中找对应dom）
• initPool v-if、v-show、event 放进对应 pool
  • 参数：
    • template（ast树分析模板）
    • methods（找到事件函数）
    • showPool
    • eventPool
• bindEvent 事件绑定
  • 参数：
    • vm 实例（需要把方法放进实例）
    • eventPool（遍历 eventPool 挂载方法到 实例 上）
• render 页面渲染
  • 参数：
    • vm 实例（vm.$data 查模板绑定的属性；vm.$el 找到根容器最后把模板 append 进去）
    • showPool（遍历 pool 根据绑定属性的 true、false 初始化页面的显示状态）
    • container（append 进根容器）
• update 页面更新
  • vm 实例（获取属性值）
  • key（那个属性更新了）
  • showPool（找到相应key的DOM更新）

showPool：

eventPool：