vue模板編譯階段

1. Vue 面試中常問知識點整理

生命周期：Vue實例從開始創建、初始化數據、編譯模板、掛載Dom→渲染、更新→渲染、卸載等一系列過程，我們稱這是Vue的生命周期，各個階段有相對應的事件鉤子。

beforeCreate（創建前），在數據觀測和初始化事件還未開始
created（創建後），完成數據觀測，屬性和方法的運算，初始化事件， $el 屬性還沒有顯示出來
beforeMount（載入前），在掛載開始之前被調用，相關的render函數首次被調用。實例已完成以下的配置：編譯模板，把data裡面的數據和模板生成html。注意此時還沒有掛載html到頁面上。
mounted（載入後），在 el 被新創建的 vm.$el 替換，並掛載到實例上去之後調用。實例已完成以下的配置：用上面編譯好的html內容替換 el 屬性指向的DOM對象。完成模板中的html渲染到html頁面中。此過程中進行ajax交互。
beforeUpdate（更新前），在數據更新之前調用，發生在虛擬DOM重新渲染和打補丁之前。可以在該鉤子中進一步地更改狀態，不會觸發附加的重渲染過程。
updated（更新後），在由於數據更改導致的虛擬DOM重新渲染和打補丁之後調用。調用時，組件DOM已經更新，所以可以執行依賴於DOM的操作。然而在大多數情況下，應該避免在此期間更改狀態，因為這可能會導致更新無限循環。該鉤子在伺服器端渲染期間不被調用。
beforeDestroy（銷毀前），在實例銷毀之前調用。實例仍然完全可用。
destroyed（銷毀後），在實例銷毀之後調用。調用後，所有的事件監聽器會被移除，所有的子實例也會被銷毀。該鉤子在伺服器端渲染期間不被調用。

注意：
created 階段的ajax請求與 mounted 請求的區別：前者頁面視圖未出現，如果請求信息過多，頁面會長時間處於白屏狀態。
mounted 不會承諾所有的子組件也都一起被掛載。如果你希望等到整個視圖都渲染完畢，可以用 vm.$nextTick 。

初始化組件時，僅執行了 beforeCreate/Created/beforeMount/mounted 四個鉤子函數
當改變 data 中定義的變數（響應式變數）時，會執行 beforeUpdate/updated 鉤子函數
當切換組件（當前組件未緩存）時，會執行 beforeDestory/destroyed 鉤子函數
初始化和銷毀時的生命鉤子函數均只會執行一次， beforeUpdate/updated 可多次執行

僅當子組件完成掛載後，父組件才會掛載
當子組件完成掛載後，父組件會主動執行一次beforeUpdate/updated鉤子函數（僅首次）
父子組件在data變化中是分別監控的，但是在更新props中的數據是關聯的
銷毀父組件時，先將子組件銷毀後才會銷毀父組件

組件的初始化（mounted之前）分開進行，掛載是從上到下依次進行
當沒有數據關聯時，兄弟組件之間的更新和銷毀是互不關聯的

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 標簽中寫入 scoped 即可 例如： <style scoped></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 是「路由實例」對象包括了路由的跳轉方法，鉤子函數等。

2. 怎麼理解VUE，VUE的數據驅動原理是什麼，解釋

Vue是一個基於MVVM模式數據驅動頁面的框架，它將數據綁定在視圖上。屬於實現單頁面應用的技術。
首先，vuejs在實例化的過程中，會對實例化對象選項中的data
選項進行遍歷，遍歷其所有屬性並使用 Object.defineProperty 把這些屬性全部轉為 getter/setter。同時每一個實例對象都有一個watcher實例對象，他會在模板編譯的過程中,用getter去訪問data的屬性，watcher此時就會把用到的data屬性記為依賴，這樣就建立了視圖與數據之間的聯系。當之後我們渲染視圖的數據依賴發生改變（即數據的setter被調用）的時候，watcher會對比前後兩個的數值是否發生變化，然後確定是否通知視圖進行重新渲染這樣就實現了所謂的數據對於視圖的驅動。通俗地講，它意味著我們在普通
HTML 模板中使用特殊的語法將 DOM 「綁定」到底層數據。一旦創建了綁定，DOM 將與數據保持同步。每當修改了數據，DOM 便相應地更新。這樣我們應用中的邏輯就幾乎都是直接修改數據了，不必與 DOM 更新攪在一起。這讓我們的代碼更容易撰寫、理解與維護。
Vue.js的數據驅動就是通過MVVM這種框架來實現的。MVVM框架主要包含3個部分:model、view和 viewmodel。
Model:指的是數據部分，對應到前端相當於javascript對象
View:指的是視圖部分，對應前端相當於dom
Viewmodel:就是連接視圖與數據的中間件通訊
數據(Model)和視圖(View)是不能直接通訊的，而是需要通過ViewModel來實現雙方的通訊。當數據變化的時候，viewModel能夠監聽到這種變化，並及時的通知view做出修改。同樣的，當頁面有事件觸發時，viewMOdel也能夠監聽到事件，並通知model進行響應。Viewmodel就相當於一個觀察者，監控著雙方的動作，並及時通知對方進行相應的操作。

3. vue生命周期是多少

Vue 的生命周期總共分為8個階段：創建前/後，載入前/後，更新前/後，銷毀前/後。

1、beforeCreate（創建前）

表示實例完全被創建出來之前，vue 實例的掛載元素$el和數據對象 data 都為 undefined，還未初始化。

2、created（創建後）

數據對象 data 已存在，可以調用 methods 中的方法，操作 data 中的數據，但 dom 未生成，$el 未存在 。

3、beforeMount（掛載前）

vue 實例的 $el 和 data 都已初始化，掛載之前為虛擬的 dom節點，模板已經在內存中編輯完成了，但是尚未把模板渲染到頁面中。data.message 未替換。

4、mounted（掛載後）

vue 實例掛載完成，data.message 成功渲染。內存中的模板，已經真實的掛載到了頁面中，用戶已經可以看到渲染好的頁面了。實例創建期間的最後一個生命周期函數，當執行完 mounted 就表示，實例已經被完全創建好了，DOM 渲染在 mounted 中就已經完成了。

5、beforeUpdate（更新前）

當 data 變化時，會觸發beforeUpdate方法 。data 數據尚未和最新的數據保持同步。

6、updated（更新後）

當 data 變化時，會觸發 updated 方法。頁面和 data 數據已經保持同步了。

7、beforeDestory（銷毀前）

組件銷毀之前調用 ，在這一步，實例仍然完全可用。

8、destoryed（銷毀後）

組件銷毀之後調用，對 data 的改變不會再觸發周期函數，vue 實例已解除事件監聽和 dom綁定，但 dom 結構依然存在。

4. vue.js的生命周期有什麼用

在之前基礎上對組件進行了生命周期的加工(初始化、獲取資源、渲染、更新、銷毀等)，理順了組件的各個階段，有助於對組件實現(從初始化到銷毀)的理解。 並且藉助於組件各個階段的鉤子可以對組件有更好的利用和擴展。

5. Vue - 組件和Vue.extend

在初學 Vue 的時候,都是利用 cdn 的方式在一個頁面中導入 vue.js 的庫文件.

接著,肯定就學到了組件開發.

當然,也是在單頁面中.

API文檔告訴我們

在後來,學到了使用 vue-cli 搭配 .vue 模板的方式開發組件.

好了,三種組件創建的方式說完了,且在各自的環境里都能夠正常的運作.

在 Vue 開發中,所有的組件本質上都是由一個繼承自 Vue 的構造函數創建的.

比如在注冊局部組件時.

從視覺上,我們看到 TodoListComp 只是一個普通的 Object 對象.

直接賦值給了其他組件的 components 屬性里.

然後,這個組件就成為了一個局部組件,並可以在注冊了當前組件的內部去使用了.

那它在內部做了什麼,導致這個普通的對象最後可以被當成是一個正常的組件來使用呢?

比如,普通對象上都沒有 $el 之類的屬性.丟給 components 之後,就啥都有了.

使用Vue.extend(options)會根據傳入的options創建一個VueComponent的組件構造函數並返回.

既然使用 Vue.extend 會返回一個組件的構造函數.

那麼我們就可以使用 new 這個返回的構造函數

並手動的 mount 並替換某個 dom 節點(就和 new App() 一樣)

前面,我么已經知道了,所有的 vue 組件,不管是全局的還是局部的.

都是利用 Vue.extend 方法構建並返回出一個繼承自 Vue 的組件構造函數.

這個函數接受一個滿足了 Vue 組件屬性項的普通的 Object 對象.

在.vue模板文件開發中,也不例外.

我們可以看看,在書寫 .vue 模板文件時,我們到底在寫什麼?

我們寫的是一個 .vue 文件.

並按照 <template></template> <script></script> ( 這里不關注 <style></style> 節點 ) 的格式編寫 .vue 文件.

把它整合起來來看.

等價於

好了,繼續回到 .vue 模板開發文件中.

在另外一個組件中,使用此組件時,我們會 import xxx from xxx.vue 並搭配 components:{ xxxx }

.vue 會被 webpack 中配置的 vue-loader 處理.這是我們已知的.

結合上述的判斷, vue-loader 僅僅只是把 .vue 文件編譯成了一個 vue.extend(options) 創建組件所需要的 options 普通對象而已.

既然 vue-loader 僅僅,只是把 .vue 模板文件編譯成了一個 options 普通對象.

那麼我們可以手動的使用 Vue.extends(options) 來獲得這個組件對象的構造函數.

拿到此組件的構造函數,我們就可以在 組件 mounted 的時候,通過 new 的方式,掛在到 html 上了. (而無需去注冊到 components,成為一個局部組件.直接把它當成一個自己熟悉的不能在熟悉的構造函數調用即可.)

既然我們已經知道:

我們完全可以直接使用 .js 文件的方式來創建 vue 組件,進而省略 .vue & vue-loader 這個執行的步驟.

此 .js 文件到處一個 vue 組件的構造函數.

在另外一個組件里

通過這樣的原理,我們完全可以在HTML頁面的任意地方,任意位置,任意的掛在我們自己的組件.並不一定必須使用.vue聲明式組件的語法.

[ 碼雲地址 ]

6. vue生命周期是什麼

Vue實例有一個完整的生命周期。

也就是從開始創建、初始化數據、編譯模板、掛載Dom、渲染→更新→渲染、卸載等一系列過程，我們稱這是Vue的生命周期。通俗說就是Vue實例從創建到銷毀的過程，就是生命周期。

vue生命周期功能總結：

beforecreate：可以在這加個loading事件。

created ：在這結束loading，還做一些初始化，實現函數自執行。

mounted ： 在這發起後端請求，拿回數據，配合路由鉤子做一些事情。

beforeDestory： 確認刪除vue實例。

destoryed ：當前實例已被銷毀，解綁相關指令和事件監聽器。

7. Vue 模板編譯 是用來代替JSP的嗎

JSP可以和Vue一起使用，但vue本身更傾向於基於node的服務端渲染SSR

8. vue生命周期詳解

Vue實例完整的生命周期包括：創建、初始化、編譯模板、掛在DOM、渲染更新、卸載等過程。

1、beforeCreate( 創建前 )。在實例初始化之後，數據觀測和事件配置之前被調用，此時組件的選項對象還未創建，el 和 data 並未初始化，因此無法訪問methods， data， computed等上的方法和數據。

2、created ( 創建後 ）。實例已經創建完成之後被調用，在這一步，實例已完成以下配置：數據觀測、屬性和方法的運算，watch/event事件回調，完成了data 數據的初始化。

3、beforeMount。掛在開始之前被調用，相關的render函數首次被調用（虛擬DOM），實例已完成以下的配置： 編譯模板，把data裡面的數據和模板生成html，完成了el和data 初始化，注意此時還沒有掛在html到頁面上。

4、mounted。掛在完成，也就是模板中的HTML渲染到HTML頁面中，此時一般可以做一些ajax操作，mounted只會執行一次。

5、beforeUpdate。在數據更新之前被調用，發生在虛擬DOM重新渲染和打補丁之前，可以在該鉤子中進一步地更改狀態，不會觸發附加地重渲染過程

6、updated（更新後）。在由於數據更改導致地虛擬DOM重新渲染和打補丁只會調用，調用時，組件DOM已經更新，所以可以執行依賴於DOM的操作，然後在大多是情況下，應該避免在此期間更改狀態，因為這可能會導致更新無限循環，該鉤子在伺服器端渲染期間不被調用。

7、beforeDestrioy （銷毀前）。在實例銷毀之前調用，實例仍然完全可用，這一步還可以用this來獲取實例，一般在這一步做一些重置的操作，比如清除掉組件中的定時器 和 監聽的dom事件

8、destroyed（銷毀後）。在實例銷毀之後調用，調用後，所以的事件監聽器會被移出，所有的子實例也會被銷毀，該鉤子在伺服器端渲染期間不被調用。

(8)vue模板編譯階段擴展閱讀：

vue生命周期功能總結：

beforecreate：可以在這加個loading事件。

created ：在這結束loading，還做一些初始化，實現函數自執行。

mounted ： 在這發起後端請求，拿回數據，配合路由鉤子做一些事情。

beforeDestory： 確認刪除vue實例。

destoryed ：當前實例已被銷毀，解綁相關指令和事件監聽器。

9. vue生命周期總共有幾個階段

vue生命周期分為8個階段，即分別是創建前、創建後、載入前、載入後、更新前、更新後、銷毀前、銷毀後。VUE是iOS和Android平台上的一款Vlog社區與編輯工具，允許用戶通過簡單的操作實現Vlog的拍攝、剪輯、細調、和發布，記錄與分享生活，還可以在社區直接瀏覽他人發布的Vlog，與Vloggers互動。隨著手機攝像頭的發展，越來越多的人開始使用手機拍照和攝像。VUE軟體通過點按改變視頻的分鏡數實現簡易的剪輯效果，而剪輯能夠讓視頻傳達更多的信息。同時，該軟體中有12款濾鏡供用戶選擇，切換至前置攝像頭會出現自然的自拍美顏功能。VUE支持40款手繪貼紙，還可以編輯貼紙的出現時間。