后端视角下的前端框架之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–view–viewmodel

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做后台是一个非常棒的方案。