JS读书笔记30天 - Day28 MVVM概念

MVC与MVVM

MVC

MVC是一个前後端架构，分为三个部分：

视图（View），为画面显示的地方。

控制器（Controller），控制接收需求并向模型提取资料，做到转接的功能。

模型（Model），和资料库对接，收到提取资料要求後向资料库提取资料。

MVVM

View（视图）：为画面显示的部分，会做画面渲染的行为，而其他两个部分都不做渲染的动作。

ViewModel（资料系结器）：缩写中的VM部分，和画面绑定的地方，撰写程序码时不会写到这个部分，资料变动时，会控制视图部分作出更动，可以说资料与画面的更新，都需要透过资料系结器来处理。

Model（资料状态）：资料处理的地方，一般来说，MVVM架构下，只会处理这个部分。

因此当View当中有一个输入框（input）时，在Model中有一相对的文字资料，当Model中的文字资料更改时，透过ViewModel，View当中显示的文字也会变更；相对的，当View当中显示的文字资料变动时，也会透过ViewModel，将变更後的文字资料传到Model中作更动。

MVVM与Vue的关系

虽然只要介绍Vue.js时，就会提到MVVM，但两者其实没有直接的关系。Vue不是MVVM架构组成的框架，但观念上的确有受其影响，因此运行时有所借鉴。

传统方式在控制画面时，如 jQuery，是操控HTML中的DOM节点，来达成画面的变动。Vue和传统方式不一样的地方在於，Vue是以资料状态来控制画面的，就MVVM架构来说，Vue只控制Model的部分，其他部分则是交给Vue当中已经写好的程序来运行。