Vue中的MVVM设计模式

Posted 2022-08-18 时光-ing

1、传统的MVP设计模式： 是面向DOM进行开发的。
model：数据层/模型层
view：视图层
presenter：逻辑层/控制器，是view和model的中转站，也是mvp中的核心部分。

2、MVVM设计模式： 是面向与数据本身进行开发，编码的重点在于view和model，其核心是M层，V层的变化会根据M层数据的变化而变化。Vue采用了MVVM的设计模式，操作数据，数据变了，页面也会随之改变，不操作DOM结构，vue底层会自动根据数据变化重新渲染页面，采用该设计模式与MVP相比可以减少可观的代码量。
M层：数据层，负责存储data数据。
V层：视图层，负责显示页面内容。
VM层：vue内置（用来监听M层的数据是否发生改变，如果发生改变，则改变试图），不需要自己编写，是Vue自带的，包含有DOM Listeners+Data Bindings。

注意：如何理解数据的双向绑定？
当input的值改变就会修改data里边的inputValue变量的值，同样如果data里边的inputValue值改变了，input框中的值也会随之而发生变化。