前端框架之 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>
相关推荐
下家9 小时前
为了脱离前端鄙视链,于是自己写个框架 - React 党看完沉默了
前端·前端框架
派小心.15 小时前
React StrictMode埋点双执行的验收方法
前端·前端框架
JudithHuang1 天前
React 常用 Hooks
前端·react.js·前端框架
码云之上1 天前
从搜索框到 Agent:Chatbot 联网搜索的技术演进
人工智能·架构·前端框架
Daorigin_com2 天前
道本科技携手DeepSeek:以AI重塑合同全生命周期管理
前端·人工智能·科技·网络安全·数据挖掘·前端框架·传媒
JudithHuang2 天前
React 数据请求:TanStack Query
前端·react.js·前端框架
JudithHuang2 天前
React 路由:React Router
前端·react.js·前端框架
FungLeo2 天前
成为全栈·React 管理后台篇·总复盘:从“接口能调通”到“后台值得使用”
前端·react.js·前端框架·项目复盘·成为全栈
方方洛2 天前
glowglow:语言无关的语法高亮器是怎么实现的
前端·前端框架
Amos_Web2 天前
Rspack 源码解析(十六):多类型资源如何进入 Compilation.assets
前端·rust·前端框架