前端框架之 MVVM

MVVM

vue 是典型的 MVVM 框架,v-model 实现了 VM 部分

MVVM 的理解

M:模型层、数据层,简单理解就是定义在 data 中的变量
V:视图层,就是浏览器展示的页面
M => V:数据的改变,需要同步更新页面。Vue2 中用到了 Object.defineProperty;Vue3 中用到了 Proxy
V=>M:页面输入,需要更新变量。这里用到了 v-model 来替我们完成变量的更新,这个就是 VM

这里指用户的输入:输入框、单选框、多选框、选择器、开关、时间日期选择等

vue如何变为 MVC

将 MVVM 变为 MVC 其实很简单,就是手动处理用户的输入,更新变量。

进一步:就是将 【v-model】 改为 【v-bind 和 v-on】

举例
复制代码
//  双向数据绑定 MVVM
<el-input v-model="input" placeholder="请输入内容"></el-input>

// 手动处理 数据更新  MVC
<el-input :value="input"  @input="input = $event.target.value" placeholder="请输入内容"></el-input>
相关推荐
老前端的功夫4 小时前
前端高可靠架构:医疗级Web应用的实时通信设计与实践
前端·javascript·vue.js·ubuntu·架构·前端框架
可乐红烧西红柿9 小时前
tauri2+vue+vite实现基于webview视图渲染的桌面端开发
前端·前端框架
前端小臻16 小时前
react中的函数组件和类组件(快捷指令和区别)
前端·react.js·前端框架
国服第二切图仔16 小时前
从0到1集成华为云 DevUI前端框架保姆级教程
前端框架·华为云
Mintopia17 小时前
💬 从猜想到架构:AI 聊天区域的 Web 设计之道
前端·前端框架·aigc
GIS学姐嘉欣18 小时前
0帧起手《Vue零基础教程》,从前端框架到GIS开发
前端·vue.js·前端框架·gis
诗和远方14939562327341 天前
Matrix 内存监控
前端框架
狗哥哥1 天前
Vite 插件开发实战:从业务痛点到优雅解决方案
vue.js·架构·前端框架
high20112 天前
【CVE-Fix】-- CVE-2025-66478 (React 2 Shell RCE) 漏洞修复指南
前端·react.js·前端框架·cve
扑棱蛾子2 天前
微前端:从“大前端”到“积木式开发”的架构演进
前端·架构·前端框架