Vue的模板和数据是如何渲染成DOM的

最新推荐文章于 2024-01-23 09:14:12 发布
最新推荐文章于 2024-01-23 09:14:12 发布
阅读量642 收藏 2
点赞数 1
分类专栏： Vue 文章标签： vue.js 面试
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43822787/article/details/120841251
版权
本文深入探讨Vue的渲染过程，从newVue初始化数据开始，详细阐述$mount如何转换render函数，以及渲染Watcher如何收集依赖并触发页面渲染和更新。了解Vue内部如何响应数据变化并高效更新视图。
摘要由CSDN通过智能技术生成
一、实现过程

在这里插入图片描述

1、new Vue 初始化数据等;
2、$mount 将 render、template 或 el 转为 render 函数;
3、生成一个渲染 Watcher 收集依赖，并将执行render 函数生成 vnode 传递给 patch 函数执行，渲染页面;
4、当渲染 Watcher 依赖发生变化时，执行Watcher 的 getter 函数，重新依赖收集。并且重新执行 render 函数生成 vnode 传递给 patch 函数进行页面的更新。

参考文献：【面试题解析✨】Vue 的数据是如何渲染到页面的？.

障碍的枫子
关注
专栏目录
VUE源码解析——模板编译底层原理，学习Vue内部是怎么把template模板编译成虚拟DOM,从而渲染出真实DOM
qq_43305958的博客
09-17 1398
VUE源码解析——模板编译底层原理一、什么是模板编译？二、整体渲染过程三、模板编译内部流程抽象语法树AST总结 一、什么是模板编译？ 把写在<template></template>标签中的类似于原生HTML的内容称之为模板。 在<template></template>标签中除了写一些原生HTML的标签，我们还会写一些变量插值，或者写一些Vue指令，这些东西都是在原生HTML语法中不存在的，不被接受的。render函数会将模板内容生成对应的VNode，VNo
解决vue页面渲染但dom没渲染的操作
10-15
5. **ECharts动态数据渲染**： 当在Vue中使用ECharts时，确保在数据更新后调用`myChart.setOption()`来更新图表。例如： ```javascript import ECharts from 'echarts'; export default { data() { return {...
vue渲染页面的流程_Vue中DOM渲染的过程
weixin_39798943的博客
12-21 588
vue中dom渲染过程1、响应式监听data属性的getter setter2、模板编译模板到render函数再到vnode。模板不是html，有指令、插值、js表达式，能够实现循环、判断。html是标签语言，只有js才能实现循环判断。因此，模板一定要转化成js，即编译模板。模板编译为render函数、执行render函数返回的vnode3、收集依赖在模板中使用那个变量就把那个变量观察起来(wat...
笔记：Vue选项---DOM渲染（el,template,render）
weixin_57346222的博客
12-07 1528
1.el选项： 指定被挂载元素，属性值仅限于CSS选择器或者DOM节点对象。 这里推荐使用以下语法： el:"选择器" //挂载点 2.template选项： 语法： template:"<标签>......</标签>" //模板节点创建新的DOM节点并将替换原有的DOM节点 可以放在实例中，也可以放在组件中。 3.渲染函数render选项： 使用在组件中，语法如下： render:function(createElement){
从template到DOM(Vue.js源码角度看内部运行机制)
学习前端这门手艺，栈底到栈顶依次是：浏览器架构、Web 网络、事件循环机制、JavaScript 核心、V8 的内存管理、浏览器的渲染流程、Web 安全、CSS、React、Vue、Node、构建工具链等
09-29 486
说明 【本文转载自：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渲染成真实DOM-----渲染器
wangyuiba1314的博客
04-01 3467
我们知道我们的虚拟DOM是通过render函数渲染成真实DOM的，但是render函数又是怎么实现的呢？他的原理是什么呢？接下来我们一起来看看渲染器的实现原理。 一、最简单的rander函数 function Render(obj, root) { const el = document.createElement(obj.tag) if (typeof obj.children === 'string') { const text = document.creat
vue中实现先请求数据再渲染dom分享
08-27
在Vue.js中，正确地在组件加载时获取数据并在数据准备好后再渲染DOM是前端开发中常见的需求。但如果不注意Vue的生命周期钩子函数的执行时机，就可能遇到在数据还未加载完成时就尝试访问DOM导致的问题。这篇分享正是...
vue数据页面渲染完成以后操作DOM
西洲
10-30 8538
在使用Vue框架的时候，有时候需要在Vue在页面数据渲染完成之后调用方法，不然获取不到准确的数据，特别是在获取列表的高度的时候，由于数据没有加载完，获取不到准确的高度。 nextTick：在下次 DOM 更新循环结束之后执行延迟回调。 再vue生命周期mounted，结合nextclick使用。 mounted () { this.$nextTick(function () { // codeing }) } 后来发现不生效。 watch：用于观察Vue实例上的数
vue监听数据渲染DOM完以后执行某个函数详解 开发技术.zip
06-05
总结来说，Vue提供了多种方式来监听数据渲染DOM完以后执行某个函数，包括`$nextTick`和`updated`生命周期钩子。正确使用这些工具，可以帮助开发者更优雅地处理数据变化与DOM更新之间的关系，提高应用性能和用户体验...
vue2.x源码解析五——数据驱动--6.模板和数据如何渲染成最终的 DOM
小毛驴的博客
07-02 277
整个vue2.x源码解析五——数据驱动讲的其实就是模板和数据如何渲染成最终的 DOM，具体的过程如图所示
vue3如何动态把组件添加到dom中
最新发布
编程似海、
01-23 2471
需求很简单，因为一些原因我并不想在template中直接使用子组件，于是我想是否可以通过方法直接把组件插入到dom中呢？当然是可以的了~~但是我又想偷懒，于是我想到element plus也是在一些组件中也在dom插入了组件。于是我就默默的准备copy它的代码了~
vue核心之真实DOM页面渲染过程和虚拟DOM(vdom)、Diff算法
muzidigbig的博客
02-23 3509
vue核心之虚拟DOM(vdom)与真实DOM页面渲染过程 一、真实DOM和其解析流程？ 浏览器渲染引擎工作流程都差不多，大致分为5步，创建DOM树——创建StyleRules——创建Render树——布局Layout——绘制Painting 第一步，用HTML分析器，分析HTML元素，构建一颗DOM树(标记化和树构建)。 第二步，用CSS分析器，分析CSS文件和元素上的inline样式，生成页面的样式表。 vue2与vue3中diff算法的区别
Vue源码探索--mustache模板引擎（把模板字符串编译为虚拟DOM并渲染出真实DOM）上篇
果车的博客
01-27 593
注：上一基础篇我们了解到什么是模板引擎以及如何使用，这一篇我们通过尝试写一些底层源码来深入理解其工作流程（把模板字符串编译为虚拟DOM并渲染出真实DOM）。 一、正则实现简单模板数据填充： 最简单模板引擎实现机理，利用的是正则表达式中的replace()方法： <div id="container"> </div> </body> <script src="../js/mustache.js"></script> <script&g
Vue 3渲染DOM节点的几种方式
一起学习
10-16 1613
本文主要介绍在vue3中渲染DOM节点的几种方式。
使用Vue调取接口,并渲染数据的示例代码
10-16
在Vue实例的模板部分，使用了v-for指令来遍历data中的数据列表，并且利用Vue的模板语法将数据渲染到HTML结构中。例如，示例中使用了表格来展示数据，每一行代表一个数据对象，并通过插值表达式{{}}将数据对象的属性...
Vue.js源码角度：剖析模版和数据渲染成最终的DOM的过程
前端民工
10-07 303
写在前面 因为最近做的项目采取的技术栈是vue.js，加上自己对vue.js的底层运行机制很感兴趣，所以最近每天花点时间，大概一两个月左右把vue.js源码捋了一遍，在这里针对模版和数据渲染成最终的DOM的过程这一部分做一下总结。 在看源码的过程当中，可能当中有自己理解出偏差或者大家有理解不一样的地方，欢迎大家评论或私信我，共同学习进步。 Vue.js运行机制全局概览图   这是我在网...
虚拟DOM & DIff算法
Wmt3344的博客
08-26 557
一、真实DOM和其解析流程？ 浏览器渲染引擎工作流程都差不多，大致分为5步，创建DOM树——创建StyleRules——创建Render树——布局Layout——绘制Painting 第一步，用HTML分析器，分析HTML元素，构建一颗DOM树(标记化和树构建)。 第二步，用CSS分析器，分析CSS文件和元素上的inline样式，生成页面的样式表。 第三步，将DOM树和样式表，关...
浅识vue的虚拟DOM和渲染器
weixin_45696837的博客
11-26 1307
vue的虚拟DOM和渲染器
vue.extend挂载组件
weixin_43989307的博客
04-27 1176
遇到的问题 vue2在抽离组件时，要求按需加载，没有改组件的请求数据时，不加载此组件，有数据才加载 解决方法 方法一 v-if 这个可以说是很经典的一个办法,但是会有展示上的问题,即dom结构会先消失而后重新渲染 并不算是一个完美的解决方案,所以暂时Pass掉 方法二 通过$set来触发Vue的数据重新渲染机制(鸡肋), 大多数情况下要配合监听来使用 方法三 （推荐） 使用vue.extend()将组件挂载在指定DOM上 Vue.extend()方法其实是Vue的一个构造器，继承自Vue，创建一个
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值