vue 如何生成一个dom元素_vue 学习心得—

代码编辑不够友好，为更好一点的阅读体验，还是推荐原文链接：https://www.yuque.com/longtengsong/blog/bu09tk

DOM 树是 vue 在构建实例的时候，通过 $mount 函数创建出来的。那么 DOM 创建过程是怎样的呢？

步骤一：执行 render 函数

$mount 函数执行时，实际调用的是： vm._update(vm._render(), hydrating) 。

从上图中可以看到，模版被编译为一个render函数，render 函数执行最终目的就是将 template 转换为 vnode 。

步骤二：执行 update 函数

从 _update 源码可以看出，如果初次渲染，即 initial render，则走 vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false /* removeOnly */) 这个分枝，而 vm.$el = vm.__patch__(prevVnode, vnode) 则是组件更新时执行的分枝。这里我们先专注于初次渲染的分枝。

通过 Vue.prototype.__patch__ 函数定义，层层查找，最终 patch 进入我们视野，通过分析 createElm 便是DOM 创建的关键函数。

注意，我们目前仅仅探究 vue 构建 DOM 的流程，因此仅作最简单的考虑，上述代码过滤了组件渲染，跨平台、警告信息等非关键代码。

很明显， nodeOps.createElement(tag, vnode) 将 vnode 创建为 DOM 元素，并保存为 vnode.elm 变量。最后通过 insert 将当前创建的DOM元素插入父元素中。但这之前，通过 createChildren 就是递归调用 createElm，让 children 中的 vnode 也经过相同的转换流程。可以想象，最终 template 中的根结点在插入 body 中时，其 DOM 元素已经是一个完整的 DOM 树了。

由于 createChildren 在 insert 函数之前执行，也就决定了子元素生命周期函数 mounted 先于父元素的 mounted 执行。同理也可推断子元素与父元素相同的其他生命周期函数的执行顺序。

总结

结合new Vue 发生了什么这篇文章，应该能够整体把握 vue 的数据驱动流程。这里所指数据驱动同前端领域大家谈到的数据驱动一样，就是数据与用户界面(DOM)的一种映射算法。有了这种映射算法，就不用去关心具体的DOM创建、修改、删除等操作，只需要关心业务逻辑带来的数据变化。

而了解DOM树如何被构建，就是要学习 vue 的数据驱动算法。下面以一张图来总结该算法的流程

vue 如何生成一个dom元素_vue 学习心得——DOM树如何被构建相关推荐

Java入门1.2.3—一个老鸟的Java学习心得
Java入门1.2.3-一个老鸟的Java学习心得基本信息作者: 臧萌出版社:清华大学出版社 ISBN:9787302217831 上架时间:2010-3-30 出版日期:2010 年3月 ...
java老鸟123怎么样_java入门123——一个老鸟的java学习心得.doc
java入门123--一个老鸟的java学习心得 java入门123--一个老鸟的java学习心得篇一:java初学者学习心得学习Java心得体会学习了一学期的Java课程,觉得是该总结自己的心 ...
java入门123 pdf下载_Java入门123：一个老鸟的Java学习心得 pdf_IT教程网
资源名称:Java入门123:一个老鸟的Java学习心得 pdf 第1篇 Java语言基本语法第1章让自己的第一个Java程序跑起来第2章搭建自己的集成开发环境第3章 Java中的基本数据类 ...
java入门123pdf二维码pdf_Java入门123：一个老鸟的Java学习心得 pdf
资源名称:Java入门123:一个老鸟的Java学习心得 pdf 第1篇 Java语言基本语法第1章让自己的第一个Java程序跑起来第2章搭建自己的集成开发环境第3章 Java中的基本数据类 ...
Java入门123：一个老鸟的Java学习心得（二维码版）
Java入门123:一个老鸟的Java学习心得(二维码版)清华大学出版社 Java入门123--一个老鸟的Java学习心得(二维码版)充分考虑了初学Java的种种困难,讲解细致入微,抽丝剥茧,层层推进 ...
vue 判断对象不为空_Vue 学习笔记（二）：实例
创建一个实例每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({ // 选项}) 虽然没有完全遵循 MVVM 模型,但是 Vue 的设计 ...
vue动态生成表单元素
前几天接了一个需求,需要动态生成一个表单数据,然后提交,提交完数据后.通过编辑按钮进入时,需要进行数据回填. 一.页面展示: I. 没生成表单前的状态 Vue-UEedit UEedit II. 单机 ...
虚拟dom_通过编写简易虚拟DOM，来学习虚拟DOM 的原理
茫茫人海中与你相遇相信未来的你不会很差作者:前端小智来源:https://segmentfault.com/a/1190000037599333 要构建自己的虚拟DOM,需要知道两件事.你甚至不 ...
jq在html中添加dom元素,使用jQuery添加DOM元素的最佳方法
所以我已经看到了三种向页面添加html/DOM元素的方法.我很好奇他们每个人的利弊是什么. 1 - 传统的JavaScript 我相信直接的JS方法是通过构造每个元素,设置属性,然后附加它们.例: v ...

vue 如何生成一个dom元素_vue 学习心得——DOM树如何被构建

vue 如何生成一个dom元素_vue 学习心得——DOM树如何被构建相关推荐

最新文章

热门文章