Vue 的首次渲染的过程

最新推荐文章于 2025-10-10 05:00:40 发布
原创 最新推荐文章于 2025-10-10 05:00:40 发布 · 379 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue #源码

本文详细介绍了Vue 2.6.10版本的初始化过程，包括构造函数中的_init方法、$mount()方法的双重作用，以及在mountComponent()中的关键步骤。重点讲解了如何从模板生成render函数，虚拟DOM的创建与更新，以及Watcher对象的创建。文章深入剖析了Vue实例从初始化到挂载到页面上的完整生命周期。

Vue版本：2.6.10

  1. 首先进行Vue的初始化，初始化Vue的实例成员和静态成员
  2. 调用构造函数中的_init()方法，作为整个Vue的入口
  3. 在_init()中调用$mount()方法：
    • 第一个$mount()：在入口文件entry-runtime-with-compiler.js中。其核心作用是将模板（按照传入render>template>el的优先级作为模板）用compileToFunction()编译成render函数并存储在option.render中
    • 第二个$mount()：在runtime/index.js中。运行时版本不会走第一个mount()，所以仅会在这里中获取el
  4. 调用mountComponent()，src/core/instance/lifecycle.js中定义
    1. 判断render选项，若运行时版本&没有render&传入了模板，会警告运行时版本不支持编译器
    2. 触发beforeMount()
    3. 定义updateComponent()，该方法中调用了两个方法：
      • _rende()：调用了render.call(vm._renderProxy,vm$createElement)将用户传入的render()或者自己编译生成的render()生成的虚拟DOM返回
      • _update()：调用了__patch__(vm.$el,vnode)将虚拟DOM转换成真实DOM，并且挂载到页面上；将生成的真实DOM记录到vm.$el中。
    4. 创建Watcher对象。创建时传递了updateComponent()并在内部调用get()时调用了updateComponent()
    5. 触发mounted()
    6. return vm
Vue 首次渲染的过程（源码分析）
gongye2019的博客
05-18 324
在前端快速发展的今天，如果不能时刻保持学习就会很快被淘汰。分享一下Vue首次渲染的过程（从源码的角度）。每天进步一点点。 一、图解： 二、文字解释： 1、首先进行Vue的初始化 ​ 初始化Vue的实例成员以及静态成员；初始化全局指令v-model和v-show，全局组件Transition和TransitionGroup；在Vue原型上挂载 __path__ 和 $mount 方法；重写 $mount 方法，并挂载 compile方法。 2、当初始化结束之后，开始调用Vue构造函数 ​ 在构造函数中调
Vue 首次渲染的过程
weixin_46261261的博客
11-13 1585
一，从入口文件开始 定义在 src/platform/web/entry-runtime-with-compiler.js 二，Vue 初始化过程 1，首先取出 Vue 的 $mount 进行重写，给 $mount 增加新的功能 // src/platform/web/entry-runtime-with-compiler.js // 保留 Vue实例的 $mount 方法 const mount = Vue.prototype.$mount Vue.prototype.$mount = f
大前端学习-Vue首次渲染过程
大白菜的博客
07-30 3390
文章内容输出来源：拉勾教育大前端高薪训练营 最近在学习Vue源码,然后主要是对Vue的首次渲染做一个总结～ 首先来看下图把,接下来会一步一步讲解 Vue源码地址,这里主要看src目录下面的源码 一、从入口文件开始 定义在 src/platform/web/entry-runtime-with-compiler.js 二、Vue初始化过程 1.首先取出Vue的$mount,对$mount进行重写,给$mount增加新的功能 // src/platform/web/entry-runtime-with-c.
Vue.Draggable与Kafka Streams窗口聚合结果存储：配置
最新发布
gitblog_00493的博客
10-10 236
在现代Web应用开发中，前端交互体验与后端数据处理的高效协同是提升用户体验的关键。Vue.Draggable作为基于Sortable.js的Vue组件，提供了直观的拖拽功能，而Kafka Streams的窗口聚合则能高效处理流数据。本文将详细介绍如何配置Vue.Draggable实现前端拖拽交互，并结合Kafka Streams窗口聚合结果存储的最佳实践。 ## Vue.Draggable基础配...
Vue 首次渲染过程简述
Baron的技术blog
07-28 1320
   先上图： 首先进行Vue的初始化，初始化Vue的实例成员以及静态成员。 当初始化结束之后，开始调用构造函数，在构造函数中调用this._init()，这个方法相当于我们整个Vue的入口。 在_init()中调用this.$mount()，共有两个this.$mount()。      第一个this.$mount()是entry-runtime-with-compiler.js入口文件，这个$mount()的核心作用是
vue首次渲染过程
hhhhhhhhhhhhhhhc的博客
11-04 441
在首次渲染之前，首先进行初始化，就是初始化vue的实例成员和静态成员。 初始化结束之后，调用构造函数new Vue() 在构造函数中调用了_init()方法，这个方法相当于整个vue的入口，在这个方法中最终调用了$mount() 在entry-runtime-with-compiler.js中的mount，即入口文件的mount，即入口文件的mount，即入口文件的mount，这个文件中的**$mount的核心作用是帮我们把模板编译成render函数**，但他首先会判断我们是否传入了render，如果没.
Vue渲染过程浅析
10-17
Vue的渲染过程可以分为几个核心步骤，下面将详细介绍这几个步骤以及相关的知识点。 1. 模板编译为render函数 在Vue.js中，推荐使用`template`来定义HTML结构。但是`template`仅仅是一种可读性好的模板语法，并非...
vue首次渲染全过程
weixin_42707287的博客
04-17 4942
昨天有朋友问我vue在页面第一次加载时到底做了些什么，看来这个问题在很多朋友心中可能还比较模糊，今天我们一起来详细的看看vue的首次渲染过程 vue源码下载地址：vue源码 了解vue首次渲染全过程，我们应该从哪说起呢，很明显，是不是应该从入口文件说起啊，即main.js 1、vue初始化 首先，我们看main.js中，第一个最关键的肯定是引入vue吧 import vue from 'vue' 其实，vue被打包后，dist文件夹中存在多个版本，分别是 通用版本（UMD）：中的完整版 vue.js .
vue源码分析-渲染过程
yyzzabc123的博客
10-10 277
继上一节内容，我们将Vue复杂的挂载流程通过图解流程，代码分析的方式简单梳理了一遍，最后也讲到了模板编译的大致流程。然而在挂载的核心处，我们并没有分析模板编译后渲染函数是如何转换为可视化DOM节点的。因此这一章节，我们将重新回到Vue实例挂载的最后一个环节：渲染DOM节点。在渲染真实DOM的过程中，Vue引进了虚拟DOM的概念，这是Vue架构设计中另一个重要的理念。虚拟DOM作为JS对象和真实DOM中间的一个缓冲层，对JS频繁操作DOM的引起的性能问题有很好的缓解作用。
请你谈谈：vue的渲染机制（render）- 1 原理讲解
一个搬砖工人
07-28 1329
Vue 的组件挂载和更新过程是一个高度优化的过程，它利用虚拟 DOM 和响应式系统来确保数据的变化能够高效地反映到视图上。这个过程从模板编译开始，经过挂载、更新等阶段，最终实现了数据的双向绑定和视图的动态更新。
kafka-client:这是一个简单的 kafka 客户端
06-11
kafka 客户端 下载 Apache kafka 解压文件夹 焦油-xzf kafka_2.10-0.8.2.0.tgz cd kafka_2.10-0.8.2.0 启动 Zoopkeeper bin/zookeeper-server-start.sh config/zookeeper.properties & 启动服务器 bin/kafka-server-start.sh 配置/server.properties 创建测试主题 bin/kafka-topics.sh --create --zookeeper localhost:2181 --replication-factor 1 --partitions 6 --topic test &
Vue首次渲染的过程——Vue源码学习总结(一)
Xiao_yi_fei的博客
01-30 318
Vue首次渲染的过程 1.首先是Vue实例的初始化过程，挂载一些全局的静态方法，以及原型上的一些方法。 2.在_init函数的最后调用mount,$mount中调用mountComponent 3.在mountComponent中new一个Wactcher，并传入vm._update(vm._render) 4.在watcher中，把vm._update(vm._render)赋值给getter，最后调用get方法，在get方法中调用getter真正开始渲染视图 5.vm._render其实就是用来创建虚拟
大前端【3-2】简述Vue首次渲染过程
球球博客
09-09 758
第一步、Vue初始化，实例成员、静态成员 首先进行vue的初始化，即初始化实例成员及静态成员. 第二步、new Vue() 初始化结束以后，调用vue的构造函数new Vue()，在构造函数中调用this._init()方法 第三步、this.init() this.init()相当于整个项目的入口，在这个方法中，最终调用vm.$mount() 第四步、vm.$mount() 这个$mount()是src/platform/web/entry-runtime-with-compiler.js中定义的，核心作
vue 渲染流程
qq_36049117的博客
08-15 2259
vue 渲染流程
vue 初次渲染
前端精髓
03-27 1939
export function mountComponent ( vm: Component, el: ?Element, hydrating?: boolean ): Component { vm.$el = el if (!vm.$options.render) { vm.$options.render = createEmptyVNode if (process.env.NODE_ENV !== 'production') { /* istanbul i
ef core 批量update 非id_vue 源码探索之 update
weixin_39819974的博客
11-20 114
updateVue 的 _update 是实例的一个私有方法，它被调用的时机有 2 个，一个是首次渲染，一个是数据更新的时候；由于我们这一章节只分析首次渲染部分，数据更新部分会在之后分析响应式原理的时候涉及。_update 方法的作用是把 VNode 渲染成真实的 DOM，它的定义在 src/core/instance/lifecycle.js 中Vue.prototype._update = f...
VUE 学习笔记（三） Vue 渲染流程详解
w风雨无阻w的专栏
05-07 3863
在 Vue 里渲染一块内容，会有以下步骤及流程：第一步，解析语法，生成AST第二步，根据AST结果，完成data数据初始化第三步，根据AST结果和DATA数据绑定情况，生成虚拟DOM第四步，将虚拟DOM 生成真正的DOM插入到页面中，进行页面渲染。那怎么理解这个流程呢？AST 语法树，实际就是抽象语法树（Abstract Syntax Tree），是指通过构建语法树的形式将源代码中的语句映射到树中的每一个节点上。DOM 结构树，也是AST中的一种，把HTML DOM语法解析并生成最终页面。
vue中渲染页面，动态设置颜色
aoqusui6509的博客
05-18 1127
for循环中动态设置页面的图标或者字体颜色与循环中且套循环 :style="{'color':items.color}" 案例代码： 　　html中 <div class="allFunction" v-for="(item,index ) in checksMes"> 　　<div class="titMes" data-index="dictio...
vue的渲染过程
04-12
### Vue 渲染机制概述 Vue 的渲染机制基于虚拟 DOM 技术，通过高效的比较算法来最小化真实 DOM 的操作次数，从而提升性能。以下是关于 Vue 渲染过程的具体分析： --- #### 1. **解析模板** Vue 首先会对模板进行编译处理。这一阶段的主要工作是将 HTML 模板转换成抽象语法树（Abstract Syntax Tree, AST），以便后续生成可执行的 JavaScript 函数。 - 这一过程中，Vue 使用其内置的编译器对模板字符串进行词法分析和语法分析，最终得到一棵描述模板结构的 AST[^1]。 ```javascript // 假设有一个简单的模板 <template> <div>{{ message }}</div> </template> // 编译后的 AST 结构可能如下所示 { type: 'root', children: [ { type: 'element', tag: 'div', props: [], children: [ { type: 'interpolation', content: '{{ message }}' } ] } ] } ``` --- #### 2. **生成渲染函数** 在完成模板到 AST 的转化之后，Vue 将进一步把 AST 转换成一个可以生成虚拟 DOM 树的渲染函数 `render`。这个函数会在每次组件状态变化时被执行，返回新的虚拟 DOM 树。 - 渲染函数的核心作用是以声明式的方式定义视图逻辑，并将其转化为程序化的形式供运行时使用[^1]。 ```javascript function render() { return h('div', {}, this.message); } // 上述代码中的 `h` 是创建虚拟节点的方法 (hyperscript)，类似于 React 中的 JSX ``` --- #### 3. **执行渲染函数并构建虚拟 DOM** 每当组件的状态发生改变时，Vue 会调用对应的渲染函数重新生成一颗全新的虚拟 DOM 树。这一步骤的关键在于利用 JavaScript 对象表示 DOM 结构，而不是直接操作真实的 DOM 元素。 - 此外，在首次挂载组件实例时也会触发一次完整的渲染流程，此时生成的是初始的虚拟 DOM 树[^1]。 --- #### 4. **对比新旧虚拟 DOM 树** 为了减少不必要的重绘或回流开销，Vue 实现了一套高效的 diff 算法用来比较前后两次渲染产生的两棵虚拟 DOM 树之间的差异。 - Diff 算法遵循三个主要原则：同层比较、唯一 key 属性优化以及跨级移动检测限制等策略^。 ```javascript // 差异计算伪代码示意 function patch(oldVnode, newVnode) { if (!oldVnode || !newVnode) { // 如果任一方不存在，则直接替换整个子树 replaceNode(); } else if (sameNodeType(oldVnode, newVnode)) { // 同一层节点类型相同的情况下做属性更新与子节点递归diff updateProperties(); reconcileChildren(); } else { // 类型不同则销毁老节点并新增新节点 destroyOldNodeAndCreateNewOne(); } } ``` --- #### 5. **更新真实 DOM** 最后一步就是依据上一步得出的变化集去修改实际页面上的 DOM 元素。由于之前已经尽可能缩小了改动范围，因此这里涉及的操作量通常较小，极大提升了整体效率。 - 只有那些真正发生变化的地方才会被触达至浏览器层面的真实 DOM 更新动作中去[^1]. --- ### 总结 综上所述，Vue 的渲染机制大致分为以下几个重要环节：从模板解析开始经过多次中间形态变换直至最终落实于屏幕显示之上；期间借助虚拟 DOM 提高了交互响应速度同时也降低了维护成本。 --- 相关问题
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值