背景

作為常年搞后端的自己來說，除了多年前學習的一點關于HTML的皮毛，對現在的前端技術棧可謂是一竅不通。但是因為最近在做的內部業務全鏈路監控系統，負責前端的同事做到一半去搞別的項目了，為了把項目落地不得不硬著頭皮學一下前端知識。
項目采用了比較流行的Vue.js（以下簡稱Vue）框架，所以做了一些學習，有一些小的感悟，所以做個記錄。對沒有搞過前端的后端同學來說可能有點收獲。

前后端分離

現在前后端主流的合作方式還是前后分離。我理解的前后端分離，從宏觀上講：前端負責發送請求到后端獲取或者推送數據然后根據響應結果進行渲染。
關于后端，負責提供數據讀寫API供前端調用，此處不談。
本文主要談一下在前端如何使用Vue做渲染。當然Vue.js也可以不用在前后分離的場景，但是這樣

Vue如何工作的

從三個方面入手：

實現原理

Vue使用方式

生產實踐

實現原理 - 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做后臺是一個非常棒的方案。

轉載于:https://www.cnblogs.com/liushijie/p/10534250.html

總結

以上是生活随笔為你收集整理的后端视角下的前端框架之Vue.js初探的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。