前端框架之 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>
相关推荐
右耳朵猫AI15 小时前
React技术周刊 2026年第20周
前端·react.js·前端框架
Larcher1 天前
JS 变量提升:代码没动,为什么执行顺序就变了?
前端·javascript·前端框架
愿天垂怜2 天前
【C++脚手架】gtest 单元测试库的介绍与使用
linux·服务器·c++·gitee·前端框架·gtest
GISer_Jing2 天前
Claude Code Tool System 与 Permission 机制深度解析
ai·系统架构·前端框架·ai编程
光影少年2 天前
Redux Toolkit 用法、解决原生Redux 冗余问题
开发语言·前端·javascript·react.js·中间件·前端框架·ecmascript
之歆2 天前
Day23_Bootstrap 前端框架完全指南:从栅格系统到组件化开发
开发语言·前端·javascript·前端框架·bootstrap·ecmascript·less
GISer_Jing3 天前
Claude Code 技术深度解析:一个活在终端里的 AI 编程助手
人工智能·elasticsearch·前端框架
weelinking3 天前
【产品】10_搭建前端框架——把你的原型变成真实页面
java·大数据·前端·数据库·人工智能·python·前端框架
天机️灵韵4 天前
Tauri 2.0与Electron的桌面应用技术选型比较
前端·electron·前端框架