Vue模板编译

已于 2022-07-16 21:05:50 修改
阅读量391 收藏
点赞数
分类专栏： vue 文章标签： vue
于 2022-07-16 20:27:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiexingshishu/article/details/125824594
版权

1、原理

模板编译分三部分：

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

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

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

模板编译的整体流程为：

2、模板选择

有el, template, render情况下

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

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

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

kgduu
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue 模板编译原理解析
共同学习，心怀感激。
01-03 1281
首先我们看一下什么是编译？所谓编译（Compile），指的是将语言 A 翻译成语言 B，语言 A 就被称之为源码（source code），语言 B 就被称之为目标代码（target code），这个事情谁来做？编译器来做。编译器你也不用想得那么神秘，就是一段程序而已。上面的步骤，如果从大的方面去分，那么可以分为和。编译后的结果是什么？编译后的结果就是渲染函数注意这里，整个编译过程并非一蹴而就，而是经历了一个又一个的步骤，一点一点转换而来的。
Vue模板编译原理
weixin_42482733的博客
02-08 5353
Vue中的模板编译是什么 刚接触Vue的同学可能会产生这样的疑问：为什么在“HTML”中可以通过{{ name }}、v-bind:value="value"等方式获取JavaScript中的变量？为什么单文件组件导出的只有JavaScript的代码，但是其它地方在使用该组件时却能渲染出组件的“HTML”样式？这其实都是Vue模板编译的功劳。 对于Vue来说，我们所认为的“HTML”其实都是字符串。Vue会根据其规定的模板语法规则，将其解析成AST语法树（其实就是用一个树状的大对象来描述我们所谓的“HT
【vue】vue模版编译的过程
weixin_44761091的博客
04-15 1265
文章目录一、什么是模版编译二、整体渲染流程三、模板编译内部流程3.1抽象语法树AST3.2 具体流程 一、什么是模版编译 二、整体渲染流程 所谓渲染流程，就是把用户写的类似于原生HTML的模板经过一系列处理最终反应到视图中称之为整个渲染流程。流程图如下： 从图中我们也可以看到，模板编译过程就是把用户写的模板经过一系列处理最终生成render函数的过程。 三、模板编译内部流程 那么模板编译内部是怎么把用户写的模板经过处理最终生成render函数的呢？这内部的过程是怎样的呢？ 3.1抽象语法树AST 我们知
Vue 模板是如何编译的
前端小白的博客
04-13 1240
先举个例子吧，三种情况如下。
深入探究 Vue 模板的编译原理
最新发布
你若盛开，清风自来
07-11 1368
Vue.js 是一款构建用户界面的渐进式框架，它的核心库只关注视图层。Vue 模板编译原理是 Vue.js 能够将模板编译成可执行的 JavaScript 代码的关键。本文将详细介绍 Vue 模板编译的原理，帮助读者更好地理解 Vue.js 的实现机制。Vue 模板编译原理是 Vue.js 实现数据绑定和交互功能的关键。本文详细介绍了 Vue 模板编译的过程，包括解析模板、优化 AST、生成 JavaScript 代码、数据绑定和事件处理。希望读者能从中受益，更好地理解 Vue.js 的实现机制。
vue模板编译
carly_ssj的博客
08-24 150
/* 正则 */ let regular = /\{\{(.+?)}\}/g; function compile(template, data) { //查找模板下的所有子元素 let childNodes = template.childNodes; for (let i = 0; i < childNodes.length; i++) { //查找子元素节点类型 1=== 元素 3===文本 ..
Vue模板
02-24
临时1项目设置npm install编译和热重装以进行开发npm run serve编译并最小化生产npm run build整理和修复文件npm run lint自定义配置请参阅。
vue搭建的非常好用的网页模板
05-27
Vue模板通常包括以下关键组成部分： 1. **Vue CLI**：Vue的命令行工具，提供快速创建项目、安装依赖、构建、热重载等功能，是搭建Vue项目的基础。 2. **Vue Router**：Vue官方推荐的路由管理器，用于实现单页面...
Vue-模板编译渲染函数原理分析
07-12
Vue-模板编译渲染函数原理分析
【Vue】Vue 模板的编译过程
小秀的博客
09-02 292
这个阶段主要将优化后的AST⽣成可执⾏的JavaScript代码，这个过程是通过对AST进⾏遍历，将AST中的每个节点都转化为相应的JavaScript代码，并将其添加到最终的渲染函数中。在渲染函数中，会对这个数据对象进⾏解析和处理，得到虚拟的DOM树，接着就涉及到diff算法，将这份虚拟的DOM树与上⼀次渲染的虚拟的DOM树进⾏⽐较，找出需要更新部分进⾏更新。在模板的编译过程中，还会涉及到动态指令、插槽、组件等特殊情况的处理，不同的编译器实现可能存在⼀些差异，但⼤体的编译流程是相似的。
Vue模板是如何编译的
asfasfaf122的博客
01-29 439
让你理解vue模板是怎么编译的
vue模版编译流程
sfx_ss的博客
12-07 871
vue中的模板编译的步骤：将template模板转化成ast语法树(拼接字符串)，然后通过new Function + with语法，将ast语法树包装成Render函数，然后生成虚拟节点，然后将虚拟节点挂载到dom树上，生成真实DOM. (1) 将template模板转换成ast语法树 -parserHTML(正则实现) (2) 对静态语法做静态标记 -markUp (3) 重新生成代码 生成render函数返回的是虚拟节点 注意：在开发时尽量不要使用template,因为将template转化成rend
vue模板编译流程
wade3po的博客
03-31 2273
原本是想理一理虚拟dom，结果根本不知道虚拟dom是怎么来的，于是先理清楚模板编译的流程。 因为自身能力问题，没法手写实现，只是单纯的理清除模板编译的流程，然后贴一些关键代码， 可以自己去源码找到关键的地方。我是直接在vue.js里面直接看，并不是下载vue的npm去找各个模块， 所以有什么理解错误的欢迎指教。 一、获取HTML（template） 先了解一下，vue有两个运行环境的编译，一个是npm运行时的runtime版本，一个是浏览器引入vuejs的runtime-compile版本。 runtime
Vue模版编译
wuxian_wj的博客
01-08 1427
什么是vue模板编译 在使用vue开发过程中，我们把写在<template></template>标签中的内容称之为模板。除去一些html原生的内容还有solt、v-if、v-on、{{}}这些原生html不存在的语法，但是仍然可别浏览器识别，其中最重要的一个原因就是vue的模板编译了。 Vue会把用户在<template> </template>标签中写的内容进行编译，找出原生的html和非原生的html内容，经过处理生成渲染函数，也就是render函数
Vue 中模板编译的过程
weixin_46261261的博客
11-13 1051
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模板是怎样编译的
yyds2026的博客
10-19 238
这一章我们开始讲模板解析编译:总结来说就是通过compile函数把tamplate解析成形式的字符串我们可以看出函数内部运行的是parse、optimize、generate三个函数，而生成的是ast，render，三个对象。
Vue 模板编译的过程
qt的博客
01-09 646
Vue 模板编译的过程 Vue中的模板编译就是将模板编译成render渲染函数 模板编写，便于阅读，便于交互，编写render函数比较复杂 编译过程 入口： src/platforms/web/entry-runtime-with-compile.js 如果有render函数，进行render调用，没有render，进行模板转换render函数 调用createCompile函数，接收baseCompile函数 将模板转换为ast语法树，描述代码结构 使用optimize(ast,options)优
vue编译过程
weixin_42722914的博客
03-02 4333
vue首先传router,store,render:h=>h(App),进行vue实例化，会将参数与构造函数的options进行合并赋值给vue.option,然后初使化生命周期，初使化initState,beforeCreate,create(都没有发现这些方法)，然后进行挂载option,然后初使化生命周期，初使化initState,beforeCreate,create(都没有发现这些方法)， 然后进行挂载option,然后初使化生命周期，初使化initState,beforeCreate,cr
模板引擎的概念你理解不？谈谈 Vue 模板编译的过程理解？
03-30
Vue 模板编译的过程是将 Vue 模板转换为渲染函数的过程。Vue 模板是基于 HTML 语法的，但是它也包含了 Vue 特有的语法，如指令和插值。Vue 模板编译器将模板解析成 AST（抽象语法树），然后将 AST 转换为渲染函数。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

kgduu

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

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

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

打赏作者

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

抵扣说明：

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

余额充值