MVVM及Vue 中数据双向绑定实现原理

最新推荐文章于 2021-11-27 20:59:13 发布

ZhaoYLi

最新推荐文章于 2021-11-27 20:59:13 发布

阅读量1.5k

点赞数 1

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/miss_zxm/article/details/88875095

版权

本文探讨了MVVM模式，详细解释了其核心组成部分：Model、View和ViewModel，以及ViewModel如何作为数据双向绑定的桥梁。接着，深入解析了Vue中数据双向绑定的工作原理，包括使用Object.defineProperty设置getter和setter，以及数据变更时视图和模型间的同步过程。最后，对比介绍了MVC模式，强调其通信的单向性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、MVVM

１、定义

MVVM是Model - View - ViewModel的简写。即模型－视图－视图模型。
①　Model：指后端传递的数据，如Object、Array等。
②　View：指页面视图。
③　ViewModel：是mvvm模式的核心，是链接model和view的桥梁。它有两个方向：一是将模型转化成视图，即将后端传递的数据转化为所看到的页面。二是将视图转化成模型，即通过DOM事件监听将所看到的页面转化成后端数据。这两个方向都实现的我们称之为数据的双向绑定。（在vue中指vue实例化对象）

２、流程图

在这里插入图片描述

总结：在MVVM模式下，view与model之间是不能直接通信的，它们通过ViewModel来通信，ViewModel通常要实现一个observer观察者，当数据发生变化时，ViewModel能够监听到数据的这种变化，然后通知到对应的视图做自动更新，而当用户操作视图时，ViewModel也能监听到视图的变化，然后通知数据做改动，以此就实现了数据的双向绑定。