vue深入浅出(MVC、MVVM)

168 阅读1分钟

逻辑图:(后端mvc结构) image.png 逻辑图:(前端mvvm)

image.png

因为WPF技术出现,从而使MVC架构模式有所改进,MVVM 模式便是使用的是数据绑定基础架构。它们可以轻松构建UI的必要元素。

(1) 什么是 MVVM?

随着前端对于控制逻辑的越来越轻量,MVVM 模式作为 MVC 模式的一种补充出现了,万变不离其 宗,最终的目的都是将 Model 里的数据展示在 View 视图上,而 MVVM 相比于 MVC 则将前端开 发者所要控制的逻辑做到更加符合轻量级的要求。

(2) ViewModel

在 Model 和 View 之间多了叫做 View-Model 的一层,将模型与视图做了一层绑定关系,在理想 情况下,数据模型返回什么试图就应该展示什么,在 ViewModel 引入之后,视图完全由接口返回 数据驱动,由开发者所控制的逻辑非常轻量。不过这里要说明的是,在 MVVM 模式下,Controller 控制逻辑并非就没了,像操作页面 DOM 响应的逻辑被 SDK(如 Vue 的内部封装实现)统一实现 了,像不操作接口返回的数据是因为服务端在数据返回给前端前已经操作好了。

vue的简单使用:

image.png

注:“{{msg}}”是vue在挂载app中的使用方法

image.png