六、MVVM

一、MVVM概念

1、浏览器客户端发展历史，值得一看：

https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/001475449022563a6591e6373324d1abd93e0e3fa04397f000

2、MVVM最早由微软提出来，它借鉴了桌面应用程序的MVC思想，在前端页面中，把Model用纯JavaScript对象表示，View负责显示，两者做到了最大限度的分离。把Model和View关联起来的就是ViewModel。ViewModel负责把Model的数据同步到View显示出来，还负责把View的修改同步回Model。

3、关注Model的变化，让MVVM框架去自动更新DOM的状态，从而把开发者从操作DOM的繁琐步骤中解脱出来！

4、MVVM框架很多，教程选择Vue.js。https://cn.vuejs.org/index.html，这里需要注意，vue.js是未压缩的用于开发的版本，它会在浏览器console中输出很多有用的信息，帮助我们调试代码。当开发完毕，需要真正发布到服务器时，应该使用压缩过的vue.min.js，它会移除所有调试信息，并且文件体积更小。

5、单向绑定非常简单，就是把Model绑定到View

6、如果用户更新了View，Model的数据也自动被更新了，这种情况就是双向绑定

二、MVVM的用途：

1、MVVM最大的优势是编写前端逻辑非常复杂的页面，尤其是需要大量DOM操作的逻辑，利用MVVM可以极大地简化前端页面的逻辑。

2、需要SEO（Search Engine Optimization）的页面，不能使用MVVM展示数据，因为搜索引擎无法获取使用MVVM并通过API加载的数据