vue中的虚拟dom与真实dom的区别及vuex中的mapState实现原理

虚拟dom(VNode),假的,不是真实的dom

真实的DOM在浏览器通过dom.api操作的,复杂的对象

虚拟DOM:可以通过this.$slots.default查看

真实的dom是一个对象,它的属性非常多,在浏览器中做dom操作,会比较消耗性能

虚拟dom是一个对象,它的属性相比较于真实的dom就比较少---用少量的属性描述一个dom,无法在浏览器中直接显示

有两点好处:

1.虚拟dom比真实dom体积小,操作是相对来说消耗性能少,如果在页面中删除一个dom,会引起重绘,影响后边元素的布局

1):虚拟Dom不会进行回流和重绘操作

2):虚拟dom进行频繁的修改,然后一次性比较并修改真实DOM中需要改的部分,最后并在真实DOM中进行回流和重绘,减少过多DOM节点的回流和重绘

3)真实Dom频繁的回流和重绘效率非常低

2.虚拟dom可能跨端(在服务器端也可以使用vue技术),跨平台,如果直接操作真实的dom,则与浏览器强制绑定在一起,vue就是去更多的可能
 

mapState的实现原理：

源码中用到了normalizeNamespace方法。这个方法的作用是返回一个函数，接受namespace和map作为参数。
然后mapState方法其实就等于normalizeNamespace方法最后返回的fn(namespace, map)。

源码中有函数会先将参数中的states转化为正常化的Map，然后进行遍历，重新定义了res对象，将遍历Map的key值对应的value赋给res对象，最后这个函数返回了res对象。