近年来前端开发趋势,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）页面不过是组件的容器，组件可以嵌套自由组合形成完整的页面。