[Vue源码解析] 优化器
优化器作用:在AST中找出静态子树并打上标记
好处:1、每次重新渲染时,不需要为静态子树创建新节点。
2、在虚拟DOM中打补丁(patching)的过程可以跳过。
步骤:1、在AST中找出所有静态节点并打上标记(static:true),若当前节点为静态节点,则其所有子节点也需要为静态节点。
2、在AST中找出所有静态根节点并打上标记(staticRoot:true),AST中从上往下寻找,找到静态节点则标记为静态根节点,由于1的特性,其子节点也为静态节点。
判断是否是静态节点:当模版被解析为AST时,会根据不同的元素类型设置不同的type值
1、node.type === 2为带变量的动态文本节点,不是静态节点
2、node.type === 3为静态文本节点,是静态节点
3、node.type === 1是node为元素节点,此时需要进行分析以下两种情况:a、是否添加v-pre指令,若是则是静态节点(以下统称是或不是)
b、没有动态绑定语法(v-、@、:),没有使用v-if、v-for或v-else指令,不是内置标签(如slot、component),不能是组件,即标签名必须是保留标签,当前节点的父节点不能是带v-for的template标签及节点中不存在动态节点才会有的属性,满足以上条件则为静态标签。
静态根节点注意事项:在标记过程中虽然只有一个文本子节点的元素静态节点或者没有子节点的元素静态节点也是我们要找的静态节点,但由于这两种类型的优化成本超过收益,所以不将其标记为静态根节点。