vue和react对比(详解)
放两张图镇压小妖怪
本文先讲共同之处，
再分析区别
大纲在此：
共同点：
a、都使用虚拟dom
b、提供了响应式和组件化的视图组件
c、注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库。
区别：
a、优化
b、HTML&CSS
c、构建工具
d、数据绑定
e、状态管理
f、路由
g、渲染性能
h、数据更新
i、开发模式及规模
j、使用场景
k、服务器端渲染（SSR）
l、扩展(高阶组件和mixin)
1、都使用虚拟DOM
vue：Vue在2.0版本引入了vdom。其vdom是基于 snabbdom 库所做的修改。snabbdom是一个开源的vdom库。snabbdom的主要作用就是将传入的JS模拟的DOM结构转换成虚拟的DOM节点。先通过其中的 h函数 将JS模拟的DOM结构转换成虚拟DOM之后，再通过其中的 patch函数 将虚拟DOM转换成真实的DOM渲染到页面中。为了保证页面的最小化渲染，snabbdom引入了 Diff算法 ，通过Diff算法找出前后两个虚拟DOM之间的差异，只更新改变了的DOM节点，而不重新渲染为改变的DOM节点。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title></head><body> <p></p> <button>change</button> <!-- 引入snabbdom库，先不必纠结为什么这样引入，以及每个文件的作用。 --> <script src="http://cdn.bootcss.com/snabbdom/0.7.1/snabbdom.js"></script> <script src="http://cdn.bootcss.com/snabbdom/0.7.1/snabbdom-class.js"></script> <script src="http://cdn.bootcss.com/snabbdom/0.7.1/snabbdom-props.js"></script> <script src="http://cdn.bootcss.com/snabbdom/0.7.1/snabbdom-style.js"></script> <script src="http://cdn.bootcss.com/snabbdom/0.7.1/snabbdom-eventlisteners.js"></script> <script src="http://cdn.bootcss.com/snabbdom/0.7.1/h.js"></script> <script> //定义patch函数 var patch = snabbdom.init([ snabbdom_class, snabbdom_props, snabbdom_style, snabbdom_eventlisteners ]) //定义h函数 var h = snabbdom.h; //生成一个vnode var vnode = h('ul#list',{},[ h('li.item',{},['Item 1']), h('li.item',{},['Item 2']), ]) //console.log(vnode); //获取container var container = document.getElementById('container'); patch(container,vnode);//初次渲染 var btn = document.getElementById('btn-change'); btn.onclick = function() { var newVnode = h('ul#list',{},[ h('li.item',{},['Item 1']), h('li.item',{},['Item B']), h('li.item',{},['Item 3']), ]) patch(vnode,newVnode);//再次渲染 vnode = newVnode;//将修改后的newVnode赋值给vnode } </script> </body> </html>