前端框架之 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>
1
2
3
4
5