【前端知识点】前端设计模式 MVVM和MVC，vue的数据双向绑定原理

MVVM 和 MVC

是两种前端设计模式，用于组织和管理前端代码，实现代码的可维护性和可扩展性。

MVC模式（Model-View-Controller） 是一种将应用程序分为三个核心部件的模式。模型（Model）负责存储应用程序的数据和业务逻辑；视图（View）负责显示用户界面；控制器（Controller）负责处理用户输入并更新模型和视图。MVC模式的目标是将应用程序的不同部分分开，以便更好地组织和管理代码。

MVVM模式（Model-View-ViewModel） 是一种由微软提出的前端设计模式，类似于MVC模式。在MVVM模式中，视图（View）和模型（Model）之间的联系是通过视图模型（ViewModel）来实现的。视图模型是一个中介者，负责在视图和模型之间进行通信和数据绑定。当视图模型中的数据发生变化时，它会通知视图进行更新，从而实现双向数据绑定。

举个例子来说，假设我们有一个简单的Todo List应用程序。在MVC模式中，我们可以将模型定义为包含Todo列表数据和处理业务逻辑的JavaScript对象。我们可以将视图定义为HTML模板，通过模板来显示Todo列表。控制器则负责处理用户输入，例如添加和删除Todo项，并将这些更改反映到模型和视图中。

在MVVM模式中，我们可以将视图定义为HTML模板，但是我们需要添加一个视图模型来实现数据绑定。视图模型包含所有Todo列表数据，并定义了用于处理用户输入的方法。当用户添加或删除Todo项时，视图模型会自动更新Todo列表