03 vue發布訂閱模式和js(關于jQuery和Vue兩者技術架構的比較分析報告)

端開發中，jQuery更是一種“標準”。

2008年，V8 引擎隨 Chrome 瀏覽器橫空出世，JavaScript 這門通用的 Web 腳本語言的執行效率得到質的提升。 V8 引擎的出現，注定是 JavaScript 發展史上一個光輝的里程碑。它的出現，讓當時研究高性能服務器開發、長時間一籌莫展的 Ryan Dahl 有了新的、合適的選擇，不久，在2009年的柏林的 JSConf 大會上，基于 JavaScript 的服務端項目 Node.js 正式對外發布。Node.js 的發布，不僅為開發者帶來了一個高性能的服務器，還很大程度上推動了前端的工程化，帶來了前端的大繁榮。與此同時，因為 JavaScript 執行效率的巨大提升，越來越多的業務邏輯開始在瀏覽器端實現，前端邏輯越來越重，前端架構隨之提上日程。于是，我們談論的主角，MVVM 模式，走進了 Web 前端的架構設計中。

MVVM 模式，顧名思義即 Model-View-ViewModel 模式。它萌芽于2005年微軟推出的基于 Windows 的用戶界面框架 WPF ，前端最早的 MVVM 框架 knockout在2010年發布。當前最流行了MVVM 框架 Vue 的2.0版本在2016年5月發布。

一句話總結 Web 前端 MVVM：操作數據，就是操作視圖，就是操作 DOM（所以無須操作 DOM ）。

無須操作 DOM ！借助 MVVM 框架，開發者只需完成包含 聲明綁定 的視圖模板，編寫 ViewModel 中業務數據變更邏輯，View 層則完全實現了自動化。這將極大的降低前端應用的操作復雜度、極大提升應用的開發效率。MVVM 最標志性的特性就是 數據綁定 ，MVVM 的核心理念就是通過 聲明式的數據綁定 來實現 View 層和其他層的分離。完全解耦 View 層這種理念，也使得 Web 前端的單元測試用例編寫變得更容易。

MVVM，說到底還是一種分層架構。它的分層如下：

Model 層，對應數據層的域模型，它主要做 域模型的同步 。通過 Ajax/fetch 等 API 完成客戶端和服務端業務 Model 的同步。在層間關系里，它主要用于抽象出 ViewModel 中視圖的 Model。

View 層，作為視圖模板存在，在 MVVM 里，整個 View 是一個動態模板。除了定義結構、布局外，它展示的是 ViewModel 層的數據和狀態。View 層不負責處理狀態，View 層做的是 數據綁定的聲明 、 指令的聲明 、 事件綁定的聲明 。

ViewModel 層把 View 需要的層數據暴露，并對 View 層的 數據綁定聲明 、 指令聲明 、 事件綁定聲明 負責，也就是處理 View 層的具體業務邏輯。ViewModel 底層會做好綁定屬性的監聽。當 ViewModel 中數據變化，View 層會得到更新；而當 View 中聲明了數據的雙向綁定（通常是表單元素），框架也會監聽 View 層（表單）值的變化。一旦值變化，View 層綁定的 ViewModel 中的數據也會得到自動更新。

如圖所示，在前端 MVVM 框架中，往往沒有清晰、獨立的 Model 層。在實際業務開發中，我們通常按 Web Component 規范來組件化的開發應用，Model 層的域模型往往分散在在一個或幾個 Component 的 ViewModel 層，而 ViewModel 層也會引入一些 View 層相關的中間狀態，目的就是為了更好的為 View 層服務。

開發者在 View 層的視圖模板中聲明 數據綁定 、 事件綁定 后，在 ViewModel 中進行業務邏輯的 數據 處理。事件觸發后，ViewModel 中 數據 變更， View 層自動更新。因為 MVVM 框架的引入，開發者只需關注業務邏輯、完成數據抽象、聚焦數據，MVVM 的視圖引擎會幫你搞定 View。因為數據驅動，一切變得更加簡單。

不可置否，MVVM 框架極大的提升了應用的開發效率。It's amazing！But，MVVM 框架到底做了什么？

視圖引擎：我是視圖引擎，我為 View 層作為視圖模板提供強力支持，開發者，你們不需要操作 DOM ，丟給我來做！

數據存取器：我是數據存取器，我可以通過 Object.defineProperty() API 輕松定義，或通過自行封裝存取函數的方式曲線完成。我的內部往往封裝了 發布/訂閱模式 ，以此來完成對數據的監聽、數據變更時通知更新。我是 數據綁定 實現的基礎。

組件機制：我是組件機制。有追求的開發者往往希望按照面向未來的組件標準 － Web Components 的方式開發，我是為了滿足你的追求而生。MVVM 框架提供組件的定義、繼承、生命周期、組件間通信機制，為開發者面向未來開發點亮買粉絲。

MVVM架構型模式的興起，實現了前后端真正的職責分離，在提高開發效率的同時，也存在一些不足之處。

可以說前后端分離隨著趨勢已經形成一種標準，MVVM設計模式的開發框架（Vue）適用任何場景的開發（低版本IE除外）。

jQuery是直接來操作DOM的，憑借簡化后的API直接和DOM對話（優異的兼容性）；

Vue是直接來操作數據的，拿數據說話。

vue前端面試題有哪些呢？

文章中給你列舉了部分的面試題，這些都是公司面試常遇到的，還有需要的還可以自己去查閱一下資料

1、active-class是哪個組件的屬性？嵌套路由怎么定義？

答：vue-router模塊的router-link組件。

2、怎么定義vue-router的動態路由？怎么獲取傳過來的動態參數？

答：在router目錄下的index.js文件中，對path屬性加上/:id。 使用router對象的params.id

3、vue-router有哪幾種導航鉤子？

答：三種，一種是全局導航鉤子：router.beforeEach(to,from,next)，作用：跳轉前進行判斷攔截。第二種：組件內的鉤子；第三種：單獨路由獨享組件

4、scss是什么？安裝使用的步驟是？有哪幾大特性？

答：預處理css，把css當前函數編寫，定義變量,嵌套。 先裝css-loader、node-loader、sass-loader等加載器模塊，在webpack-base.買粉絲nfig.js配置文件中加多一個拓展:extenstion，再加多一個模塊：mole里面test、loader

4.1、scss是什么？在vue.cli中的安裝使用步驟是？有哪幾大特性？

答：css的預編譯。

使用步驟：

第一步：用npm 下三個loader（sass-loader、css-loader、node-sass）

第二步：在build目錄找到webpack.base.買粉絲nfig.js，在那個extends屬性中加一個拓展.scss

第三步：還是在同一個文件，配置一個mole屬性

第四步：然后在組件的style標簽加上lang屬性 ，例如：lang=”scss”

有哪幾大特性:

1、可以用變量，例如（$變量名稱=值）；

2、可以用混合器，例如（）

3、可以嵌套

5、mint-ui是什么？怎么使用？說出至少三個組件使用方法？

答：基于vue的前端組件庫。npm安裝，然后import樣式和js，vue.use（mintUi）全局引入。在單個組件局部引入：import { Toast} from ‘mint-ui’。組件一：Toast(‘登錄成功’)；組件二：mint-header；組件三：mint-swiper

6、v-model是什么？怎么使用？ vue中標簽怎么綁定事件？

答：可以實現雙向綁定，指令（v-class、v-for、v-if、v-show、v-on）。vue的model層的data屬性。綁定事件：<input @click=doLog() />

7、axios是什么？怎么使用？描述使用它實現登錄功能的流程？

答：請求后臺資源的模塊。npm install axios -S裝好，然后發送的是跨域，需在配置文件中買粉絲nfig/index.js進行設置。后臺如果是Tp5則定義一個資源路由。js中使用import進來，然后.get或.post。返回在.then函數中如果成功，失敗則是在.catch函數中

8、axios+tp5進階中，調用axios.post(‘api/user’)是進行的什么操作？axios.put(‘api/user/8′)呢？

答：跨域，添加用戶操作，更新操作。

9、什么是RESTful API？怎么使用?

答：是一個api的標準，無狀態請求。請求的路由地址是固定的，如果是tp5則先路由配置中把資源路由配置好。標準有：.post .put .delete

10、vuex是什么？怎么使用？哪種功能場景使用它？

答：vue框架中狀態管理。在main.js引入store，注入。新建了一個目錄store，….. export 。場景有：單頁應用中，組件之間的狀態。音樂播放、登錄狀態、加入購物車

11、mvvm框架是什么？它和其它框架（jquery）的區別是什么？哪些場景適合？

答：一個model+view+viewModel框架，數據模型model，viewModel連接兩個

區別：vue數據驅動，通過數據來顯示視圖層而不是節點操作。

場景：數據操作比較多的場景，更加便捷

12、自定義指令（v-check、v-focus）的方法有哪些？它有哪些鉤子函數？還有哪些鉤子函數參數？

答：全局定義指令：在vue對象的directive方法里面有兩個參數，一個是指令名稱，另外一個是函數。組件內定義指令：directives

鉤子函數：bind（綁定事件觸發）、inserted(節點插入的時候觸發)、update（組件內相關更新）

鉤子函數參數：el、binding

13、說出至少4種vue當中的指令和它的用法？

答：v-if：判斷是否隱藏；v-for：數據循環出來；v-bind:class：綁定一個屬性；v-model：實現雙向綁定

14、vue-router是什么？它有哪些組件？

答：vue用來寫路由一個插件。router-link、router-view

15、導航鉤子有哪些？它們有哪些參數？

答：導航鉤子有：a/全局鉤子和組件內獨享的鉤子。b/beforeRouteEnter、afterEnter、beforeRouterUpdate、beforeRouteLeave

參數：有to（去的那個路由）、from（離開的

很赞哦!（51682）