2024年Web前端最新学习vue源码（10）学习render渲染函数，Kotlin可能带来的一个深坑

其实前端开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。

这里再分享一个复习的路线：（以下体系的复习资料是我从各路大佬收集整理好的）

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

《前端开发四大模块核心知识笔记》

最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。

我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在IT学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。

ret = new Array(val);

// 调用传入的函数，把值传入，数组保存结果

for (i = 0; i < val; i++) {

ret[i] = _render(i + 1, i);

}

}

// 遍历对象

else if (typeof val ==“object”) {

keys = Object.keys(val);

ret = new Array(keys.length);

// 调用传入的函数，把值传入，数组保存结果

for (i = 0, l = keys.length; i < l; i++) {

key = keys[i];

ret[i] = _render(val[key], key, i);

}

}

// 返回 vnode 数组

return ret

}

看到 renderList 接收两个参数，val 和 render，而 _l 调用的时候，也就是传入的这两个参数，比如下面

_l(2,function(item, index) {

return _c(‘span’)

})

val 就是 2，_render 就是上面的函数

1 遍历的数据 val

遍历的数据分为三种类型，一种是对象，一种是数字，一种是数组

2 单个 vnode 渲染回调 _render

重要是这个回调

1、renderList 每次遍历都会执行回调，并把的每一项 item 和 index 都传入 回调中

2、回调执行完毕，会返回 vnode

3、使用数组保存 vnode，然后 遍历完毕就返回 数组

于是可以看上面的 render 函数 ，传入了 数字2，和 创建 span 的回调

_l(2,function(item, index) {

return _c(‘span’)

})

_l 执行完毕，内部遍历两次，最后返回 两个 span vnode 的数组，然后传给外层的 _c ，作为 vnode.children 保存

render 执行完毕，得到这样的 vnode

{

tag:“div”,

data:undefined,

children:[{

tag:“span”,

data:undefined

},{

tag:“span”,

data:undefined

}]

}

都灰常简单啊，没写之前，我还觉得内容应该挺多的，写完发现还可以

当然还有其他的 render

比如要模板含有 filter,我们来看看

Filters - 源码版

---

下面的讲解会以下面例子 作为讲解模板

这里有一个过滤器 all，用来过滤 parentName

{ {parentName|all }}

new Vue({

el:document.getElementsByTagName(“div”)[0],

data(){

return {

parentName:111

}

},

fil