背景

作為常年搞后端的自己來說，除了多年前學(xué)習(xí)的一點(diǎn)關(guān)于HTML的皮毛，對(duì)現(xiàn)在的前端技術(shù)棧可謂是一竅不通。但是因?yàn)樽罱谧龅膬?nèi)部業(yè)務(wù)全鏈路監(jiān)控系統(tǒng)，負(fù)責(zé)前端的同事做到一半去搞別的項(xiàng)目了，為了把項(xiàng)目落地不得不硬著頭皮學(xué)一下前端知識(shí)。
項(xiàng)目采用了比較流行的Vue.js（以下簡(jiǎn)稱Vue）框架，所以做了一些學(xué)習(xí)，有一些小的感悟，所以做個(gè)記錄。對(duì)沒有搞過前端的后端同學(xué)來說可能有點(diǎn)收獲。

前后端分離

現(xiàn)在前后端主流的合作方式還是前后分離。我理解的前后端分離，從宏觀上講：前端負(fù)責(zé)發(fā)送請(qǐng)求到后端獲取或者推送數(shù)據(jù)然后根據(jù)響應(yīng)結(jié)果進(jìn)行渲染。
關(guān)于后端，負(fù)責(zé)提供數(shù)據(jù)讀寫API供前端調(diào)用，此處不談。
本文主要談一下在前端如何使用Vue做渲染。當(dāng)然Vue.js也可以不用在前后分離的場(chǎng)景，但是這樣

Vue如何工作的

從三個(gè)方面入手：

實(shí)現(xiàn)原理

Vue使用方式

生產(chǎn)實(shí)踐

實(shí)現(xiàn)原理 - MVVM (Model - View - ViewModel)模式

關(guān)于MVVM的理解：視圖層的變化會(huì)更新到Model，Model層的變化會(huì)更新到View，即所謂的雙向綁定（data-binding）。
Vue基于MVVM模式實(shí)現(xiàn)。
維基百科定義：https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93viewmodel

Vue使用方式 - 如何編碼

Vue跟Java一樣有自己的語法，可以像引用jar一樣依賴第三方的JS庫。官方文檔：https://cn.vuejs.org/v2/guide/

生產(chǎn)實(shí)踐 - 工程化

與Java工程一樣，我們要構(gòu)建一個(gè)可以發(fā)布的包，我們需要依賴管理工具來處理負(fù)責(zé)的依賴的關(guān)系，要使用構(gòu)建工具來幫我們把Vue源文件編譯成能被瀏覽器解釋渲染的文件，比如js、css、png等。比如Maven、Gradle、Ivy，管理依賴，并調(diào)用Java編譯器完成.java到.class的過程一樣。Vue使用的構(gòu)建工具是npm，基于nodejs的包管理工具，npm應(yīng)該是js相關(guān)腳手架下公認(rèn)的依賴管理工具。

Vue適用場(chǎng)景

Vue是當(dāng)前很火的一個(gè)框架，其解放了前端同學(xué)手動(dòng)綁定數(shù)據(jù)的大量操作，有利于更快速的寫出穩(wěn)定的功能代碼。因?yàn)槠淝昂蠓蛛x的特性，真正的業(yè)務(wù)數(shù)據(jù)都是通過異步的方式來拉取，對(duì)搜索引擎的收錄有影響。針對(duì)這種場(chǎng)景，Vue作者提供了一種ssr的解決方案，推薦nuxt.js在服務(wù)端完成html代碼的渲染，嗯，這個(gè)需要nodejs的支持，也意味著額外的維護(hù)成本，也意味著多了一次轉(zhuǎn)發(fā)，這種方案是否還有其他影響暫時(shí)不知。
個(gè)人認(rèn)為，Vue做后臺(tái)是一個(gè)非常棒的方案。

轉(zhuǎn)載于:https://www.cnblogs.com/liushijie/p/10534250.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。