Vue系列笔记之Vue核心思想

最新推荐文章于 2021-08-11 14:37:29 发布

棠鲤煎雪

最新推荐文章于 2021-08-11 14:37:29 发布

阅读量334

点赞数

分类专栏： pen 文章标签： Vue2

本文链接：https://blog.csdn.net/qq_34159310/article/details/80014980

版权

pen 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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虽然有很多相似之处，但也有不同的点。

Speed	Vue	React
Fastest	23ms	63ms
Median	42ms	81ms
Average	51ms	94ms
95th Perc	73ms	164ms
Slowest	343ms	453ms

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>

棠鲤煎雪

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue系列笔记之Vue核心思想

Vue和React对比没有和Angular进行对比的原因：Angular提供的更多是一整套解决方案，Vue和React更像是一个开放的生态，可以允许用户最大化的定义、构建我们的项目，灵活开发Vue和React目前使用的都是Virtual DomVue和React的一张对比图表： Speed Vue React Fastest 23ms 63ms...
复制链接

扫一扫