MVC库与MVVC库的对比

最近正在齐头并进的学习jQuery以及Vue.js，对两种不同类型的框架的使用有了一些思考和资料的调查，记录一下。

MVVM模式与MVC的区别实际上就是通过View-Model代替Controller为view提供处理好的逻辑，本质上是通过绑定view和v-model达成view与数据的强耦合，让数据的变化实时反应在view上。

现在做的练习就是购物车界面

170711_1.png

购物车界面主要涉及的操作就是商品数量的增加与减少导致单个商品总金额的变化，以及勾选与否所有商品总金额的变化。

1.使用JQuery的操作
商品列表的展示是通过循环添加Dom实现的。
通过对每一个具体操作的按钮的监听，通过onclick事件获取动作，并通过Dom操作获取具体数值，最后再修改价格相关的Dom节点。
而总金额的计算就是通过遍历列表金额进行相加计算。

2.使用Vue的操作
商品列表是通过v-for的遍历，将数据填入相应节点自动渲染的。
所有的操作实际上都是在改变所遍历对象的属性，而通过对该对象数组的监听，做出相应计算，最后同时通过绑定改变了另外的相应属性。
总价是实时监听计算出来的。

相对来说vue框架的好处是只需要关注操作数据，不需要触碰Dom节点，所有的数据都是通过自动绑定出来的，界面只是相应数据的实时反馈。

最后的感慨是，前端er为了不操作Dom也是费尽苦心。