近年来前端开发趋势,MVVM框架,Vue.js的核心思想

近年来前端开发趋势

1.旧浏览器逐渐淘汰，移动端需求增长

  2.前端交互愈来愈多，功能愈来愈复杂

  现现在，前端可谓是一应俱全，产品形态五花八门，涉猎极广。高大上的技术库和框架，酷炫的运营活动页面和好玩的H5小游戏，不过这些一两个文件的小项目并不是是前端技术的主要应用场景，更具商业价值的是复杂的web应用，它们功能完善，页面繁多，为用户提供了完整的产品体验，例如新闻趣味站，在线购物平台， 社交网络，金融信贷应用，音乐互动社区，视频分享平台，打车出行平台等等，这些网站和平台的共同特色就是交互多，功能复杂。

 3.架构从传统的后台MVC向REST API+前端MV*迁移

 传统的后台MVC方式，是当前端与后端发生一些数据交互的时候，会刷新整个页面，这样的用户体验是很是差的，所以，咱们经过ajax的方式，和后端REST API作通讯，异步刷新页面的某个区块，来优化和提高体验，同时把MV*拿到前端来作。

MVVM框架

MVVM框架主要包括三个部分Model、View和ViewModel，Model指的是数据部分，对应到前端就是一些Javascript对象，View指的视图部分，对应到前端就是DOM，ViewModel就是链接数据和视图的中间件，在MVVM的框架下视图和数据是不能直接通讯的，它们经过ViewModel来通讯，ViewModel一般要实现一个observer观察者，当数据发生变化，ViewModel可以监听到数据的这种变化，而后通知到对应的视图作自动更新，而当用户操做视图，ViewModel也能监听到视图的变化，而后通知数据作改动，这实际上就实现了数据的双向绑定。以上即是MVVM的一些基本概念。

MVVM框架的主要应用场景

1）针对具备复杂交互逻辑的前端应用

  2）提供基础的架构抽象

  3）经过Ajax数据持久化，保证前端用户体验

  好处就是当先后端进行一些数据交互的时候，前端能够经过Ajax请求对后端作数据持久化，不须要刷新整个页面，只须要改动DOM里须要改动的那部分数据和内容，特别是对于移动端应用场景，刷新页面的代价太昂贵，会从新加载不少资源，虽然有些资源会被缓存，可是页面的DOM、JS、CSS都会被浏览器从新解析一遍，所以，移动端页面常常会作成SPA单页应用，在这个基础上就诞生了不少MVVM框架，如Angular、React、Vue

Vue.js的核心思想

Vue.js的核心思想包括两个方面：数据驱动和组件化

  数据驱动：DOM是数据的一种天然映射，在vue.js中只须要操做数据，vue.js经过directives指令去对DOM作一层封装，当数据发生变化，会通知指令去修改对应的DOM，数据驱动DOM变化，DOM是数据的一种天然映射，vue.js还会对操做作一些监听，当咱们修改视图的时候，vue.js监听到这些变化，从而去改变数据，这样就实现了数据的双向绑定。

  组件化的目的是扩展HTML元素，封装可重用的代码

  组件设计原则：

  1）页面上每一个独立的可视/可交互区域视为一个组件，

  2）每一个组件对应一个工程目录，组件所须要的各类资源在这个目录下就近维护，

  3）页面不过是组件的容器，组件能够嵌套自由组合造成完整的页面。