【Vue原理】从模板到DOM的简要流程

最新推荐文章于 2023-06-30 16:06:08 发布
最新推荐文章于 2023-06-30 16:06:08 发布
阅读量587 收藏 1
点赞数 1
分类专栏： Vue原理 文章标签： vue javascript 前端框架 前端 前端开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27460969/article/details/95043695
版权
本文深入探讨Vue的模板挂载到DOM的过程，分为init和mount两个阶段。init涉及Vue实例初始化，包括Vue构造函数、_init方法。mount阶段包括模板解析、DOM生成与挂载。Vue的_init在满足条件时调用$mount启动DOM挂载，通过_vm._render生成VNode，_vm._update负责对比更新DOM。
摘要由CSDN通过智能技术生成

写文章不容易，点个赞呗兄弟
专注 Vue 源码分享，文章分为白话版和 源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧
研究基于 Vue版本 【2.5.17】

如果你觉得排版难看，请点击 下面链接 或者 拉到 下面关注公众号也可以吧

【Vue原理】从模板到DOM的简要流程

今天的计划是，探索Vue模板挂载到页面是怎么样的一个流程，内容是指 正常 HTML 标签的模板挂载，这部分内容很重要。

而这部分内容也是为了 讲解 Component 作为铺垫，因为到最后 Component 必然也是作为一个正常标签去挂载，所以先把这部分抽出来讲

首先，这个流程，个人认为可以分为两大部分，分别是 init 和 mount

顾名思义，init 必定是和初始化有关，mount 和 挂载DOM 有关

Init

首先，当你开始调用 Vue 的时候

最低0.47元/天 解锁文章
神仙朱
关注
专栏目录
Vue template 解析生成真实dom过程
qq_38261819的博客
02-15 1万+
vue的模版编译过程主要如下：template -> ast -> render函数 -> 虚拟DOM -> 真实DOM读取模板：Vue 会读取 HTML 模板并将其转换为字符串。解析模板：Vue 使用编译器将字符串模板转换为抽象语法树（AST），其中包含模板中的每个元素和它们的属性。生成 render 函数：Vue 使用抽象语法树生成 render 函数。
从template到DOM(Vue.js源码角度看内部运行机制)
学习前端这门手艺，栈底到栈顶依次是：浏览器架构、Web 网络、事件循环机制、JavaScript 核心、V8 的内存管理、浏览器的渲染流程、Web 安全、CSS、React、Vue、Node、构建工具链等
09-29 483
说明 【本文转载自：https://github.com/answershuto/learnVue】 从new一个Vue对象开始 let vm = new Vue({ el: '#app', /*some options*/ }); 很多同学好奇，在new一个Vue对象的时候，内部究竟发生了什么？ 究竟Vue.js是如何将data中的数据渲染到真实的宿主环境中的？ 又是如何通过“响应式”修改数据的？ template是如何被编译成真实环境中可用的HTML的？ Vue指令又是如何执行的？ 带
vue虚拟dom原理剖析
weixin_34342207的博客
12-28 437
在vue2.0渲染层做了根本性的改动，那就是引入了虚拟DOM。 vue的虚拟dom是基于 snabbdom 改造过来的。了解 snabbdom的原理之后再回过头来看 vue的虚拟dom结构的实现。就难度不大了！ 于是，这里将自己写的 snabbdom 源码解析的一系列文章做一个汇总。 snabbdom源码解析（一） 准备工作 snabb...
详解Vue中的虚拟DOM
dichu2296的博客
06-26 1131
摘要： 什么是虚拟DOM? 作者：浪里行舟 Fundebug经授权转载，版权归原作者所有。 前言 Vue.js 2.0引入Virtual DOM,比Vue.js 1.0的初始渲染速度提升了2-4倍，并大大降低了内存消耗。那么，什么是Virtual DOM？为什么需要Virtual DOM？它是通过什么方式去提升页面渲染效率的呢？这是本文所要探讨的问题。 模板转换成视图的过程 在正式介...
VUE源码解析——模板编译底层原理，学习Vue内部是怎么把template模板编译成虚拟DOM,从而渲染出真实DOM
qq_43305958的博客
09-17 1378
VUE源码解析——模板编译底层原理一、什么是模板编译？二、整体渲染过程三、模板编译内部流程抽象语法树AST总结 一、什么是模板编译？ 把写在<template></template>标签中的类似于原生HTML的内容称之为模板。 在<template></template>标签中除了写一些原生HTML的标签，我们还会写一些变量插值，或者写一些Vue指令，这些东西都是在原生HTML语法中不存在的，不被接受的。render函数会将模板内容生成对应的VNode，VNo
vue 如何生成一个dom元素_vue 源码学习笔记三 vue中如何生成虚拟DOM
weixin_39770592的博客
12-23 485
vm._render 生成虚拟dom我们知道在挂载过程中， $mount 会调用 vm._update和vm._render 方法，vm._updata是负责把VNode渲染成真正的DOM，vm._render方法是用来把实例渲染成VNode，这里的_render是实例的私有方法，和前面我们说的vm.render不是同一个，先来看下vm._render定义,vm._render是通过renderM...
vue 如何生成一个dom元素_vue 源码学习三 vue中如何生成虚拟DOM
weixin_39824898的博客
12-23 625
vm._render 生成虚拟dom我们知道在挂载过程中， $mount 会调用 vm._update和vm._render 方法，vm._updata是负责把VNode渲染成真正的DOM，vm._render方法是用来把实例渲染成VNode，这里的_render是实例的私有方法，和前面我们说的vm.render不是同一个，先来看下vm._render定义,vm._render是通过renderM...
vue 如何生成一个dom元素_vue 源码笔记三 生成虚拟DOM
weixin_39534208的博客
12-23 470
vm._render 生成虚拟dom我们知道在挂载过程中， $mount 会调用 vm._update和vm._render 方法，vm._updata是负责把VNode渲染成真正的DOM，vm._render方法是用来把实例渲染成VNode，这里的_render是实例的私有方法，和前面我们说的vm.render不是同一个，先来看下vm._render定义,vm._render是通过renderM...
【Vue原理】Component - 源码版 之 挂载组件DOM
神仙朱的博客
07-09 627
写文章不容易，点个赞呗兄弟 专注 Vue 源码分享，文章分为白话版和 源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧 研究基于 Vue版本 【2.5.17】 如果你觉得排版难看，请点击 下面链接 或者 拉到 下面关注公众号也可以吧 【Vue原理】Component - 源码版 之 挂载组件DOM 由这篇文章 从模板到DOM的简要流程 我们知道，在生成 ...
【vue回顾系列】03-什么是虚拟DOM，模板编译，以及diff更新机制是怎么样的
庞囧的博客
03-15 749
vue在对虚拟dom树进行比对的时候，时间复杂度降低很多，例如一颗三层的虚拟dom树，如果没有diff算法，那么旧树的每一个节点都要和新树的每个节点进行比对，时间复杂度就是On3。)，只比对同一层级的，遇到不一样的不管子节点直接更新。如果我们使用虚拟DOM的能力，不需要用innerHTML，Vue直接创建新的虚拟DOM，进行新旧比对，然后直接对真实DOM进行修改或添加。具体怎么移动的暂时不深入，这种在作层级比对的时候会自动移动，比如比对旧DOM的C的时候，直接就把C移到最前面，这种方式损耗是非常小的。
Vue.js源码角度：剖析模版和数据渲染成最终的DOM的过程
weixin_34357267的博客
08-25 203
写在前面 因为最近做的项目采取的技术栈是vue.js，加上自己对vue.js的底层运行机制很感兴趣，所以最近每天花点时间，大概一两个月左右把vue.js源码捋了一遍，在这里针对模版和数据渲染成最终的DOM的过程这一部分做一下总结。 在看源码的过程当中，可能当中有自己理解出偏差或者大家有理解不一样的地方，欢迎大家评论或私信我，共同学习进步。 Vue.js运行机制全局概览图 这是我在网上找的一张Vu...
Vue挂载Dom与映射真实Dom流程
wyh666csdn的博客
01-10 846
vue：template标签解析时，1.将模板字符串通过parse函数转换成为AST（抽象语法树)2.将AST通过generate函数转换成为render函数3.在这个render函数中又有很多h函数（createElement函数），调用这些h函数生成一个又一个对象，这些对象互相存在联系从而生成虚拟dom树。
Vue - 函数的参数传递自身 DOM 对象（标签绑定的函数）
王佳斌
07-30 2871
前言 在原生 js 写法里，想传递自身 DOM 非常简单，如下代码所示： <input type="text" οnchang="go(this)"> function go(e){ console.log(e) // <input type="text" οnchang="go(this)"> } Vue 写法 借助 $event 事件对象，里面有其他参数，其中 target 为自身 DOM 。 以下示例，即为 vue 写法： <input type="text"
VUE里使用虚拟DOM来优化更新流程
最新发布
忧郁的蛋的专栏
06-30 711
在 Vue.js 中，虚拟 DOM 的比较和更新是由 Vue 的渲染器来完成的。然后，通过对比新旧虚拟 DOM的差异，渲染器会更新真实 DOM 中的节点，使得新的虚拟 DOM 与真实 DOM 保持一致。虽然虚拟 DOM 在性能上有了很大的提升，但是如果数据量特别大或者组件复杂度特别高还是会有一定的性能问题，可是有一些优化方法来减少对虚拟 DOM 的操作，提高性能。Vue.js 会使用虚拟 DOM 来比较新旧虚拟 DOM，并使用最小代价的方式来更新真实 DOM，这样能减少不必要的 DOM 操作，提高性能。
彻底搞懂Vue把虚拟dom(vnode)转化为真实dom的过程
qq_37947438的博客
03-10 7275
Vue是如何把虚拟dom(vnode)转化为真实dom的？ 相信很多学习过vue的小伙伴们都觉得很容易上手，因为vue不需要太过复杂的配置，也不需要你太关注它背后运行的逻辑，你只要用vue-cli脚手架建一个项目就可以在本地进行开发了，个人认为vue最好的一点就是你只要关注数据的变化就好了，其他的一切都有vue背后来实现。 我们今天就来探究一下vue内部是如何吧虚拟dom变为我们页面上的html代码的，并且手写一个简单的例子来实现。 写之前我们先用一张图来了解一下vue把vnode变为真实dom的一个流程
Vue 原理解析（五）之 虚拟Dom 到真实Dom的转换过程
热门推荐
绿足 博客
09-24 1万+
上一篇 vue 原理解析(四)： 虚拟Dom 是怎么生成的 再有一颗树形结构的Javascript对象后， 我们需要做的就是讲这棵树跟真实Dom树形成映射关系。我们先回顾之前的mountComponnet 方法： export function mountComponent(vm, el) { vm.$el = el ... callHook(vm, 'beforeMount') ...
看一下从 new Vue()开始到页面看到真实dom都经历了什么？
weixin_34248705的博客
06-24 622
从 new Vue()开始看vue运行流程 本篇文章不会具体分析很多每个方法内部具体逻辑，只为了研究一下浏览器加载vuejs文件后以及我new Vue后，都调用了哪些方法，这些方法都是做什么的等等。以便对vue的执行流程有个大致了解，方便遇见问题排查是哪个过程出了问题。 用vue这么久我是很好奇从vue是怎么一步步把单文件组件的内容给渲染...
从模板编译到虚拟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：数据双向绑定原理与简易实现
Vue.js的双向绑定是其核心特性之一，它使得视图层和数据模型之间能保持同步，无需手动操作DOM。在本文中，我们将深入探讨Vue的双向绑定原理，并逐步实现一个简化版的SelfVue，主要关注`{{}}`插值、`v-model`以及事件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值