petite-vue源码剖析-优化手段template详解
什么是
是2013年定稿用于提供一种更统一、功能更强大的模板本存放方式。具体表现为
-
通过
元素属性content获取已实例化的HTML元素(不是字符串而已)ab -
以及其子节点均不可视 -
下的img元素的src属性即使有值也不会发出资源请求 -
下的script和css规则均不会解析和执行
更多信息请查看：
v-if搭配
首次渲染过程如下：
-
将通过walk.ts中的
resolveTemplate方法将App.$template渲染到DOM树上OFFLINE ONLINE -
解析子节点
- 进入directives/if.ts识别附着
v-if、v-else的元素，并将它们从DOM树中移除 - 根据条件表达式
status === 'offline'对以离线节点(Dettached Node)为基础创建块对象(Block)
- 进入directives/if.ts识别附着
-
在块对象的构造函数中会识别
元素，并通过content.cloneNode方法复制的子节点作为模板，进行后续解析处理 -
最后directives/if.ts里会将块对象插入父节点中且位于锚点元素前面
ONLINE
小结
- 这里利用的是
元素本身的特性实现在线解析用户不可见(你看不到我，你看不到我:D)，和避免如
- 由于
是在block.ts中处理获取模板，因此v-for搭配的原理和v-if是一致的。
错误使用
虽然能帮助我们优化用户体验和性能，但有些时候也会让我们掉到坑里面，下面一起绕过这些坑吧！
根块对象对应的是，而由于没有附加v-if或v-for，因此不会为其创建新的块对象进行处理，最后得到的UI就是这样的：
Hello
用于无法看到文字Hello。
总结
通过本篇内容的介绍，我们记得必须搭配v-if或v-for使用哦！
后面我们将探索@vue/reactivity在petite-vue的使用，敬请期待。
尊重原创，转载请注明来自： 肥仔John