Vue学习之路之框架对比

vue框架对比

Vue和React对比

Vue和React对比

原因

Angular提供的更多是一整套解决方案，而vue更像一个生态。
Vue和React目前都是用了Virtual Dom（虚拟节点）

速度对比

速度	vue	react
最快	23ms	63ms
中值	42ms	81ms
平均	51ms	94ms
95th Prec	73ms	164ms
最慢	343ms	453ms

不同点

vue

模板和渲染函数的弹性选择
简单的语法及项目创建
更快的渲染速度和更小的体积

React

更适用于大型应用和更好的可测试性
同时适用于Web端和原生App
更大的生态圈带来的更多支持和工具

相同点

利用虚拟DOM实现快速渲染
轻量级
响应式组件
服务器端渲染
易于集成路由工具，打包工具以及状态管理工具
优秀的支持和社区

Vue概况以及核心思想

概况

Vue本身并不是一个框架
Vue结合周边生态构成一个灵活的、渐进式的框架
声明式渲染——>组件系统——>客户端路由——>大规模状态管理——>构建工具

核心思想

数据驱动
组件化
通过MVVM的数据绑定实现自动同步
Vue组件化
组件树
Vue实现双向数据绑定的原理
使用Obeject.defineProperty（）方法

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<input type="text" id="a">
	<span id="b"></span>
	<script>
		var obj ={};
		Object.defineProperty(obj,'hello',{
			set:function(newVal){
				document.getElementById('a').value = newVal;
				document.getElementById('b').innerHTML = newVal;
				console.log(newVal)

			}
		});

		document.addEventListener('keyup',function(e){
			obj.hello =e.target.value;


		})
	</script>
</body>
</html>