我们一起来读书吧 关注:156贴子:3,309
  • 0回复贴,共1

深入浅出vue.js 11

只看楼主收藏回复

1. 代码生成器的作用:是将AST转换成渲染函数中的内容,这个内容可以称为代码字符串,而它可以被包装在函数中执行,这个函数就是渲染函数,渲染函数被执行之后,可以生成一份VNode,虚拟dom可以通过这个VNode来渲染视图。
2. 如何使用AST生成代码字符串:实际上是一个嵌套的函数调用,函数_c是createElement的别名,createElement是虚拟dom中所提供的方法,他的作用是创建虚拟节点,有三个参数分别为:标签名、一个包含模版相关属性的对象、子节点列表
3. 通过AST生成代码字符串:从顶向下依次处理每一个AST节点。节点分为三种类
在递归的过程中,每处理一个节点,就生成一个与节点类型相对应的代码字符串。如元素节点:_c(<tagname>,<data>,<children>);元素节点的子节点创建的代码字符串放在children的位置。递归结束后,将代码字符串包裹在with语句中
4. 代码生成器的原理:节点分为元素节点、文本节点、注释节点
4.1 元素节点:生成一个_c的函数调用字符串。plain属性在编译时发现,没属性则设为true,可以通过其判断是否需要获取节点的属性数据;genData和genChildren分别获取data和children,再将它们分别拼到指定位置;genData先给data赋值一个然后拼接存在的属性数据,再拼接;genChildren通过循环子节点列表,根据不同子节点类型生成相应字符串拼接一起
4.2 文本节点:将文本放在_v参数中。需判断其类型,动态文本:expression;静态文本:text。通过JSON.stringfy给文本包一层字符串
4.3 注释节点:与文本类似,将文本放在_e的参数即可


IP属地:北京1楼2025-11-03 22:22回复