网站建设需要用到的软件,免费企业网站,牡丹江信息网0453免费发布信息,创意平面设计图课堂笔记
什么是 MVVM #xff1f;
MVVM 是一种架构模式#xff0c;它最初是由微软的两位工程师在 2005 年的时候所提出的。
Model#xff1a;Model代表的是你的数据View#xff1a;视图#xff0c;直接和用户打交道的ViewModel#xff1a;ViewModel 是 View 和 Model…课堂笔记
什么是 MVVM
MVVM 是一种架构模式它最初是由微软的两位工程师在 2005 年的时候所提出的。
ModelModel代表的是你的数据View视图直接和用户打交道的ViewModelViewModel 是 View 和 Model 之间的桥梁。View 和 ViewModel 之间会进行一个数据的绑定。当用户在 View 中进行操作的时候ViewModel 会去更新 Model 的状态。同理当 Model 数据发生改变的时候ViewModel 也会通知 View让 View 自动显示最新的内容。
MVVM 最早期并非是用于前端的但是随着前端的火热慢慢也引入了这种架构模式。
需要说一下Vue、React 这些现代框架并非第一批使用 MVVM 架构模式的框架在此之前还有 knockout.js 以及 ember.js。
这里要强调一下Vue 是 MVVM 架构模式。但是 React 并非 MVVM 架构模式。
在 Vue 中有明确的哪个部分是 M哪个部分是 V哪个部分是 VM。
在 React 里面没有明确的 VM 部分采用的是 Flux 的架构模式是单向数据流。
作为现代前端框架有如下 4 个共有的特点
状态管理支持组件化开发有配套的前端路由库有配套的状态管理库
接下来我们来重点对比一下 Vue 和 React 这两个框架的异同。
视图描述
Vue 使用的是模板进行描述 React 使用的是 JSX 进行描述
不同的描述方式体现了两个团队不同的设计哲学。
React团队认为UIHTML本质上和逻辑JS存在耦合部分。作为前端开发工程师JS 是用得最多的因此它们考虑屏蔽 HTML全部使用 JS 来描述 UI这样子就可以让 UI 和 逻辑配合更紧密。因此他们设计出了 JSX 出发的角度是从前端出发的。
而模板刚好相反是从后端的角度出发的。本质上是扩展了 HTML在 HTML 中加入了相关逻辑的语法。
总结一下
JSX 的出发点既然前端使用 JS描述逻辑就扩展 JS 语法让它能够描述 UI。前端模板的出发点前端框架使用 HTML 来描述 UI那就扩展 HTML 语法让它能够书写一定的逻辑
虚拟 DOM
关于虚拟 DOMReact 团队官方的定时是描述真实 DOM 的一种方式。虚拟 DOM 是一种理念实现的方式可以是多种多样的只要你能够通过一种方式来描述真实 DOM那么就是虚拟 DOM 的一种实现方案。
一说到虚拟 DOM有人就会误认为虚拟 DOM 一定比原生操作 DOM 快这种认识也是错的。
假设我就是单纯的创建一个 DOM
let newP document.createElement(p);
document.body.appendChild(newP);这里的话原生 DOM 的方式一定是比虚拟 DOM 更快的。因为即便是虚拟 DOM最终也是要去操作真实的 DOM。
根据 React 团队的研究大家平时在操作 DOM 的时候比起使用原生的 API 去操作 DOM更喜欢使用 innerHTML
document.body.innerHTML pasdasdasd/p那么此时使用 innerHTML 就涉及到两个层面的计算
JS 层面解析字符串DOM 层面创建对应的 DOM 节点
innerHTML虚拟DOMJS层面解析字符串创建JS对象DOM层面创建对应的DOM节点创建对应的DOM节点
因此可以看出在第一次创建 DOM 节点的时候虚拟 DOM 和传统的 innerHTML 的方式至少都有两个层面的计算。
虚拟 DOM 真正发挥威力的时候是在更新的时候。innerHTML 需要重新赋值重新赋值意味着之前创建的 DOM 节点全部销毁。但是虚拟 DOM 会通过 diff 算法只更新必要的 DOM 节点
innerHTML虚拟DOMJS层面解析字符串创建JS对象DOM层面销毁原来所有的DOM修改必要的DOM节点DOM层面创建对应的DOM节点
虚拟 DOM 还有一个好处 多平台渲染的抽象能力。虚拟 DOM 可以对接不同的宿主环境实现一个框架多端渲染。 React 为什么要从以前的 Stack 架构改为 Fiber 架构 Vue 是否需要 Fiber 架构
要想把这两个问题搞清楚首先需要搞清楚 Vue 和 React 设计上面的区别。
React 是否是响应式Vue 是否是响应式
React 不是响应式设计而 Vue 是响应式设计这意味 React 中当状态发生改变后React 不知道是哪个改变了需要通过 diff 算法计算后才知道。而 Vue 是响应式的意味着一旦有数据发生变化Vue 是知道的。
正因为这两种选择的不同导致了两种框架在后面的发展中产生了巨大的区别。
React 这种设计每次需要计算整颗虚拟 DOM这个是属于 JS 层面的计算虽然速度很快但是一旦你的虚拟 DOM 数的体量很大还是会消耗很长的时间。这意味浏览器本来要绘制下一帧了但是你还在执行 JS又不能打断。
从 React16 开始官方引入了 Fiber 的概念使用链表的方式来描述 UI之所以采用链表是因为中途能够打断。
官方两种架构的对比示例https://claudiopro.github.io/react-fiber-vs-stack-demo/
Vue 不需要 Fiber 架构。因为 Vue 不存在像 React 一样要计算整颗虚拟 DOM 树这种要消耗大量时间的计算。Vue 是响应式的Vue 本身也遇到了自身的瓶颈那就是 watcher 太多了。
Vue 的解决方案就是引入虚拟 DOM将虚拟 DOM 和响应式结合了起来也就是改变了响应式的粒度。
