Vue和React对比
- 没有和Angular进行对比的原因:Angular提供的更多是一整套解决方案,Vue和React更像是一个开放的生态,可以允许用户最大化的定义、构建我们的项目,灵活开发
- Vue和React目前使用的都是Virtual Dom
Vue和React的一张对比图表:
Speed Vue React Fastest 23ms 63ms Median 42ms 81ms Average 51ms 94ms 95th Perc 73ms 164ms Slowest 343ms 453ms 由此可见,Vue的性能要比React高很多,Vue和React虽然有很多相似之处,但也有不同的点。
Vue
- 模板和渲染函数的弹性选择,我们构建一个模板,函数都是分离的,构建文件非常优雅
- 简单的语法及项目创建
- 更快的渲染速度和更小的体积
React
- 更适用于大型应用,可测试性更好
- 同时适用于Web端和原生App(React提供了React Native)
- 更大的生态圈带来更多的支持和工具(React由Facebook官方提供,社区非常大)
相同点
- 都使用了虚拟Dom实现快速渲染
- 轻量级
- 响应式组件(比如在页面上改变后组件也会实时发生变化)
- 都支持服务器端渲染
- 易于集成路由工具,打包工具以及状态管理工具
- 优秀的支持和社区
虚拟Dom: 传统开发更多的是去操作Dom(文档对象模型),整个HTML/HTML5就是一个文档,通过js操作Dom改变节点、名字,改变节点的文本,这样做非常耗资源,而虚拟Dom是在Js的内存里边构建一个类似Dom的一个对象,去模拟Dom,拼装数据,拼装完成后做一个整体的解析,渲染,一次性插入html Dom片段里边去,形成虚拟Dom,在内存里边操作是非常快的。
Vue核心思想
- Vue本身并不是一个框架
- Vue结合周边生态构成一个灵活的、渐进式的框架
当我们去开发一个多页面的应用程序的时候,可能我们仅仅需要Vue.js、Vue-resource或者axios这样的请求插件,这可能已经能满足大部分的需求,当需要做一个大型的SPA的时候就需要路由插件以及VUEX状态管理、最终的打包构建,需要用什么就加什么。
渐进式框架包含:
- 声明式渲染(Decrarative rendering)
- 组件系统(Component System)
- 客户端路由(Client-Side Routing)
- 大规模状态路由(Large Scale State Management)
- 构建工具(Build System)
核心思想:
- 数据驱动(传统开发js和Dom是耦合的,需要在js里边大量的操作Dom,从长远角度看这是非常好性能的,Vue js里边只是去调接口,查数据,查完数据把数据保存到data里边,更多的是关注怎么把数据存到data里边去,至于data里面的变量怎么跟Dom交互是另外一回事,只需要关注数据层面,不需要考虑怎么改变Dom节点,怎么替换文本,怎么去循环,怎么去添加class等等,数据构建好以后,模板就构建出来了)
组件化 (组件化思想跟RequireJs是不谋而合的,业务量不断增加之后,一个js里边要实现太多的业务,团队协作效率很低,把公共的部分抽离出来形成一个组件,这个组件可以嵌套在需要的地方)
通过MVVM的数据实现自动同步:
View: 即所谓的数据层、视图层、HTML Dom。
ViewModel: 即Vue的实例化对象,通过new一个Vue的实例这个实例就是ViewModel。
Model: 即原生Js监听对象,模型层,当用户发生一个行为去修改某一个Dom元素之后,这个修改的行为会被ViewModel监听,监听到后会去修改模型层的数据,数据通过ViewModel的封装来改变视图。
双向数据绑定?:
主要通过Object.defineProperty()函数
实现
<!Doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模拟数据双向绑定核心</title>
</head>
<body>
<input type="text" id="userName">
<br>
<span id="bindName"></span>
<script>
//声明一个object对象
var obj = {};
//定义一个新的属性(三个参数:对象,名称,描述),在浏览器console输入obj回车会自动触发get,设置obj.userName="others.."会自动触发set,相应视图上也会发生变化。
Object.defineProperty(obj,"userName",{
get: function() {
console.log("get ...");
},
set: function(val) {
console.log("set ...");
document.getElementById("bindName").innerText = val;
document.getElementById("userName").value= val;
}
});
document.getElementById("userName").addEventListener("keyup",function(event){
obj.userName = event.target.value;
})
</script>
</body>
</html>