後端視角下的前端框架之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作後臺是一個很是棒的方案。