学习vue源码（9）手写代码生成器，前端面试题整理2024简书

with(this){return _c('p',{attrs:{"title":"Berwin"},on:{"click":c}},[_v("1")])}

格式化后：

with(this){

return _c(

‘p’,

{

attrs:{“title”:“Berwin”},

on:{“click”:c}

},

[_v(“1”)]

)

}

_v 的意思是创建一个文本节点。

_s 是返回参数中的字符串。

可能有同学觉得这个格式化后的代码很陌生，其实把with去掉后，就很熟悉了（其实with是用来改变作用域的，去掉也不会影响我们的理解）

return _c(

‘p’,

{

attrs:{“title”:“Berwin”},

on:{“click”:c}

},

[_v(“1”)]

)

有没有发现 这样很熟悉？没错我们去看vue官网的 render渲染函数

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sJtun0qJ-1591176301693)(https://imgkr.cn-bj.ufileos.com/681bf1eb-bc26-429d-8ede-52ddfd99f2e8.png)]

有没发现，其实生成的代码字符串 就是 vue官网中介绍的render函数里的 createElement函数。

而参数也是对应的

• 第一个参数：标签名

• 第二个参数：节点数据

• 第三个参数：子节点数组

代码生成器的总体逻辑其实就是使用 element ASTs 去递归，然后拼出这样的 _c('div',[_c('p',[_v(_s(name))])]) 字符串。

那如何拼这个字符串呢？？

请看下面的代码：

function genElement (el: ASTElement, state: CodegenState) {

const data = el.plain ? undefined : genData(el, state)

const children = genChildren(el, state, true)

let code = `_c('${el.tag}^{\prime }${

data ? ,${data} : ‘’ // data

}${

children ? ,${children} : ‘’ // children

})`

return code

}

因为 _c 的参数需要 tagName、data 和 children。

所以上面这段代码的主要逻辑就是用 genData 和 genChildren 获取 data 和 children，然后拼到 _c 中去，拼完后把拼好的 "_c(tagName, data, children)" 返回。

el.plain 为true该节点没有属性。因此就不需要 执行genData。

所以我们现在比较关心的两个问题：

data 如何生成的（genData 的实现逻辑）？

children 如何生成的（genChildren 的实现逻辑）？

我们先看 genData 是怎样的实现逻辑：

function genData (el: ASTElement, state: CodegenState): string {

let data = ‘{’

// key

if (el.key) {

data += key:${el.key},

}

// ref

if (el.ref) {

data += ref:${el.ref},

}

if (el.refInFor) {

data += refInFor:true,

}

// pre

if (el.pre) {

data += pre:true,

}

// … 类似的还有很多种情况

data = data.replace(/,$/, ‘’) + ‘}’

return data

}

可以看到，就是根据 AST 上当前节点上都有什么属性，然后针对不同的属性做一些不同的处理，最后拼出一个字符串~

然后我们在看看 genChildren 是怎样的实现的：

function genChildren (

el: ASTElement,

state: CodegenState

): string | void {

const children = el.children

if (children.length) {

return [${children.map(c => genNode(c, state)).join(',')}]

}

}

小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频

如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）

总结

前端资料汇总

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

• 框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。

• 算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯

• 在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。

• 要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！
  喜欢这篇文章文章的小伙伴们点赞+转发支持，你们的支持是我最大的动力！
  )

• 框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。

• 算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯

• 在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。

• 要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！
  喜欢这篇文章文章的小伙伴们点赞+转发支持，你们的支持是我最大的动力！