MVVM响应式

小暖单

于 2024-10-18 14:46:33 发布

阅读量1k

点赞数 34

CC 4.0 BY-SA版权

文章标签： vue.js 前端

本文链接：https://blog.youkuaiyun.com/tosiya/article/details/143053344

MVVM（Model-View-ViewModel）是一种软件架构模式，广泛应用于前端开发框架中，尤其是在 Vue.js 和 Angular 中。MVVM 模式实现了数据的双向绑定和响应式更新，使得视图和模型之间的关系更加清晰和易于维护。

一、MVVM 的主要组成部分

Model（模型）：

代表应用程序的数据和业务逻辑。它通常是一个普通的 JavaScript 对象或者类，包含数据属性和方法。
例如，一个表示用户的模型可能有name、age等属性和updateInfo等方法。
在 Vue.js 中，数据通常存储在组件的data选项中，这些数据就是模型的一部分。

View（视图）：

是用户界面的可视化部分，通常由 HTML、CSS 和 JavaScript 组成。视图负责展示数据和接收用户输入。
在 Vue.js 中，视图是由模板语法和组件组成的。模板语法用于将数据绑定到 HTML 元素上，组件则用于封装可复用的 UI 部分。

ViewModel（视图模型）：

是连接模型和视图的桥梁。它将模型中的数据转换为视图可以理解的格式，并将用户在视图中的操作转换为对模型的操作。
ViewModel 通常包含数据绑定、命令和事件处理等功能。在 Vue.js 中，组件的实例就是 ViewModel 的一部分，它负责管理组件的状态和行为。

二、响应式原理

数据劫持：

在 MVVM 框架中，通常使用数据劫持的技术来实现响应式更新。数据劫持是指在访问或修改对象的属性时，自动触发一些特定的操作。
在 Vue.js 中，使用Object.defineProperty()方法来实现数据劫持。这个方法可以在对象上定义一个新的属性，并指定该属性的 getter 和 setter 方法。当属性被访问时，会触发 getter 方法；当属性被修改时，会触发 setter 方法。
例如：

   const data = {
     message: 'Hello World',
   };

   const observer = new Observer(data);

   function Observer(obj) {
     Object.keys(obj).forEach((key) => {
       let value = obj[key];
       Object.defineProperty(obj, key, {
         enumerable: true,
         configurable: true,
         get() {
           console.log(`Getting ${key}: ${value}`);
           return value;
         },
         set(newValue) {
           console.log(`Setting ${key}: ${newValue}`);
           value = newValue;
         },
       });
     });
   }

在这个例子中，定义了一个Observer函数，它接受一个对象作为参数，并使用Object.defineProperty()方法对对象的每个属性进行数据劫持。当属性被访问或修改时，会打印出相应的日志。

依赖收集和发布订阅模式：

为了实现响应式更新，MVVM 框架通常使用依赖收集和发布订阅模式。当数据发生变化时，框架会自动通知依赖该数据的视图进行更新。
在 Vue.js 中，当一个组件的模板中使用了某个数据时，Vue 会将该组件作为依赖添加到该数据的依赖列表中。当数据发生变化时，Vue 会遍历该数据的依赖列表，并通知每个依赖的组件进行更新。
例如：

   const data = {
     message: 'Hello World',
   };

   const observer = new Observer(data);

   function Observer(obj) {
     let dep = new Dep();
     Object.keys(obj).forEach((key) => {
       let value = obj[key];
       Object.defineProperty(obj, key, {
         enumerable: true,
         configurable: true,
         get() {
           if (Dep.target) {
             dep.depend();
           }
           return value;
         },
         set(newValue) {
           value = newValue;
           dep.notify();
         },
       });
     });

     function Dep() {
       this.subscribers = [];
     }

     Dep.prototype.depend = function () {
       Dep.target.addDep(this);
     };

     Dep.prototype.notify = function () {
       this.subscribers.forEach((subscriber) => {
         subscriber.update();
       });
     };
   }

   class Watcher {
     constructor(obj, key, callback) {
       Dep.target = this;
       this.callback = callback;
       this.value = obj[key];
       Dep.target = null;
     }

     update() {
       const oldValue = this.value;
       this.value = this.getter();
       this.callback(this.value, oldValue);
     }
   }

在这个例子中，定义了一个Observer函数，它接受一个对象作为参数，并使用Object.defineProperty()方法对对象的每个属性进行数据劫持。同时，定义了一个Dep类，表示依赖项，和一个Watcher类，表示观察者。当属性被访问时，会将当前的观察者添加到依赖项的订阅者列表中；当属性被修改时，会通知所有的订阅者进行更新。

三、在 Vue.js 中的应用

数据绑定：

在 Vue.js 中，可以使用模板语法将数据绑定到 HTML 元素上。当数据发生变化时，绑定的数据会自动更新到视图上。
例如：

   <template>
     <div>{{ message }}</div>
   </template>

   <script>
   export default {
     data() {
       return {
         message: 'Hello World',
       };
     },
   };
   </script>

在这个例子中，使用{{ message }}将数据message绑定到一个div元素上。当message的值发生变化时，div元素中的内容会自动更新。

双向数据绑定：

Vue.js 还支持双向数据绑定，即视图中的输入框等元素的值可以自动同步到数据中，反之亦然。
例如：

   <template>
     <input v-model="message" />
   </template>

   <script>
   export default {
     data() {
       return {
         message: 'Hello World',
       };
     },
   };
   </script>