【4】「2021」前端总结之Vue篇（一）

秋玄语道
123 阅读6分钟

一、Vue基础

1、MVC，MVP 和 MVVM区别

1）MVC（软件架构模式）

clipboard.png

  • 视图（View）：用户界面。
  • 控制器（Controller）：业务逻辑
  • 模型（Model）：数据层，负责数据保存

各部分之间的通信方式如下。

2.png

  • View 传送指令到 Controller
  • Controller 完成业务逻辑后，要求 Model 改变状态
  • Model 将新的数据发送到 View，用户得到反馈

注：所有通信都是单向的。

2）互动模式

接受用户指令时，MVC 可以分成两种方式。一种是通过 View 接受指令，传递给 Controller。

3.png

另一种是直接通过controller接受指令。 33.png 实际项目往往采用更灵活的方式，以 Backbone.js 为例。

3）实例：Backbone

344.png

  • 用户可以向 View 发送指令（DOM 事件），再由 View 直接要求 Model 改变状态。
  • 用户也可以直接向 Controller 发送指令（改变 URL 触发 hashChange 事件），再由 Controller 发送给 View。
  • Controller 非常薄，只起到路由的作用，而 View 非常厚，业务逻辑都部署在 View。所以，Backbone 索性取消了 Controller，只保留一个 Router（路由器） 。

4）MVP

MVP 模式将 Controller 改名为 Presenter，同时改变了通信方向。

4.png

  • 各部分之间的通信，都是双向的。
  • View 与 Model 不发生联系，都通过 Presenter 传递。
  • View 非常薄，不部署任何业务逻辑，称为"被动视图"（Passive View），即没有任何主动性，而 Presenter非常厚，所有逻辑都部署在那里。

5）MVVM

MVVM 模式将 Presenter 改名为 ViewModel，基本上与 MVP 模式完全一致。

51.png

52.png

53.png ViewModel(视图模型):就是View和Model层的粘合剂，封装业务逻辑处理，封装网络处理，封装数据缓存。唯一的区别是，它采用双向绑定（data-binding）：View的变动，自动反映在 ViewModel，反之亦然。Angular 和 Ember 都采用这种模式。

  • Model：模型层，负责处理业务逻辑以及和服务器端进行交互

  • View：视图层：负责将数据模型转化为UI展示出来，可以简单的理解为HTML页面

  • ViewModel：视图模型层，用来连接Model和View，是Model和View之间的通信桥梁

代码实现思路：（类似实现VUE的一个实现MVVM的库）

54.png

  1. 整体实现分为已下步骤
  2. 实现一个Observer，对数据进行劫持，通知数据的变化（将使用的要点为：Object.defineProperty()方法）
  3. 实现一个Compile，对指令进行解析，初始化视图，并且订阅数据的变更，绑定好更新函数
  4. 实现一个Watcher，将其作为以上两者的一个中介点，在接收数据变更的同时，让Dep添加当前Watcher，并及时通知视图进行update
  5. 实现一些VUE的其他功能（Computed、menthods）
  6. 实现MVVM，整合以上几点，作为一个入口函数

来自：www.ruanyifeng.com/blog/2015/0…

2、Vue的基本原理

当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。

这些 getter/setter 对用户来说是不可见的，但是在内部它们让 Vue 能够追踪依赖，在 property 被访问和修改时通知变更。这里需要注意的是不同浏览器在控制台打印数据对象时对 getter/setter 的格式化并不同，所以建议安装 vue-devtools 来获取对检查数据更加友好的用户界面。

每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据 property 记录为依赖。之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。

image.png

3、双向数据绑定的原理

Vue2.x 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。主要分为以下几个步骤：

  1. 需要observe的数据对象进行递归遍历，包括子属性对象的属性，都加上setter和getter这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化
  2. compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图
  3. Watcher订阅者是Observer和Compile之间通信的桥梁，主要做的事情是: ①在自身实例化时往属性订阅器(dep)里面添加自己 ②自身必须有一个update()方法 ③待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。
  4. MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据model变更的双向绑定效果。

3252.png

Vue3.x是通过proxy（代理）实现的数据的双向绑定,跟Object.defineProperty一样也可以给对象的属性添加两个方法get&set。区别：

  • Object.defineProperty一次性只能给对象的一个属性添加get&set方法
  • Proxy:一次性给对象所有属性都设置get&set方法

4、组件化

  • 降低整个系统的耦合度，在保持接口不变的情况下，我们可以替换不同的组件快速完成需求，例如输入框，可以替换为日历、时间、范围等组件作具体的实现
  • 调试方便，由于整个系统是通过组件组合起来的，在出现问题的时候，可以用排除法直接移除组件，或者根据报错的组件快速定位问题，之所以能够快速定位，是因为每个组件之间低耦合，职责单一，所以逻辑会比分析整个系统要简单
  • 提高可维护性，由于每个组件的职责单一，并且组件在系统中是被复用的，所以对代码进行优化可获得系统的整体升级

5、Vue和React对比

1、 相同点

  • 都有组件化思想
  • 都支持服务器端渲染
  • 都有Virtual DOM（虚拟dom）
  • 数据驱动视图
  • 都有支持native的方案：Vue的weex、React的React native
  • 都有自己的构建工具：Vue的vue-cli、React的Create React App

2、区别

  • 数据变化的实现原理不同。react使用的是不可变数据，而Vue使用的是可变的数据
  • 组件化通信的不同。react中我们通过使用回调函数来进行通信的，而Vue中子组件向父组件传递消息有两种方式：事件和回调函数
  • diff算法不同。react主要使用diff队列保存需要更新哪些DOM，得到patch树，再统一操作批量更新DOM。Vue 使用双向指针，边对比，边更新DOM

6、vue生命周期

1、vue2生命周期 image.png

2、vue3生命周期

image.png

avatar
文章
阅读
粉丝