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

最新推荐文章于 2023-01-10 11:57:00 发布
最新推荐文章于 2023-01-10 11:57:00 发布
阅读量578 收藏 1
点赞数 1
分类专栏： Vue原理 文章标签： vue javascript 前端框架 前端 前端开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27460969/article/details/95043695
版权

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

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

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

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

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

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

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

Init

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

最低0.47元/天 解锁文章
神仙朱
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
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 472
说明 【本文转载自：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 421
在vue2.0渲染层做了根本性的改动，那就是引入了虚拟DOM。 vue的虚拟dom是基于 snabbdom 改造过来的。了解 snabbdom的原理之后再回过头来看 vue的虚拟dom结构的实现。就难度不大了！ 于是，这里将自己写的 snabbdom 源码解析的一系列文章做一个汇总。 snabbdom源码解析（一） 准备工作 snabb...
详解Vue中的虚拟DOM
dichu2296的博客
06-26 1124
摘要： 什么是虚拟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 1357
VUE源码解析——模板编译底层原理一、什么是模板编译？二、整体渲染过程三、模板编译内部流程抽象语法树AST总结 一、什么是模板编译？ 把写在<template></template>标签中的类似于原生HTML的内容称之为模板。 在<template></template>标签中除了写一些原生HTML的标签，我们还会写一些变量插值，或者写一些Vue指令，这些东西都是在原生HTML语法中不存在的，不被接受的。render函数会将模板内容生成对应的VNode，VNo
vue双向绑定简要分析
08-31
Vue双向绑定简要分析 Vue双向绑定是指视图层和数据模型之间的自动同步更新机制，当数据模型发生变化时，视图层也会实时更新，反之亦然。这种机制能够减少开发成本和提高开发效率。 在 Vue 中，双向绑定是通过数据...
vue常见面试题100道.doc
08-27
"Vue 常见面试题100道" Vue.js 是一个基于 MVVM 模式的前端框架，它提供了一个灵活的方式来构建用户界面。...当状态发生变化时，Vue 会重新生成虚拟 DOM，然后与真实 DOM 进行 diff，最后更新真实 DOM。 ...
Vue学习之路之登录注册实例代码
08-30
该实例代码涵盖了从安装 Vue.js 到实现登录注册功能的整个过程。 一、安装 Vue.js 和 Element UI 首先，需要全局安装 Vue.js 的命令行工具 Vue CLI，使用以下命令： ``` npm install --global vue-cli ``` 然后，...
关于vue的一些个人笔记.zip
06-21
以上是对Vue基础知识的简要概述，实际的“Vue基础.md”文件可能会包含更多详细信息，如API的使用、实战示例、最佳实践等内容，帮助学习者深入理解和掌握Vue.js框架。在实际项目中，结合这些知识，可以有效地构建出...
【vue回顾系列】03-什么是虚拟DOM，模板编译，以及diff更新机制是怎么样的
庞囧的博客
03-15 707
vue在对虚拟dom树进行比对的时候，时间复杂度降低很多，例如一颗三层的虚拟dom树，如果没有diff算法，那么旧树的每一个节点都要和新树的每个节点进行比对，时间复杂度就是On3。)，只比对同一层级的，遇到不一样的不管子节点直接更新。如果我们使用虚拟DOM的能力，不需要用innerHTML，Vue直接创建新的虚拟DOM，进行新旧比对，然后直接对真实DOM进行修改或添加。具体怎么移动的暂时不深入，这种在作层级比对的时候会自动移动，比如比对旧DOM的C的时候，直接就把C移到最前面，这种方式损耗是非常小的。
Vue.js源码角度：剖析模版和数据渲染成最终的DOM的过程
weixin_34357267的博客
08-25 195
写在前面 因为最近做的项目采取的技术栈是vue.js，加上自己对vue.js的底层运行机制很感兴趣，所以最近每天花点时间，大概一两个月左右把vue.js源码捋了一遍，在这里针对模版和数据渲染成最终的DOM的过程这一部分做一下总结。 在看源码的过程当中，可能当中有自己理解出偏差或者大家有理解不一样的地方，欢迎大家评论或私信我，共同学习进步。 Vue.js运行机制全局概览图 这是我在网上找的一张Vu...
Vue挂载Dom与映射真实Dom流程
wyh666csdn的博客
01-10 798
vue：template标签解析时，1.将模板字符串通过parse函数转换成为AST（抽象语法树)2.将AST通过generate函数转换成为render函数3.在这个render函数中又有很多h函数（createElement函数），调用这些h函数生成一个又一个对象，这些对象互相存在联系从而生成虚拟dom树。
Vue - 函数的参数传递自身 DOM 对象（标签绑定的函数）
王佳斌
07-30 2817
前言 在原生 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(vnode)转化为真实dom的过程
qq_37947438的博客
03-10 6989
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') ...
Vue的模板和数据是如何渲染成DOM的
刘炳全的博客
10-19 617
一、实现过程 1、new Vue 初始化数据等; 2、$mount 将 render、template 或 el 转为 render 函数; 3、生成一个渲染 Watcher 收集依赖，并将执行render 函数生成 vnode 传递给 patch 函数执行，渲染页面; 4、当渲染 Watcher 依赖发生变化时，执行Watcher 的 getter 函数，重新依赖收集。并且重新执行 render 函数生成 vnode 传递给 patch 函数进行页面的更新。 参考文献：【面试题解析✨】Vue
Vue：模板编译 与 Virtual DOM
林夏天的博客
04-19 894
（一）Vue模板编译 在Vue中我们有三种方式来创建HTML 模板 手动写渲染函数 JSX 渲染函数是最原始的方法，而模板最终会通过编译转换陈渲染函数。渲染函数执行后，会得到一份vnode用来渲染真实DOM。所以，模板编译其实是配合虚拟DOM进行渲染。 1. 什么是模板编译？ 所谓模板编译就是把模板编译成vnode的渲染函数。 2. 模板编译过程： 模板编译可以分为三个阶段： 将模板解析...
谷粒商城 vue模板
最新发布
08-28
对于谷粒商城的Vue模板，根据提供的引用内容，可以看出其中涉及了模块化开发和MVVM思想。 模块化开发是指将一个复杂的系统分割成一些相互依赖的模块，每个模块都具有明确的功能。[1] 这种开发方式有助于提高代码的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值