Vue：模板编译 与 Virtual DOM

最新推荐文章于 2024-08-15 16:42:09 发布
最新推荐文章于 2024-08-15 16:42:09 发布
阅读量906 收藏 2
点赞数 2
分类专栏： Vue.js 学习笔记 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46124214/article/details/105621813
版权
本文介绍了Vue模板编译的过程，包括解析为AST、静态节点标记和生成render函数。详细阐述了Vue虚拟DOM的概念、实现原理及其优势。同时讨论了模板转换成视图的流程，涉及渲染函数、VNode和patch算法。最后，文章提出了关于模板编译时机、静态模板和动态模板的疑问。
摘要由CSDN通过智能技术生成

（一）Vue模板编译

在Vue中我们有三种方式来创建HTML

  • 模板
  • 手动写渲染函数
  • JSX

渲染函数是最原始的方法，而模板最终会通过编译转换陈渲染函数。渲染函数执行后，会得到一份vnode用来渲染真实DOM。所以，模板编译其实是配合虚拟DOM进行渲染。

1. 什么是模板编译？

所谓模板编译就是把模板编译成vnode的渲染函数。

2. 模板编译过程：

模板编译可以分为三个阶段：
在这里插入图片描述

  • 将模板解析为AST（抽象语法树）—— 解析器

  • 遍历AST，对 AST 进行静态节点标记，主要用来做虚拟DOM的渲染优化 —— 优化器

  • 使用AST生成render函数代码字符串—— 代码生成器

关于模板编译的源码可以在vue-template-compiler包中查看。

（二）Vue虚拟DOM

1. Virtual DOM

概念：

Virtual DOM是一个能够直接描述一段HTML DOM结构的JavaScript对象，浏览器可以根据它的结构按照一定规则创建出确定唯一的HTML

最低0.47元/天 解锁文章
林夏天
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue进阶之源码阅读（二）虚拟DOM与模板编译
weixin_44479322的博客
01-27 394
Vue进阶之源码阅读（二）虚拟DOM 为什么要使用虚拟 DOM 使用虚拟 DOM，可以避免用户直接操作 DOM，开发过程关注在业务代码的实现，不需要关注如 何操作 DOM，从而提高开发效率 作为一个中间层可以跨平台，除了 Web 平台外，还支持 SSR、Weex。 关于性能方面，在首次渲染的时候肯定不如直接操作 DOM，因为要维护一层额外的虚拟 DOM， 如果后续有频繁操作 DOM 的操作，这个时候可能会有性能的提升，虚拟 DOM 在更新真实 DOM 之前会通过 Diff 算法对比新旧两个虚拟 DOM 树
从模板编译到虚拟dom
doubi6的博客
07-30 308
将html字符串转换为AST(parseHtmlToAst.js) const unicodeRegExp = /a-zA-Z\u00B7\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u037D\u037F-\u1FFF\u200C-\u200D\u203F-\u2040\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD/; const attribute = /^\s*([^\s"'<>\/=
vue核心之虚拟DOM(vdom)解析
Q378532364的博客
05-11 1053
吾日三省吾身在等待后端老哥接口的时候？看到一则说面试题为什么百度搜索这么快的一个问题？虽然这是面试的后端，但是作为前端，如果问为什么类似vue，react这些会有生命周期？有什么用？那如果这样问我，我感觉空气会突然几秒…仔细一想貌似也不是很难理解,在使用这类框架编码时我们会发现除了html有个id为app的div是给vue挂载，其他什么都没有，在webpack打包完成后会生成一个app.js 在了解vue源码或在这个打包js中，在里面搜索 function created function mounted
Vue 组件化 响应式 vdom 和 diff 模板编译 渲染过程 原理
weixin_43550660的博客
05-04 332
Vue原理 Vue响应式 组件data的数据一旦变化，立刻触发视图的更新 实现数据驱动视图的第一步 核心 API-Object.defineProperty(Vue3.0启用Proxy,但是Proxy兼容性不好，且无法polyfill) Object.defineProperty(obj, prop, descriptor) obj:要定义属性的对象。 prop:要定义...
操作DOM对象
iy6c3101的博客
09-14 177
操作DOM对象 DOM：文档对象模型 核心 浏览器网页就是一个DOM树形结构 更新：更新DOM节点 遍历：得到DOM节点 删除：删除一个DOM节点 添加：添加一个新的节点 要操作一个DOM节点，就必须先获取这个DOM节点 获得DOM节点 <div id="father"> <h1>标题一</h1> <p1 id="p1">p1</p1> <p1 class="p2">p2&l
金山实习纪vue篇——render函数的使用
Mrxcguo的博客
12-15 1324
render函数使用 秋招快手、百度、字节面试的不断失利，反而帮助自己积累了更多的大场面试经验，终于在11月初拿到了金山的前端实习offer。作为一名非双一流的普通本科生能进入到这样的大厂实习，属实感到幸运。特此记录实习过程中的经验分享与大家。 1. render函数的作用 render 函数 跟 template 一样都是创建 html 模板的，但是有些场景中用 template 实现起来代码冗长繁琐而且有大量重复，这时候就可以用 render 函数。 官网例子：子组件想要根据父组件传递的 level 值
vue中的render函数（通俗、易懂）
m0_59722204的博客
09-17 1万+
关于vuecli创建项目常见的render函数解析。
Vue-虚拟dom
s8806479的博客
04-05 730
对于虚拟dom我们分以下四个问题来阐述： 一、什么是虚拟dom 二、 三、 四、 一、什么是虚拟dom？ 虚拟dom本质上就是一个普通的JS对象，用于描述视图的界面结构
Vue 中的 Render 全面详解 (渲染函数 & JSX)
热门推荐
小太阳的博客
11-03 2万+
Vue 推荐在绝大多数情况下使用模板来创建你的 HTML。然而在一些场景中，你真的需要 JavaScript的完全编程的能力。这时你可以用渲染函数，它比模板更接近编译器。简单的说，在 Vue 中我们使用模板 HTML 语法组建页面的，使用 Render 函数我们可以用 Js 语言来构建 DOM。因为 Vue 是虚拟 DOM，所以在拿到 Template 模板时也要转译成 VNode 的函数，而用 Render 函数构建 DOM，Vue 就免去了转译的过程。
vue 的 render 函数
tianruine的博客
05-19 1181
render函数的作用： render 函数 跟 template 一样都是创建 html 模板的，但是有些场景中用 template 实现起来代码冗长繁琐而且有大量重复，这时候就可以用 render 函数。 render 函数讲解 render 函数即渲染函数，它是个函数，它的参数也是个函数——即 createElement，我们重点来说 createElement 参数。 1.render 函数的返回值（VNode） VNode（即：虚拟节点），也就是我们要渲染的节点。 2.render 函
vue中render函数的使用详解
12-11
render函数 vue通过 template 来创建你的 HTML。但是，在特殊情况下，这种写死的模式无法满足需求，必须需要js的编程能力。此时，需要用render来创建HTML。 render方法的实质就是生成template模板； 通过调用一个方法来生成，而这个方法是通过render方法的参数传递给他的； 通过这三个参数，可以生成一个完整的模板 官网实例 //未使用render函数 Vue.component('anchored-heading', { template: '#anchored-heading-template', props: { level:
Vue中render函数的使用方法
08-28
本篇文章主要介绍了Vue中render函数的使用方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue里的Render函数
zsyyugong的博客
05-08 720
Render是使用js的完全编程能力来渲染页面，即用js来构建DOM.说明：render是一个方法，自带一个(还有context..)，这个参数也是一个方法，是用来创建虚拟dom节点的，也就是html模板的，然后渲染(render)到指定的节点上。render函数的目的是创建虚拟dom节点。因为createElement是个形参，比如h等价于也等价于在Vue实例中等价于。
Vue中的render函数
最新发布
承蒙关照！
08-15 1139
render函数是 Vue 组件的一个方法，用于返回一个虚拟节点（VNode）结构，该结构将被 Vue 转换为真实的 DOM 元素。
Vue之render函数
知识应该共享，创造才应收费
04-30 1892
render函数从名字上看就可以看出，它是一个用于渲染的函数，在Vue中我们要将我们写的界面展示到屏幕上时，使用的方式都是组件中的template:标签下编写内容后，由Vue将我们编写的界面渲染到屏幕上。而这个render函数就是比template更底层的函数，我们可以利用它直接渲染我们想渲染的内容。这样做的好处是性能更高，并且使用更加灵活。
【vue回顾系列】03-什么是虚拟DOM，模板编译，以及diff更新机制是怎么样的
庞囧的博客
03-15 739
vue在对虚拟dom树进行比对的时候，时间复杂度降低很多，例如一颗三层的虚拟dom树，如果没有diff算法，那么旧树的每一个节点都要和新树的每个节点进行比对，时间复杂度就是On3。)，只比对同一层级的，遇到不一样的不管子节点直接更新。如果我们使用虚拟DOM的能力，不需要用innerHTML，Vue直接创建新的虚拟DOM，进行新旧比对，然后直接对真实DOM进行修改或添加。具体怎么移动的暂时不深入，这种在作层级比对的时候会自动移动，比如比对旧DOM的C的时候，直接就把C移到最前面，这种方式损耗是非常小的。
VUE源码解析——模板编译底层原理，学习Vue内部是怎么把template模板编译成虚拟DOM,从而渲染出真实DOM
qq_43305958的博客
09-17 1376
VUE源码解析——模板编译底层原理一、什么是模板编译？二、整体渲染过程三、模板编译内部流程抽象语法树AST总结 一、什么是模板编译？ 把写在<template></template>标签中的类似于原生HTML的内容称之为模板。 在<template></template>标签中除了写一些原生HTML的标签，我们还会写一些变量插值，或者写一些Vue指令，这些东西都是在原生HTML语法中不存在的，不被接受的。render函数会将模板内容生成对应的VNode，VNo
vue组件转换成dom元素_Vue组件可将焦点捕获在DOM元素内
cuk5239的博客
07-29 693
vue组件转换成dom元素 焦点陷阱 (focus-trap-vue) Vue component to trap the focus within a DOM element. Vue组件可将焦点捕获在DOM元素内。 View Demo 查看演示 View Github 查看Github 安装 (Installation) npm install focus-trap focus-tra...
Vue源码解析：Template转AST与VirtualDOM
VirtualDOM是一种内存中的数据结构，它模拟了真实的DOM，允许Vue在修改状态后计算出最小的DOM变化，从而提高性能。Vue将Template编译成AST，然后进一步转换为render函数，该函数会生成VNode（虚拟DOM节点）树，这些...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值