前端框架之 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>
相关推荐
前端荣耀7 小时前
Flutter 客户端热更新实战
前端框架·全栈
We་ct12 小时前
React Scheduler & Lane 详解
前端·react.js·前端框架·reactjs·个人开发·任务调度·优先
im_AMBER16 小时前
react-i18next 国际化支持
前端·react.js·前端框架
我命由我1234517 小时前
Element Plus - 在 el-select 的每个选项右侧添加按钮
前端·javascript·vue.js·前端框架·ecmascript·html5·js
zadyd1 天前
Workflow or ReAct ?
前端·react.js·前端框架
Watermelo6172 天前
【前端实战】构建 Vue 全局错误处理体系,实现业务与错误的清晰解耦
前端·javascript·vue.js·信息可视化·性能优化·前端框架·设计规范
A923A2 天前
【Vue3大事件 | 项目笔记】第二天
前端·vue.js·笔记·前端框架·前端项目
We་ct2 天前
React 更新触发原理详解
开发语言·前端·javascript·react.js·面试·前端框架·react
SuperEugene2 天前
前端基础实战:JS/TS与Vue体系化扫盲(47 篇完整目录 + 避坑)
javascript·vue.js·前端框架·npm·ecmascript·状态模式
hh随便起个名2 天前
React组件通信
前端·react.js·前端框架