MVC框架与MVVC框架的区别

💡 此文介绍了MVC框架、MVVC框架的定义。

通常model被翻译为模型，为了方便理解，我们这边叫数据、数据模型

🔍MVC框架介绍：

 

传统的MVC指的是，用户操作会请求服务端路由，路由拦截分发请求，调用对应的控制器来处理。控制器会获取数据，然后数据与模板结合，将结果返回给前端，页面重新渲染。

数据流是单向的，view——> controler——> model ——> controler ——>view。

是一个单向的循环流。

view直接到model层的操作无法在前端实现。

这样前端工程师体验就非常的不好

比如当一个<input>值发生了变化，我们在另一个<div id="val">里想要显示这个input值，需要先监听input事件，再将input事件里的event.target.value赋值到document.getElementById("val").innerHtml上。一个小小的功能要不停的对DOM进行操作，非常的影响网页性能。

<input placeholder="Enter some text" name="name"/>
<p id="values"></p>

const input = document.querySelector('input');
const log = document.getElementById('values');

input.addEventListener('input', updateValue);

function updateValue(e) {
    log.textContent = e.srcElement.value;
}

于是出现了MVVC框架

🔍MVVC框架介绍：

 

传统的前端会将数据手动渲染到页面上，MVVM模式不需要用户手动操作DOM元素，将数据绑定到viewModel层上，会自动将数据渲染到页面中。视图变化会通知viewModel层更新数据，viewModel就是MVVM模式的桥梁。

数据驱动数据流动时双向的，model——>viewModel<——>view