Vue 源码解读(10)—— 编译器 之 生成渲染函数

释放双眼,带上耳机,听听看~!

面试官:详细说一下渲染函数的生成过程

大家一说到渲染函数,基本上说的就是 render 函数,其实编译器生成的渲染有两类:

  • 第一类就是一个 render 函数,负责生成动态节点的 vnode

  • 第二类是放在一个叫 staticRenderFns 数组中的静态渲染函数,这些函数负责生成静态节点的 vnode

渲染函数生成的过程,其实就是在遍历 AST 节点,通过递归的方式,处理每个节点,最后生成形如:_c(tag, attr, children, normalizationType) 的结果。tag 是标签名,attr 是属性对象,children 是子节点组成的数组,其中每个元素的格式都是 _c(tag, attr, children, normalizationTYpe) 的形式,normalization 表示节点的规范化类型,是一个数字 0、1、2,不重要。

在处理 AST 节点过程中需要大家重点关注也是面试中常见的问题有:

  • 静态节点是怎么处理的

    静态节点的处理分为两步:

    • 将生成静态节点 vnode 函数放到 staticRenderFns 数组中

    • 返回一个 _m(idx) 的可执行函数,意思是执行 staticRenderFns 数组中下标为 idx 的函数,生成静态节点的 vnode

  • v-once、v-if、v-for、组件 等都是怎么处理的

    • 单纯的 v-once 节点处理方式和静态节点一致

    • v-if 节点的处理结果是一个三元表达式

    • v-for 节点的处理结果是可执行的 _l 函数,该函数负责生成 v-for 节点的 vnode

    • 组件的处理结果和普通元素一样,得到的是形如 _c(compName) 的可执行代码,生成组件的 vnode

【转自慕课】https://www.imooc.com

Vue.js

[Vue.js学习之路]从vue-cli说起

2022-3-8 11:33:18

Vue.js

Vue 源码解读(9)—— 编译器 之 优化

2022-3-8 13:36:22

搜索