Vue 源码学习—Virtual DOM(虚拟 DOM)

Virtual DOM

Virtual DOM是什么
真实DOM成员
引入原因
作用

Virtual DOM是什么

定义: 普通的js对象来描述DOM对象，不是真实的DOM，顾名思义，称为虚拟DOM

真实DOM成员

let _el = document.querySelector('#app')let _s = ''for (const key in _el) {_s += key + ','}console.log(_s, '#app')

使用Virtual DOM描述真实的DOM,如下示例：

{sel: 'div',data: {},children: undefined,text: 'Hello,this is Virtual-DOM',elm: undefined,key: undefined
}

引入原因

手动操作DOM较麻烦(需要手写原生js处理DOM元素逻辑)，需考虑浏览器的兼容性问题，虽然有jquery等库简化DOM操作，但是随着项目的复杂度，DOM操作复杂上升
为了简化DOM的复杂度操作出现了MVVM框架，MVVM框架解决了视图与状态的同步问题
为了简化视图的操作可以使用模板引擎，但是模板引擎没有解决跟踪状态变化的问题
Virtual DOM可以当状态改变时不需要立即更新DOM，只需要创建一个虚拟树来描述DOM，Virtual DOM内部使用diff算法有效更新DOM

依照Virtual-DOM(https://github.com/Matt-Esch/virtual-dom)官方说法：

手动 DOM 操作很麻烦，而且很难跟踪之前的 DOM 状态。这个问题的一个解决方案是编写你的代码，就像你在状态改变时重新创建整个 DOM 一样。当然，如果您每次应用程序状态更改时都重新创建整个 DOM，您的应用程序将非常缓慢并且您的输入字段将失去焦点。

virtual-dom 是一组模块，旨在为您的应用程序提供一种表示 DOM 的声明性方式。因此，无需在应用程序状态更改时更新 DOM，只需创建一个虚拟树或 VTree，它看起来就像您想要的 DOM 状态。然后，virtual-dom 将弄清楚如何在不重新创建所有 DOM 节点的情况下有效地使 DOM 看起来像这样。

virtual-dom 允许您通过创建视图的完整 VTree 然后有效地修补 DOM 以使其看起来与您描述的完全一样，从而在状态发生变化时更新视图。这导致将手动 DOM 操作和先前状态跟踪排除在您的应用程序代码之外，促进了 Web 应用程序的干净和可维护的呈现逻辑。

作用

维护视图和状态的关系
复杂视图情况下提升渲染性能
除了渲染DOM以外，还可以实现SSR(Nuxt.js/Next.js)、原生应用(Weex/React Native)、小程序(mpvue/uni-app)等

原创申明：

本人博客：https://blog.csdn.net/weixin_44617364
转载说明：与我说明，务必注明来源，附带本人博客链接，多谢！

Vue 源码学习—Virtual DOM(虚拟 DOM)相关推荐

Vue源码学习 - 组件化一 createComponent
Vue源码学习 - 组件化一 createComponent 组件化 createComponent 构造子类构造函数安装组件钩子函数实例化 VNode 总结学习内容和文章内容来自黄轶老师黄 ...
Vue源码学习 - 准备工作
Vue源码学习 - 准备工作准备工作认识Flow 为什么用 Flow Flow 的工作方式类型推断类型注释数组类和对象 null Flow 在 Vue.js 源码中的应用 flow实践总 ...
VUE源码学习第一篇--前言
一.目的前端技术的发展,现在以vue,react,angular为代表的MVVM模式以成为主流,这三个框架大有三分天下之势.react和angular有facebook与谷歌背书,而vue是以一己之 ...
vue源码学习--vue源码学习入门
本文为开始学习vue源码的思路整理.在拿到vue项目源码的之后看到那些项目中的文件夹,会很困惑,不知道每个文件夹内的世界,怎么变换,怎样的魔力,最后产生了vue框架.学习源码也无从学起.我解决了这些困 ...
Vue源码学习之Computed与Watcher原理
前言 computed与watch是我们在vue中常用的操作,computed是一个惰性求值观察者,具有缓存性,只有当依赖发生变化,第一次访问computed属性,才会计算新的值.而watch则是当 ...
Vue源码学习 - 组件化(三) 合并配置
Vue源码学习 - 组件化(三) 合并配置合并配置外部调用场景组件场景总结学习内容和文章内容来自黄轶老师黄轶老师的慕课网视频教程地址:<Vue.js2.0 源码揭秘>. 黄轶 ...
Vue源码学习之initInjections和initProvide
Vue源码学习之initInjections和initProvide 在进行源码阅读之前先让我们了解一个概念:provide/inject,这个是Vue在2.2.0版本新增的一个属性,按照Vue官网的 ...
[Vue源码分析] Virtual DOM
最近小组有个关于vue virtual dom的分享会,提前准备一下- 读前须知: 本文章涉及源码版本为Vue 2.5.2,文中涉及到源码部分,解释直接写在源码中(中文部分为本人添加),截图尽量放完整 ...
【Vue.js源码解析二】-- 虚拟 DOM
前言笔记来源:拉勾教育大前端高薪训练营阅读建议:建议通过左侧导航栏进行阅读虚拟 DOM 基本介绍什么是虚拟 DOM 虚拟 DOM(Virtual DOM) 是使用 JavaScript 对象 ...

Vue 源码学习—Virtual DOM(虚拟 DOM)

Virtual DOM

Virtual DOM是什么

真实DOM成员

引入原因

作用

Vue 源码学习—Virtual DOM(虚拟 DOM)相关推荐

最新文章

热门文章