MVVM可以拆分成:View --- ViewModel --- Model三部分 ,看下面的视图:
页面DOM(View)↔监控者(ViewModel)↔数据(Model)
那么,我们怎么理解MVVM呢?
上图中,左侧的View相当于我们的DOM内容,我们所看到的页面视图,右侧的Model相当于我们的数据对象,比如一个对象的信息:
{ name:"张三", age:21, }
而中间的监控者就负责监控两侧的数据,并相对应地通知另一侧进行修改。比如:你在Model层中修改了name的值为:“李四”,那么View视图层显示的“张三”也会自动变成了“李四”,而这个过程就是有ViewModel来操作的,不需要你手动地去写代码去实现(你不用再手动操作DOM了)。
如果你写过复杂的DOM操作,你就可以感受到它带来的便利。
这就是MVVM框架,属于MVVM的JS框架除了Vue.js,还有React.js,Angular.js。
MVVM思想
数据改变驱动了视图的自动更新,传统的做法你得手动改变DOM来改变视图,vuejs只需要改变数据,就会自动改变视图,一个字:爽。再也不用你去操心DOM的更新了,这就是MVVM思想的实现。