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

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

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

1.解析阶段

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

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

<div>
<h1>{{ title }}</h1>
<ul>
<li v-for="item in items">{{ item }}</li>
</ul>
</div>

在解析阶段,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模板:

<template>
<div class="wrapper">
<h1>{{ message }}</h1>
<ul>
<li v-for="item in items">{{ item }}</li>
</ul>
</div>
</template>

在编译过程中,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

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

记录-Vue.js模板编译过程揭秘:从模板字符串到渲染函数的更多相关文章

  1. JS预编译过程

    GO和AO 变量的预编译 实例1 console.log(a); var a=1; console.log(a); 实际编译过程: 将a存入预编译对象中,赋值为undefined: 真正的赋值语句当程 ...

  2. smarty 模板编译和变量调节器 模板引入

    <?php require './smarty/Smarty.class.php'; $sm = new Smarty; //$sm->force_compile = true; $sm- ...

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

    前言 这篇文章是 Vue 编译器的最后一部分,前两部分分别是:Vue 源码解读(8)-- 编译器 之 解析.Vue 源码解读(9)-- 编译器 之 优化. 从 HTML 模版字符串开始,解析所有标签以 ...

  4. 解决vue.js在编写过程中出现空格不规范报错的情况

    找到build文件夹下面的webpack.base.conf.js文件. 然后打开该文件,找到图下这段代码,把他注释掉. 注释掉之后,再进行子页面等编写的时候,空格不规范的情况下也不会再报错啦.因为这 ...

  5. vscode实现vue.js项目的过程

    https://blog.csdn.net/weixin_37567150/article/details/81291433 https://blog.csdn.net/ywl570717586/ar ...

  6. vue原理:diff、模板编译、渲染过程等

    一.虚拟DOM: 因为DOM操作非常消耗性能,在操作DOM时,会出现DOM的回流(Reflow:元素大小或者位置发生改变)与重绘(元素样式的改变)使DOM重新渲染. 现在的框架Vue和React很少直 ...

  7. vue.js+webpack在一个简单实例中的使用过程demo

    这里主要记录vue.js+webpack在一个简单实例中的使用过程 说明:本次搭建基于Win 7平台 Node.js 安装官网提供了支持多种平台的的LTS版本下载,我们根据需要来进行下载安装.对于Wi ...

  8. Vue.js——60分钟browserify项目模板快速入门

    概述 在之前的一系列vue.js文章,我们都是用传统模式引用vue.js以及其他的js文件的,这在开发时会产生一些问题. 首先,这限定了我们的开发模式是基于页面的,而不是基于组件的,组件的所有代码都直 ...

  9. Vue.js——60分钟browserify项目模板快速入门

    概述 在之前的一系列vue.js文章,我们都是用传统模式引用vue.js以及其他的js文件的,这在开发时会产生一些问题. 首先,这限定了我们的开发模式是基于页面的,而不是基于组件的,组件的所有代码都直 ...

  10. Vue.js系列之三模板语法

    Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解 ...

随机推荐

  1. 思维分析逻辑 6 DAY

    数据仓库研究 大数据体系 日志采集和传输 数据建模 数据管理 数据应用 数据建模 日志传输(原始数据) ODS(原始数据) 用户基础属性表:imei,prov,city,machine 用户文章下发表 ...

  2. 普及模拟2 +【LGR-155-Div.3】洛谷基础赛 #3 &「NnOI」Round 2

    普及模拟2 \(T1\) 地址 \(0pts\) 简化题意:判断一个 \(IP\) 地址是否合法(数据保证字符串中存在且仅存在4个被字符分开的整数),若不合法则将其改正. 部分分: \(0pts\) ...

  3. JS leetcode 反转字符串中的单词 III 题解分析

    壹 ❀ 引 又到了快乐的leetcode算法时间,今天的题目特别特别简单,来自leetcode557. 反转字符串中的单词 III,题目描述如下: 给定一个字符串,你需要反转字符串中每个单词的字符顺序 ...

  4. NC20313 [SDOI2008]仪仗队

    题目链接 题目 题目描述 作为体育委员,C君负责这次运动会仪仗队的训练. 仪仗队是由学生组成的N * N的方阵,为了保证队伍在行进中整齐划一,C君会跟在仪仗队的左后方,根据其视线所及的学生人数来判断队 ...

  5. 【Unity3D】选中物体消融特效

    1 消融特效原理 ​ 消融特效 中基于 Shader Graph 实现了消融特效,本文将基于 Shader 实现消融特效. ​ 当前实现消融特效的方法主要有 Alpha 测试消融.clip(或 dis ...

  6. 盘点 Udemy 上最受欢迎的免费编程课程

    之前给大家推荐过一些油管上的免费学习资源,如果您还没有看过的话可以点击这里前往. 今天再给大家推荐一批Udemy上超高质量并且免费的编程课程,有需要的小伙伴可以学起来了. 1. JavaScript ...

  7. 我的小程序之旅十:微信公众号token验证失败

    为了更好的运营公众号,微信官方支持用户自定义实现公众号功能,这里第一步就是配置服务器回调域名,如下图: 如果是SpringBoot项目,我们会写一个如下的Controller类 import lomb ...

  8. 【Android 逆向】【攻防世界】boomshakalaka-3

    1. apk 安装到手机,是一个cocos2dx 写的打飞机的游戏 题目描述跟得分有关(题目描述: play the game, get the highest score) 2. jadx 打开ap ...

  9. File.delete()和Files.delete(Path path)的区别

    文件删除时可以选择File.delete()和Files.delete(Path path),这两个方法到底有什么区别呢? //删除暂存的pdfFile file =new File(pdfFilen ...

  10. Execl常用快捷操作

    常用的操作 Ctrl+A 全选 Ctrl+Z 撤销 Ctrl+X 剪切 Ctrl+C 复制 Ctrl+V 粘贴 Ctrl+B 加粗 Ctrl+S 保存 Ctrl+F 查找 Ctrl+H 替换 Alt+ ...