网站模板制作教程视频,云空间可以做网站,滕州网站建设网站行吗,建材在线之前我们说过虚拟dom#xff0c;也就是虚拟dom拿到vnode后所做的事情#xff0c;而模版编译是如何让虚拟dom拿到vnode。
模版编译的目标就是生成渲染函数#xff0c;而渲染函数的作用是每次执行它#xff0c;它就会使用当前最新的状态生成一份新的vnode#xff0c;然后用…之前我们说过虚拟dom也就是虚拟dom拿到vnode后所做的事情而模版编译是如何让虚拟dom拿到vnode。
模版编译的目标就是生成渲染函数而渲染函数的作用是每次执行它它就会使用当前最新的状态生成一份新的vnode然后用这个vnode进行渲染。
将模版编译成渲染函数
将模版编译成渲染函数可以分为2个步骤先将模版解析生成AST也就是抽象语法树然后再使用AST生成渲染函数。
由于静态节点不用重新渲染所以生成AST的时候会给静态节点做一个标记这样在虚拟DOM中更新节点时如果发现有这个标记就不会重新渲染它。
解析器
解析器的作用就是将模版解析生成AST。
在解析器内部有很多小解析器其中包括过滤器解析器文本解析器和html解析器。
在使用模版时我们可以使用过滤器而过滤器解析器的作用就是用来解析过滤器的。
文本解析器就是用来解析带变量的文本。
最重要的就是html解析器它的作用就是解析模版每当解析到html标签到开始位置结束位置文本或者注释时都会触发钩子函数然后将相关信息通过参数传递出来。
优化器
优化器的目标是遍历AST检测出所有静态子树并给其打上标记。
代码生成器
这个是模版编译的最后一步它的作用是将AST转换成渲染函数中的内容这个内容可以称为代码字符串。
比如
div idappp titleberwin clickc1/p
/div生成后的代码字符串是下面这个样子。
with(this){return _c(div,{attrs:{id:app}},[_c(p,{attrs:{title:berwin},on:{click:c}},[_v(1)])])}里面通过generate函数实现的源码是在下面这个位置。 生成后的代码字符串导出到外界使用会将代码字符串放到函数里这个函数叫做渲染函数。
