前言

VueJS 的火热主要得益于近年来前端开发的趋势。

前端开发趋势图

image.png
旧浏览器一般指的就是 IE6~8 他们是不支持 ES5 的特性的，而 VueJS 的核心实现就是通过 ES5 的 Object.defineProperty(obj,’prop’,{ get:function(){},set:function(){} }) 方法来实现的。
image.png
上面的浏览器都是支持 ES5 的，而且移动端大部分也都是 webkit 内核，所以 ES5 在移动端也是全面支持的，也支持一些高级的PC端浏览器。
image.png
image.png
image.png
image.png

MVVM 框架

  • MVVM 的组成

image.png

  • View 和 Model

image.png
ViewModel 就是连接 View 和 Model 的中间件

  • ViewModel 的作用

image.png
在 MVVM 的架构下，视图和数据是不能直接通讯的，它通常会通过 ViewModel 来做通讯，ViewsModel 通常要实现一个 Observer 观察者的，ViewModel 可以观察到数据的变化，然后通知到对应的视图做自动更新，而当用户操作视图 ViewModel 也能监听到视图的变化，然后通知数据库改动，这样实际上就实现了数据的双向绑定。

  • MVVM 框架的应用场景

image.png

  • MVVM 的好处

当前端对数据进行一些操作的时候，可以通过 Ajax 请求对后端做数据持久化，不需要刷新整个页面，只需要改动 DOM 里面需要改动的那部分数据和内容，特别是移动端的应用场景刷新页面的代价太昂贵了，会重新加载很多资源，虽然有些的资源会被缓存，但是页面的 DOM、JS、CSS 都会被浏览器重新解析一遍，因此移动端页面通常会做成 SPA 单页应用，在这个基础上就诞生了很多 MVVM 框架，Angular.js、React.js、Vue.js
image.png