最新要闻

广告

手机

iphone11大小尺寸是多少?苹果iPhone11和iPhone13的区别是什么?

iphone11大小尺寸是多少?苹果iPhone11和iPhone13的区别是什么?

警方通报辅警执法直播中被撞飞:犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞:犯罪嫌疑人已投案

家电

记录-Vue.js模板编译过程揭秘:从模板字符串到渲染函数

来源:博客园

这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助

Vue.js是一个基于组件化和响应式数据流的前端框架。当我们在Vue中编写模板代码时,它会被Vue编译器处理并转换为可被浏览器解析的JavaScript代码。Vue中的模板实际上是HTML标记和Vue指令的组合,它们会被Vue编译器处理并转化为一个JavaScript渲染函数。

Vue中的模板编译分为两个阶段:


(资料图片仅供参考)

1.解析阶段

在这个阶段,Vue将模板字符串解析为AST(抽象语法树)的结构。解析器会扫描模板字符串,识别出其中的HTML标签、属性、表达式等内容,然后构建成一个抽象语法树。这个过程中也会对表达式进行解析和优化,以生成更高效的渲染函数。

例如,下面是一个简单的Vue模板:

{{ title }}

  • {{ item }}

在解析阶段,Vue将这个模板解析为AST的结构:

{  type: "element",  tag: "div",  attrsList: [],  children: [    {      type: "element",      tag: "h1",      attrsList: [],      children: [{ type: "expression", expression: "title" }]    },    {      type: "element",      tag: "ul",      attrsList: [],      children: [        {          type: "element",          tag: "li",          attrsList: [{ name: "v-for", value: "item in items" }],          children: [{ type: "expression", expression: "item" }]        }      ]    }  ]}

2.代码生成阶段

在这个阶段,Vue将AST转换为渲染函数。渲染函数是一个JavaScript函数,它接收一个上下文对象作为参数,并返回一个VNode(虚拟节点)对象,表示要渲染的DOM树结构。在渲染函数中,Vue会将模板中的HTML标签转换为createElement函数调用,将指令和表达式转换为相应的JavaScript代码。

例如,对于上面的模板,生成的渲染函数大致如下:

function render(_ctx, _cache) {  return _openBlock(), _createBlock("div", null, [    _createVNode("h1", null, _toDisplayString(_ctx.title), 1 /* TEXT */),    _createVNode("ul", null, [      (_cache[item] || (_cache[item] = _withDirectives((_openBlock(), _createBlock("li", {        key: item      }, _toDisplayString(item), 1 /* TEXT */)), [[_directive_resolveModel, _ctx.items, item]])))    ])  ])}

在上面的渲染函数中,我们可以看到通过调用Vue提供的_createVNode函数和_createBlock函数来创建虚拟节点,并使用_toDisplayString函数来将表达式的值转换为字符串。同时,在循环中使用了_cache对象来缓存已渲染的VNode,以提高渲染性能。

总的来说,Vue的模板编译过程将模板字符串转换为一个JavaScript函数,该函数接收一个上下文对象作为参数,并返回一个VNode对象,表示要渲染的DOM树结构。这个过程中,Vue将模板中的HTML标记和指令转换为JavaScript函数调用,同时对表达式进行解析和优化,以生成更高效的渲染函数。

举一个更具体的例子,考虑下面这个Vue模板:

在编译过程中,Vue将模板字符串解析为AST的结构,如下所示:

{  type: "element",  tag: "div",  attrsList: [{ name: "class", value: "wrapper" }],  children: [    {      type: "element",      tag: "h1",      attrsList: [],      children: [{ type: "expression", expression: "message" }]    },    {      type: "element",      tag: "ul",      attrsList: [],      children: [        {          type: "element",          tag: "li",          attrsList: [{ name: "v-for", value: "item in items" }],          children: [{ type: "expression", expression: "item" }]        }      ]    }  ]}

然后,Vue将AST转换为一个渲染函数,如下所示:

function render(_ctx, _cache) {  return _openBlock(), _createBlock("div", { class: "wrapper" }, [    _createVNode("h1", null, _toDisplayString(_ctx.message), 1 /* TEXT */),    _createVNode("ul", null, [      (_cache[item] || (_cache[item] = _withDirectives((_openBlock(), _createBlock("li", {        key: item      }, _toDisplayString(item), 1 /* TEXT */)), [[_directive_resolveModel, _ctx.items, item]])))    ])  ])}
在渲染函数中,我们可以看到Vue将HTML标记转换为_createVNode_createBlock函数的调用,将指令和表达式转换为相应的JavaScript代码,并使用_toDisplayString函数将表达式的值转换为字符串。最终生成的渲染函数会被Vue用来渲染组件的实例。

本文转载于:

https://juejin.cn/post/7221354195914326073

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

关键词: