浅谈vue 2.0中的虚拟dom概念

概要

作者一直很在意new Vue({ router, render: h => h(App) }).$mount('#app');中render函数的用意，一开始以为只是单纯的把dom树渲染上去，但去官网查阅巩固后，发现虚拟DOM的用意。其实我们平时写的组件也是以虚拟dom的形式渲染上你的网页的。首先，我们知道原生的js中，无限延伸地使用getElementById、createElement之类的方法来操作DOM的，但每一次在DOM上的操作，都是一次繁杂的内在过程，浏览器要对DOM操作进行详细的解析，从而造成了性能的浪费。
那么虚拟DOM是如何做的呢？

主要内容

这是一个html dom树，dom操作都要对其中的元素节点甚至属性节点和文本节点进行操作，这无疑带来了巨大的性能耗费。
而vue virtual-dom的做法

用createElement创建一个虚拟DOM，然后用render函数把虚拟DOM树渲染在其中真的得DOM上，用一个Watcher监听器监听DOM中数据的变化，他包含着哪些信息发生了改变，然后在dom文档上相应得做出改变，在dom上重新渲染，从而减少了大量的dom操作。

虚拟DOM实现

其实虚拟DOM就是用js完成本来在html上的元素创建，所以我们本来所编写的组件，也是一种虚拟dom的形式，如template：‘<h1>virtual dom</h1>’本身就是一个虚拟dom实现
另外一种就是render渲染函数了