Vue模板编译

已于 2022-07-16 21:05:50 修改
阅读量403 收藏
点赞数
分类专栏： vue 文章标签： vue
于 2022-07-16 20:27:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiexingshishu/article/details/125824594
版权
本文详细介绍了模板编译的三个核心步骤：解析AST、优化和代码生成。通过这三个模块，实现了将模板转化为渲染函数的过程。在模板选择上，当存在el、template和render时，优先级为render>template (字符串)>el的outerHTML。理解这一流程对于前端开发者优化性能至关重要。
摘要由CSDN通过智能技术生成

1、原理

模板编译分三部分：

  • 将模板解析为AST
  • 遍历AST标记静态节点
  • 使用AST生成渲染函数

三部分内容在模板编译中分别抽象出三个模块来实现各自的功能，分别是

  • 解析器
  • 优化器
  • 代码生成器

模板编译的整体流程为：

2、模板选择

有el, template, render情况下

 当有el属性，直接获取el作为根节点

  • template为字符串时，模板直接使用
  • template不是字符串，有nodeType属性，使用template的innerHTML作为模板
  • 没有template属性时，模板使用el的outerHTML

 当有template和render时，优先使用render。

kgduu
关注
专栏目录
Vue 模板编译的过程
qt的博客
01-09 673
Vue 模板编译的过程 Vue中的模板编译就是将模板编译成render渲染函数 模板编写，便于阅读，便于交互，编写render函数比较复杂 编译过程 入口： src/platforms/web/entry-runtime-with-compile.js 如果有render函数，进行render调用，没有render，进行模板转换render函数 调用createCompile函数，接收baseCompile函数 将模板转换为ast语法树，描述代码结构 使用optimize(ast,options)优
Vue的模板编译：深入理解渲染函数与预编译模板
最新发布
哎 你看的博客
07-22 1166
Vue.js 是一个用于构建用户界面的渐进式框架，它的核心特性之一是其响应式和声明式的模板语法。Vue 的模板不仅仅是简单的字符串插值，它们会被编译成渲染函数，这个过程涉及到将模板字符串转换成 JavaScript 代码。本文将深入探讨 Vue 的模板编译过程，并讨论如何使用预编译模板来提高应用性能。
Vue 模版编译
m0_60703077的博客
04-23 1360
模版编译 如何识别用户自己定义的模版，也就是 标签中类似于原生 HTML，还会有一些变量插值，或一些 Vue 指令，如 v-on、v-if 等。 这些不属于元素的语法，归功于 Vue 的模版编译。把原生 HTML 提取出来，把非原生 HTML 找出来，经过一系列的逻辑处理生成渲染函数，也就是 render 函数。 抽象语法树 AST 如何将 template 中的一堆字符串解析为元素标签、属性、变量。需要借助抽象语法树. 模版解析阶段：使用正则的方式解析成抽象语法树 AST。 优化阶段：遍历 AS
Vue模板是怎样编译的
yyds2026的博客
10-19 249
这一章我们开始讲模板解析编译:总结来说就是通过compile函数把tamplate解析成形式的字符串我们可以看出函数内部运行的是parse、optimize、generate三个函数，而生成的是ast，render，三个对象。
Vue 模板是如何编译的
前端小白的博客
04-13 1320
先举个例子吧，三种情况如下。
vue模板编译
Luckyzhoufangbing的博客
08-30 592
（一）vue为什么要模板编译 vue的语法，比如指令、插值、v-if 判断、v-for 循环等，单独放在浏览器里面运行，浏览器是不支持的，浏览器也不认识 vue 的这些语法，只有 js 才能被浏览器识别，所以 vue 模板的语法 必须转化为js语言才行，这个转化过程被叫做模板编译 （二）模板编译 ...
Vue模板编译原理
weixin_42482733的博客
02-08 5407
Vue中的模板编译是什么 刚接触Vue的同学可能会产生这样的疑问：为什么在“HTML”中可以通过{{ name }}、v-bind:value="value"等方式获取JavaScript中的变量？为什么单文件组件导出的只有JavaScript的代码，但是其它地方在使用该组件时却能渲染出组件的“HTML”样式？这其实都是Vue模板编译的功劳。 对于Vue来说，我们所认为的“HTML”其实都是字符串。Vue会根据其规定的模板语法规则，将其解析成AST语法树（其实就是用一个树状的大对象来描述我们所谓的“HT
Vue 模板编译原理解析
共同学习，心怀感激。
01-03 1388
首先我们看一下什么是编译？所谓编译（Compile），指的是将语言 A 翻译成语言 B，语言 A 就被称之为源码（source code），语言 B 就被称之为目标代码（target code），这个事情谁来做？编译器来做。编译器你也不用想得那么神秘，就是一段程序而已。上面的步骤，如果从大的方面去分，那么可以分为和。编译后的结果是什么？编译后的结果就是渲染函数注意这里，整个编译过程并非一蹴而就，而是经历了一个又一个的步骤，一点一点转换而来的。
VUE模板编译的实现原理
hulinhulin的专栏
10-05 474
VUE模板编译的实现原理
Vue 中模板编译的过程
weixin_46261261的博客
11-13 1064
1、缓存公共的 mount 函数，并重写浏览器平台的 mount 2、判断是否传入了 render 函数，没有则判断是否传入了 remplate,没有的话则获取 el 节点的 outerHTML 作为 template 3、调用 baseCompile 函数 4、解析器（parse）将模板字符串的模板编译转换成 AST 抽象语法树。parse 的核心就是 parseHTML 将HTML 转换为 AST 并返回，在处理 v-for,v-if,v-once 时先移除指令，然后将指令的值记录在树上 5、优化器（.
vue的模板编译
longtengg1的博客
07-01 161
模板不是html，有指令、插值、js表达式，能实现判断、循环。 html是标签语言，只有js才能实现判断、循环（图灵完备） 因此，模板一定是转换为某种js代码，即模板编译。 1、准备 使用npm init -y 创建一个空项目 npm install vue-template-compiler下载vue模板编译插件 创建一个index.js文件，在里面引入上述插件 写一个模板字符串，如 const template=`<p class='box con' id='dd' style='color:
Vue模版编译
wuxian_wj的博客
01-08 1458
什么是vue模板编译 在使用vue开发过程中，我们把写在<template></template>标签中的内容称之为模板。除去一些html原生的内容还有solt、v-if、v-on、{{}}这些原生html不存在的语法，但是仍然可别浏览器识别，其中最重要的一个原因就是vue的模板编译了。 Vue会把用户在<template> </template>标签中写的内容进行编译，找出原生的html和非原生的html内容，经过处理生成渲染函数，也就是render函数
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

kgduu

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值