您的位置：首页 > Web前端 > Vue.js

Vue学习之路之框架对比

2018-11-17 15:57 399 查看

vue框架对比

Vue和React对比

原因

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

速度对比

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

不同点

vue

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

React

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

相同点

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

Vue概况以及核心思想

概况

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

核心思想

  1. 数据驱动

  2. 组件化

  3. 通过MVVM的数据绑定实现自动同步

  4. Vue组件化

  5. 组件树

  6. 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>
阅读更多
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航