后端视角下的前端框架之Vue.js初探

背景

做为常年搞后端的本身来讲，除了多年前学习的一点关于HTML的皮毛，对如今的前端技术栈可谓是一窍不通。可是由于最近在作的内部业务全链路监控系统，负责前端的同事作到一半去搞别的项目了，为了把项目落地不得不硬着头皮学一下前端知识。
项目采用了比较流行的Vue.js（如下简称Vue）框架，因此作了一些学习，有一些小的感悟，因此作个记录。对没有搞过前端的后端同窗来讲可能有点收获。

先后端分离

如今先后端主流的合做方式仍是先后分离。我理解的先后端分离，从宏观上讲：前端负责发送请求到后端获取或者推送数据而后根据响应结果进行渲染。
关于后端，负责提供数据读写API供前端调用，此处不谈。
本文主要谈一下在前端如何使用Vue作渲染。固然Vue.js也能够不用在先后分离的场景，可是这样

Vue如何工做的

从三个方面入手：

1. 实现原理
2. Vue使用方式
3. 生产实践

实现原理 - MVVM (Model - View - ViewModel)模式

关于MVVM的理解：视图层的变化会更新到Model，Model层的变化会更新到View，即所谓的双向绑定（data-binding）。
Vue基于MVVM模式实现。
维基百科定义：https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93viewmodel

Vue使用方式 - 如何编码

Vue跟Java同样有本身的语法，能够像引用jar同样依赖第三方的JS库。官方文档：https://cn.vuejs.org/v2/guide/

生产实践 - 工程化

与Java工程同样，咱们要构建一个能够发布的包，咱们须要依赖管理工具来处理负责的依赖的关系，要使用构建工具来帮咱们把Vue源文件编译成能被浏览器解释渲染的文件，好比js、css、png等。好比Maven、Gradle、Ivy，管理依赖，并调用Java编译器完成.java到.class的过程同样。Vue使用的构建工具是npm，基于nodejs的包管理工具，npm应该是js相关脚手架下公认的依赖管理工具。

Vue适用场景

Vue是当前很火的一个框架，其解放了前端同窗手动绑定数据的大量操做，有利于更快速的写出稳定的功能代码。由于其先后分离的特性，真正的业务数据都是经过异步的方式来拉取，对搜索引擎的收录有影响。针对这种场景，Vue做者提供了一种ssr的解决方案，推荐nuxt.js在服务端完成html代码的渲染，嗯，这个须要nodejs的支持，也意味着额外的维护成本，也意味着多了一次转发，这种方案是否还有其余影响暂时不知。
我的认为，Vue作后台是一个很是棒的方案。