你不知道MVVM是啥怎么学的前端？

mCell
123 阅读6分钟

MVVM（Model-View-ViewModel）是一种软件设计模式，它促进了界面（UI）和业务逻辑的分离，主要用于构建用户界面。

MVVM是啥

Model（模型）

  • 模型代表应用程序的数据逻辑，如数据库记录。
  • 它封装了数据访问和业务逻辑，不直接与UI交互。
  • 当数据变化时，模型通知ViewModel。

或者简单理解为存储数据的地方。

View（视图）

  • 视图是用户界面的一部分，展示给用户看。
  • 它通常是由XAML（在.NET环境中）或HTML/CSS（在web环境中）定义的。
  • 视图绑定到ViewModel上的属性和命令，当ViewModel更新时，视图自动更新。
  • 视图不直接与模型交互。

简单理解为可视化界面，就是UI啦

ViewModel（视图模型）

  • ViewModel作为视图和模型之间的桥梁。
  • 它公开数据对象和命令来管理视图的状态和事件。
  • ViewModel通过数据绑定与View通信，View通过事件和命令与ViewModel通信。
  • ViewModel将模型的数据转换为适合视图显示的格式。
  • 它也处理用户交互，如按钮点击，并将这些交互转换为模型的操作。

MVVM运行过程

  1. ViewModel作为视图和模型之间的桥梁。它公开数据对象和命令来管理视图的状态和事件。
  2. ViewModel通过数据绑定与View通信，View通过事件和命令与ViewModel通信。
  3. ViewModel将模型的数据转换为适合视图显示的格式。
  4. 它也处理用户交互，如按钮点击，并将这些交互转换为模型的操作。

前端框架和MVVM的关系

前端框架和MVVM（Model-View-ViewModel）之间的关系主要体现在前端框架如何实现MVVM模式，以及它们如何提供工具和库来帮助开发者构建遵循MVVM架构的应用程序。

前端框架，如Angular、Vue.js和Knockout.js，提供了实现MVVM模式的机制。这些框架通常包括以下特性：

  1. 数据绑定：前端框架通常提供数据绑定机制，允许开发者将视图模型（ViewModel）的属性绑定到视图（View）的元素上。这样，当ViewModel的属性发生变化时，视图会自动更新，反之亦然。
  2. 依赖注入：一些框架支持依赖注入，这是一种设计模式，允许开发者将服务或依赖项注入到ViewModel中，从而提高代码的模块化和可测试性。
  3. 指令 /组件：前端框架允许开发者定义自定义指令或组件，这些是可重用的UI元素，它们可以有自己的逻辑和视图，并且可以轻松地集成到应用程序中。
  4. 事件处理：框架通常提供了一种方式来处理用户事件，如点击、输入等，这些事件可以触发ViewModel中的命令或方法。
  5. 路由：现代前端框架通常还包括路由库，允许开发者管理应用程序中的页面导航和视图切换。
  6. 状态管理：对于复杂的应用程序，一些框架提供了状态管理的解决方案，如Vuex（Vue.js）、ngrx（Angular），这些解决方案帮助开发者以可预测的方式管理应用程序的状态。

vue中的MVVM

在Vue.js中，MVVM模式被广泛应用，Vue通过自己的实现方式来确保数据在Model和View之间的同步。

下面是如何在Vue中利用MVVM模式更新UI界面的详细步骤：

  1. 定义ViewModel： 在Vue中，每个组件实例就是一个ViewModel。它负责将Model（即数据）和View（即DOM）连接起来。在创建一个Vue实例时，你可以通过data函数返回一个对象来定义Model部分的数据。
var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
});
  1. 数据绑定： Vue使用了一种双向数据绑定机制，称为v-model，它可以在输入元素（如<input>、<textarea>、<select>）上创建数据的双向绑定。当用户在输入框中输入内容时，ViewModel中的数据会实时更新，反之亦然。
<div id="app">
  <input v-model="message">
  <p>The message is: {{ message }}</p>
</div>
  1. 声明式渲染： Vue.js使用声明式渲染来描述UI界面的状态。你可以使用Mustache语法（{{ }}）或其他指令（如v-bind、v-for、v-if等）来绑定ViewModel中的数据到视图上。
<div id="app">
  <p>{{ message }}</p>
</div>

  1. 响应式系统： 当你在ViewModel的data中定义数据时，Vue会使用其响应式系统对这些数据进行追踪。它通过对象方法Object.defineProperty()来实现对属性的getter和setter的劫持，从而能够侦听数据的变化。

    1. 依赖收集：当组件渲染时，Vue会记录所有被访问的属性，这些属性被视为依赖。每个属性都关联一个观察者（Watcher），当属性值发生变化时，会通知所有依赖于该属性的观察者。
    2. 变更检测：当你修改ViewModel中的数据时，Vue的响应式系统会自动检测到变化，并通知所有依赖于该数据的视图进行更新。

  2. 更新 DOM： 当ViewModel中的数据发生变化时，Vue会触发视图的更新过程。这个过程是通过虚拟DOM来优化的。Vue首先会构建一个虚拟DOM树，当数据变化时，它会重新渲染这个虚拟DOM树，并与上一次的虚拟DOM树进行比较（diff算法），只有发生变化的部分才会被实际更新到真实的DOM中。

vue3和vue2中的响应式

Vue 3引入了新的响应式系统，与Vue 2的响应式系统相比有显著的改进。

  1. Vue 2的响应式系统：

    1. 使用Object.defineProperty()来劫持对象的属性。
    2. 对象的每个属性都有一个对应的getter和setter，用于追踪依赖和触发更新。
    3. 数组的变化侦测是通过重写数组方法（如push、pop、shift等）来实现的。
    4. 对于对象的新增属性和删除属性，以及数组的索引和长度的变化，需要使用Vue.set和Vue.delete方法来确保响应性。
    5. 对象的属性必须在创建Vue实例时就声明，否则新增的属性不会是响应式的。

  2. Vue 3的响应式系统：

    1. 使用ES6的Proxy特性来实现响应式，这允许Vue 3拦截对象的所有操作，包括属性读取、写入、枚举、函数调用等。
    2. Proxy可以直接处理数组和嵌套对象，不需要像Vue 2那样对数组方法进行特殊处理。
    3. Proxy可以自然地侦测到对象属性的添加和删除，以及数组索引和长度的变化，因此不再需要Vue.set和Vue.delete。
    4. 性能提升：Vue 3的响应式系统在初始化和运行时都有更好的性能，因为Proxy可以直接处理更多的操作，而不需要为每个属性设置getter和setter。
    5. 更好的树摇（tree-shaking）支持：由于Vue 3的响应式系统是模块化的，这意味着你可以只导入你的应用程序实际需要的部分，从而减少最终打包体积。

  3. 其他改进：

    1. Vue 3引入了Composition API，这是一个新的编程范式，与Options API并存。它允许开发者更灵活地组合和重用逻辑，同时也使得响应式逻辑的编写更加直观和可维护。
    2. Vue 3的响应式系统更加灵活，可以更好地支持自定义响应式系统和外部库的集成。

总结

真的要多看MDN啊。。。。。。

avatar
文章
阅读
粉丝