02 vue的發布者和訂閱者是什么(vue面試題)

載是從上到下依次進行

當沒有數據關聯時，兄弟組件之間的更新和銷毀是互不關聯的

mixin中的生命周期與引入該組件的生命周期是僅僅關聯的，且mixin的生命周期優先執行

1、什么是vue生命周期？

答： Vue 實例從創建到銷毀的過程，就是生命周期。從開始創建、初始化數據、編譯模板、掛載Dom→渲染、更新→渲染、銷毀等一系列過程，稱之為 Vue 的生命周期。

2、vue生命周期的作用是什么？

答：它的生命周期中有多個事件鉤子，讓我們在控制整個Vue實例的過程時更容易形成好的邏輯。

3、vue生命周期總共有幾個階段？

答：它可以總共分為8個階段：創建前/后、載入前/后、更新前/后、銷毀前/銷毀后。

5、DOM 渲染在哪個周期中就已經完成？

答：DOM 渲染在 mounted 中就已經完成了。

vue實現數據雙向綁定主要是：采用數據劫持結合發布者-訂閱者模式的方式，通過 Object.defineProperty() 來劫持各個屬性的 setter，getter ，在數據變動時發布消息給訂閱者，觸發相應監聽回調。當把一個普通 Javascript 對象傳給 Vue 實例來作為它的 data 選項時，Vue 將遍歷它的屬性，用 Object.defineProperty() 將它們轉為 getter/setter 。用戶看不到 getter/setter，但是在內部它們讓 Vue 追蹤依賴，在屬性被訪問和修改時通知變化。

vue的數據雙向綁定 將MVVM作為數據綁定的入口，整合 Observer ，Compile和 Watcher 三者，通過 Observer 來監聽自己的 model 的數據變化，通過 Compile 來解析編譯模板指令（vue中是用來解析 { { }}），最終利用 watcher 搭起observer和 Compile 之間的通信橋梁，達到數據變化 —>視圖更新；視圖交互變化（ input ）—>數據 model 變更雙向綁定效果。

js實現簡單的雙向綁定：

1、父組件與子組件傳值

父組件傳給子組件：子組件通過 props 方法接受數據；

子組件傳給父組件： $emit 方法傳遞參數

2、非父子組件間的數據傳遞，兄弟組件傳值 eventBus ，就是創建一個事件中心，相當于中轉站，可以用它來傳遞事件和接收事件。項目比較小時，用這個比較合適。

hash模式：在瀏覽器中符號“#”，#以及#后面的字符稱之為hash，用 window.location.hash 讀取。特點：hash雖然在URL中，但不被包括在HTTP請求中；用來指導瀏覽器動作，對服務端安全無用，hash不會重加載頁面。

history模式：history采用HTML5的新特性；且提供了兩個新方法： pushState()， replaceState()可以對瀏覽器歷史記錄棧進行修改，以及popState事件的監聽到狀態變更。

需求一：

在一個列表頁中，第一次進入的時候，請求獲取數據。

點擊某個列表項，跳到詳情頁，再從詳情頁后退回到列表頁時，不刷新。

也就是說從其他頁面進到列表頁，需要刷新獲取數據，從詳情頁返回到列表頁時不要刷新。

解決方案

在 App.vue設置：

假設列表頁為 list.vue ，詳情頁為 detail.vue ，這兩個都是子組件。

我們在 keep-alive 添加列表頁的名字，緩存列表頁。

然后在列表頁的 created 函數里添加ajax請求，這樣只有第一次進入到列表頁的時候才會請求數據，當從列表頁跳到詳情頁，再從詳情頁回來的時候，列表頁就不會刷新。

這樣就可以解決問題了。

需求二：

在需求一的基礎上，再加一個要求：可以在詳情頁中刪除對應的列表項，這時返回到列表頁時需要刷新重新獲取數據。

我們可以在路由配置文件上對 detail.vue 增加一個 meta 屬性。

這個 meta 屬性，可以在詳情頁中通過 this.$route.meta.isRefresh 來讀取和設置。

設置完這個屬性，還要在 App.vue 文件里設置 watch 一下 $route 屬性。

這樣就不需要在列表頁的 created 函數里用 ajax 來請求數據了，統一放在 App.vue 里來處理。

觸發請求數據有兩個條件：

從其他頁面（除了詳情頁）進來列表時，需要請求數據。

從詳情頁返回到列表頁時，如果詳情頁 meta 屬性中的 isRefresh 為 true ，也需求重新請求數據。

當我們在詳情頁中刪除了對應的列表項時，就可以將詳情頁 meta 屬性中的 isRefresh 設為 true 。這時再返回到列表頁，頁面會重新刷新。

1、css只在當前組件起作用

答：在 style 標簽中寫入 s買粉絲ped 即可 例如： <style s買粉絲ped></style>

2、v-if 和 v-show 區別

答： v-if 按照條件是否渲染， v-show 是 display 的 block 或 none ；

3、 $route 和 $router 的區別

答： $route 是“路由信息對象”，包括 path，params，hash，query，fullPath，matched，name 等路由信息參數。而 $router 是“路由實例”對象包括了路由的跳轉方法，鉤子函數等。

關于jQuery和Vue兩者技術架構的比較分析報告

在過去的前端開發中，jQuery幾乎會出現在任何大大小小的項目中，不論是類MS，還是電商，還是各類門戶網站，都少不了jQuery的身影，可以說在之前的前端開發中，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 框架提供組件的定義、繼承、生命周

很赞哦!（5）