【前端領域高頻筆試面試】—— Vue相關

目錄

1.v-if 和 v-show 區別

2.vue常用的修飾符

3.vue中 key 值的作用

4.vue的單頁面應用（SPA）的優缺點

5.Vue的生命周期

6.Vue組件間的引數傳遞

7.為什么vue中data必須是一個函式？

8.對MVVM模式的理解

9. vue-router 有哪幾種導航鉤子?

10.路由嵌套

11.axios的特點有哪些

12.頁面重繪vuex被清空時的解決辦法

13.vue中的 ref 是什么

14.Promise物件是什么

15.什么是js的冒泡？Vue中如何阻止冒泡事件

16.指令周期

17.如何優化SPA應用的首屏加載速度慢的問題？

18.解釋一下vuex

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

20.vue.cli中怎樣使用自定義組件？有遇到過哪些問題嗎？

21.vuex有哪幾種屬性？

22.不用Vuex會帶來什么問題？

23.Vue前端實作購物車

24.methods、computed、watch的區別

25.簡述vuex的資料傳遞流程

26.組件中寫 name 選項有什么作用？

27.的作用是什么？

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

29.為什么避免 v-if 和 v-for 用在一起？

30.怎樣理解 Vue 的單向資料流？

31.Vue 的父組件和子組件生命周期鉤子函式執行順序？

32.在哪個生命周期內呼叫異步請求？

33.你有對 Vue 專案進行哪些優化？

34.虛擬 DOM 的優缺點

35.虛擬 DOM 實作原理

36.直接給一個陣列項賦值，Vue 能檢測到變化嗎？

37.在Vue生命周期什么階段才能訪問操作DOM？

38.Vue-router 原理

39.router-link 和 $router.push 實作跳轉的原理

40.promise 和 await/async 區別

41.v-if 和 v-show 的區別

42.什么是單頁應用？

43.Vue的權限管理

44.vue 的 watch 是否可以監聽陣列

45.前端的優化方案

1.v-if 和 v-show 區別

（1）手段：v-if是動態的向DOM樹內添加或者洗掉DOM元素；v-show是通過設定DOM元素的display樣式屬性控制顯隱；

（2）編譯程序：v-if切換有一個區域編譯/卸載的程序，切換程序中合適地銷毀和重建內部的事件監聽和子組件；v-show只是簡單的基于css切換；

（3）編譯條件：v-if是惰性的，如果初始條件為假則什么也不做，只有在條件第一次變為真時才開始區域編譯；v-show是在任何條件下都被編譯，然后被快取，而且DOM元素保留；

（4）性能消耗：v-if有更高的切換消耗；v-show有更高的初始渲染消耗；

（5）使用場景：v-if適合運營條件不大可能改變；v-show適合頻繁切換，

2.vue常用的修飾符

.prevent: 提交事件不再多載頁面；

.stop: 阻止單擊事件冒泡；

.self: 當事件發生在該元素本身而不是子元素的時候會觸發；

.capture: 事件偵聽，事件發生的時候會呼叫，

3.vue中 key 值的作用

當 Vue.js 用 v-for 正在更新已渲染過的元素串列時，默認用“就地復用”策略，如果資料項的順序被改變，Vue 將不會移動 DOM 元素來匹配資料項的順序，而是簡單復用此處每個元素，并且確保它在特定索引下顯示已被渲染過的每個元素，key的作用主要是為了高效的更新虛擬DOM，

4.vue的單頁面應用（SPA）的優缺點

優點：Vue是通過盡可能簡單的 API 實作回應的資料系結和組合的視圖組件，核心是一個回應的資料系結系統；組件化開發、輕量、簡潔、高效、快速、模塊友好，

缺點：不支持低版本的瀏覽器，最低只支持到IE9；不利于SEO的優化（如果要支持SEO，建議通過服務端來進行渲染組件）；第一次加載首頁耗時相對長一些；不可以使用瀏覽器的導航按鈕需要自行實作前進、后退，

5.Vue的生命周期

（1）生命周期是什么？

Vue 實體有一個完整的生命周期，也就是從開始創建、初始化資料、編譯模版、掛載 Dom 渲染 更新 渲染 卸載等一系列程序，我們稱這是 Vue 的生命周期，

（2）生命周期的各個階段作用

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（銷毀后） 在實體銷毀之后呼叫，呼叫后，所有的事件監聽器會被移除，所有的子實體也會被銷毀，該鉤子在服務器端渲染期間不被呼叫，

6.Vue組件間的引數傳遞

父子組件間傳參

父給子傳參（父：自定義屬性傳遞變數；子：用Props['父元素自定義屬性']接受）

子給父傳參（子：this.$emit(父元素自定義事件，傳遞的值) ；父：自定義事件用引數去接收傳遞來 的值）

兄弟間傳參（除了以下方式也可直接用Vuex）

通過給eventbus注冊事件，別的組件觸發事件，實作通信，

①創建一個eventbus物件，即創造一個vue物件，用作傳遞資訊，

②接收資訊的一方將事件通過vm.$on(“事件名”,事件處理函式)添加在eventbus物件上，

③發送資料的一方，通過vm.$emit(“事件名”,傳遞的資料)觸發事件，將資料傳遞，

路由傳參

a.通過params

//需要在router的path后跟上引數
{
   path: "/two",
   name: "two",
   component: two
}

//跳轉時
   this.$router.push({
      path: `/two` //直接把資料拼接在path后面
   })

//接收時
   this.$route.params

b.通過query

//跳轉時
this.$router.push({
    path: `/two`,
    query: { id: this.message, data: 456 }
});    

//接收時            
    this.$route.query

params 和 query 都是傳遞引數的，params不會在url上面出現，并且params引數是路由的一部分，是一定要存在的 , query是我們通常看到的url后面的跟在 ？后面的顯示引數，

7.為什么vue中data必須是一個函式？

物件為參考型別，當重用組件時，由于資料物件都指向同一個data物件，當在一個組件中修改data時，其他重用的組件中的data會同時被修改；而使用回傳物件的函式，由于每次回傳的都是一個新物件（Object的實體），參考地址不同，則不會出現這個問題，

8.對MVVM模式的理解

MVVM 是 Model-View-ViewModel 的縮寫；

Model 代表資料模型，也可以在Model中定義資料修改和操作的業務邏輯；

View 代表UI組件，負責將資料模型轉化成UI展現出來；

ViewModel 監聽模型資料的改變和控制視圖行為、處理用戶互動，簡單理解就是一個同步View 和 Model的物件，連接Model和View，

在MVVM架構下，View 和 Model 之間并沒有直接的聯系，而是通過ViewModel進行互動，Model 和 ViewModel 之間的互動是雙向的， 因此View 資料的變化會同步到Model中，而Model 資料的變化也會立即反應到View 上，

ViewModel 通過雙向資料系結把 View 層和 Model 層連接了起來，而View 和 Model 之間的同步作業完全是自動的，無需人為干涉，開發者只需關注業務邏輯，不需要手動操作DOM, 不需要關注資料狀態的同步問題，復雜的資料狀態維護完全由 MVVM 統一管理，

9. vue-router 有哪幾種導航鉤子?

10.路由嵌套

路由嵌套會將其他組件渲染到該組件內，而不是進行整個頁面跳轉；

router-view本身就是將組件渲染到該位置，想要進行頁面跳轉，就要將頁面渲染到根組件，在起始配置路由時候寫：

var App = Vue.extend({ root });

router.start(App,'#app');

11.axios的特點有哪些

（1）axios是一個基于promise的HTTP庫，支持promise的所有API；

（2）它可以攔截請求和回應；

（3）它可以轉換請求資料和回應資料，并對回應回來的內容自動轉換為json型別的資料；

（4）它安全性更高，客戶端支持防御XSRF，

12.頁面重繪vuex被清空時的解決辦法

（1）localStorage 存盤到本地再回去；

（2）重新獲取介面獲取資料，

13.vue中的 ref 是什么

ref 被用來給元素或子組件注冊參考資訊，參考資訊將會注冊在父組件的 $refs 物件上；如果在普通的 DOM 元素上使用，參考指向的就是 DOM 元素；如果用在子組件上，參考就指向組件實體，

14.Promise物件是什么

Promise是異步編程的一種解決方案，它是一個容器，里面保存著某個未來才會結束的事件（通常是一個異步操作）的結果，從語法上說，Promise 是一個物件，可以獲取異步操作的訊息；Promise 提供統一的 API，各種異步操作都可以用同樣的方法進行處理；promise物件是一個建構式，用來生成Promise實體；

promise的特點是物件狀態不受外界影響且一旦狀態改變，就不會再變，任何時候都可以得到結果，Promise有三種狀態：

pending：初始狀態，不是成功或失敗狀態，

fulfilled：意味著操作成功完成，

rejected：意味著操作失敗，

優點是將異步操作以同步操作的流程表達出來，避免了層層嵌套的回呼函式，避免回呼地獄，Promise 物件提供統一的介面，使得控制異步操作更加容易，

缺點是無法取消 Promise，一旦新建它就會立即執行，無法中途取消，如果不設定回呼函式，Promise 內部拋出的錯誤，不會反應到外部， 當處于 Pending 狀態時，無法得知目前進展到哪一個階段（剛剛開始還是即將完成），

15.什么是js的冒泡？Vue中如何阻止冒泡事件

js冒泡概念：當父元素內多級子元素系結了同一個事件，js會依次從內往外或者從外往內執行每個元素的該事件，從而引發冒泡，

js解決冒泡：event.stopPropagation();

vue解決冒泡： 事件.stop,例如：@click.stop="" 、@mouseover.stop=""

16.指令周期

17.如何優化SPA應用的首屏加載速度慢的問題？

將公用的JS庫通過script標簽外部引入，減小app.bundel的大小，讓瀏覽器并行下載資源檔案，提高下載速度；

在配置路由時，頁面和組件使用懶加載的方式引入，進一步縮小 app.bundel 的體積，在呼叫某個組件時再加載對應的js檔案；

加一個首屏 loading 圖，提升用戶體驗；

18.解釋一下vuex

vuex是用來做狀態管理的，有五個常用屬性state, getter, actions, mutations, modules；

state是資料源，類似vue中的data，我們可以通過兩種方式來獲取它，mapStates, mapGerters，獲取state必須放到computed中，這樣才能保證state發生改變的時候該組件中用到state的地方都發生變化，

getters：相當于計算屬性；

mutation：同步操作, 修改資料；

action：異步操作；

modules：模塊化

補充：如何獲取vuex的state物件中的屬性？

方法1：直接從store實體中取值 this.$store.state.屬性；

方法2：利用vuex的mapState方法來獲取vuex的state物件中屬性；

//先在組件中引入vuex的mapState方法
import { mapState } from 'vuex'

//在computed中
        computed:{
            ...mapState({
                count:state => state.count   //使用ES6的箭頭函式來給count賦值
            })

        }
//在computed中也可寫成陣列格式
        computed:
            ...mapState(['count'])
        }

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

補充：v-for為什么必須加:key

a.為每個元素添加唯一標識；

b.避免重建整個串列；

c.提高修改的效率，

20.vue.cli中怎樣使用自定義組件？有遇到過哪些問題嗎？

第一步：在components目錄新建組件檔案（smithButton.vue），在組件檔案中的script代碼中一定要用 export default 將組件匯出；

第二步：在需要用的頁面（組件）中匯入：import smithButton from ‘../components/smithButton.vue’；

第三步：注入到vue的子組件的components屬性上面,components:{smithButton}；

第四步：在template視圖view中使用，<smith-button> </smith-button>

問題：smithButton命名，使用的時候則smith-button（HTML不認識大寫字母），

21.vuex有哪幾種屬性？

有五種，分別是 State、Getter、Mutation 、Action、Module；

state為單一狀態樹，在state中需要定義我們所需要管理的陣列、物件、字串等等，只有在這里定義了，在vue.js的組件中才能獲取定義物件的狀態；

getter類似vue.js的計算屬性，當我們需要從store的state中派生出一些狀態時，就需要使用getter，getter會接收state作為第一個引數，而且getter的回傳值會根據它的依賴被快取起來，只有getter中的依賴值（state中的某個需要派生狀態的值）發生改變的時候才會被重新計算；

更改store中state狀態的唯一方法就是提交mutation，每個mutation都有一個字串型別的事件型別和一個回呼函式，我們需要改變state的值就要在回呼函式中改變，要執行這個回呼函式，就需要執行一個相應的呼叫方法：store.commit；

action可以提交mutation，在action中可以執行store.commit，而且action中可以有任何的異步操作，在頁面中如果我們要用這個action，就需要執行store.dispatch；

當state中很復雜臃腫的時候，module可以將store分割成模塊，每個模塊中擁有自己的state、mutation、action和getter，

22.不用Vuex會帶來什么問題？

（1）可維護性會下降，要想修改資料，得維護三個地方；

（2）可讀性會下降，因為一個組件里的資料，看不出來是從哪來；

（3）增加耦合，大量的上傳派發，會讓耦合性大大的增加，本來Vue用Component就是為了減少耦合，現在這么用，和組件化的初衷相背，

23.Vue前端實作購物車

利用vuex + vant 實作購物車功能，概括有以下步驟：

（1）mock模擬資料；

（2）利用veux操作商品的選中狀態；

（3）全選與取消全選；

（4）動態reduce計算價格；

（5）結算取出商品id；

（6）利用manageStatus判斷管理狀態，管理洗掉商品；

（7）未洗掉商品的狀態存盤，

24.methods、computed、watch的區別

methods是個方法，執行的時候需要事件進行觸發；

computed是一個計算屬性，是實時回應的，只要data中的屬性發生了變化那么就會觸發computed，計算屬性是基于屬性的依賴進行快取的，methods呼叫的時候需要加()，而computed呼叫的時候不需要加()；

watch用來監聽屬性的變化，當值發生變化的時候來執行特定的函式，watch監聽屬性的時候會有2個引數newVal和oldVal一個新值一個舊值，

25.簡述vuex的資料傳遞流程

當組件進行資料修改的時候我們需要呼叫dispatch來觸發actions里面的方法，actions里面的每個方法中都會 有一個commit方法，當方法執行的時候會通過commit來觸發mutations里面的方法進行資料的修改，mutations里面的每個函式都會有一個state引數，這樣就可以在mutations里面進行state的資料修改 ，當資料修改完畢后，會傳導給頁面，頁面的資料也會發生改變，

26.組件中寫 name 選項有什么作用？

（1）專案使用 keep-alive 時，可搭配組件 name 進行快取過濾；

（2）DOM 做遞回組件時需要呼叫自身 name；

（3）vue-devtools 除錯工具里顯示的組見名稱是由vue中組件name決定的，

27.<keep-alive></keep-alive>的作用是什么？

<keep-alive></keep-alive> 包裹動態組件時，會快取不活動的組件實體，主要用于保留組件狀態或避免重新渲染，

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

基于vue的前端組件庫，先npm安裝，然后import引入樣式和js，vue.use（mintUi）全域引入，在單個組件區域引入：import {Toast} from ‘mint-ui’，

組件一：Toast(‘登錄成功’)；

組件二：mint-header；

組件三：mint-swiper

29.為什么避免 v-if 和 v-for 用在一起？

當 Vue 處理指令時，v-for 比 v-if 具有更高的優先級，通過v-if 移動到容器元素，不會再重復遍歷串列中的每個值，取而代之的是，我們只檢查它一次，且不會在 v-if 為否的時候運算 v-for，

30.怎樣理解 Vue 的單向資料流？

所有的 prop 都使得其父子 prop 之間形成了一個單向下行系結：父級 prop 的更新會向下流動到子組件中，但是反過來則不行；

這樣會防止從子組件意外改變父級組件的狀態，從而導致應用的資料流向難以理解；

除此之外，每次父級組件發生更新時，子組件中所有的 prop 都將會重繪為最新的值，

所以不應該在一個子組件內部改變 prop，如果你這樣做了，Vue 會在瀏覽器的控制臺中發出警告；

子組件想修改時，只能通過 $emit 派發一個自定義事件，父組件接收到后，由父組件來修改，

31.Vue 的父組件和子組件生命周期鉤子函式執行順序？

Vue 的父組件和子組件生命周期鉤子函式執行順序可以歸類為以下 4 部分：

加載渲染程序

父 beforeCreate --> 父 created --> 父 beforeMount --> 子 beforeCreate --> 子 created --> 子 beforeMount --> 子 mounted --> 父 mounted

子組件更新程序

父 beforeUpdate --> 子 beforeUpdate --> 子 updated --> 父 updated

父組件更新程序

父 beforeUpdate --> 父 updated

銷毀程序

父 beforeDestroy --> 子 beforeDestroy --> 子 destroyed --> 父 destroyed

32.在哪個生命周期內呼叫異步請求？

可以在鉤子函式 created、beforeMount、mounted 中進行呼叫，因為在這三個鉤子函式中，data 已經創建，可以將服務端端回傳的資料進行賦值，但是更推薦在 created 鉤子函式中呼叫異步請求，因為在 created 鉤子函式中呼叫異步請求有以下優點：

（1）能更快獲取到服務端資料，減少頁面 loading 時間；

（2）ssr 不支持 beforeMount 、mounted 鉤子函式，所以放在 created 中有助于一致性；

33.你有對 Vue 專案進行哪些優化？

（1）代碼層面的優化

v-if 和 v-show 區分使用場景；

computed 和 watch 區分使用場景；

v-for 遍歷必須為 item 添加 key，且避免同時使用 v-if；

長串列性能優化；

事件的銷毀；

圖片資源懶加載；

路由懶加載；

第三方插件的按需引入；

優化無限串列性能；

服務端渲染 SSR or 預渲染；

（2）Webpack 層面的優化

Webpack 對圖片進行壓縮；

減少 ES6 轉為 ES5 的冗余代碼；

提取公共代碼；

模板預編譯；

提取組件的 CSS；

優化 SourceMap；

構建結果輸出分析；

Vue 專案的編譯優化；

（3）基礎的 Web 技術的優化

開啟 gzip 壓縮；

瀏覽器快取；

CDN 的使用；

使用 Chrome Performance 查找性能瓶頸；

34.虛擬 DOM 的優缺點

優點：

保證性能下限： 框架的虛擬 DOM 需要適配任何上層 API 可能產生的操作，它的一些 DOM 操作的實作必須是普適的，所以它的性能并不是最優的；但是比起粗暴的 DOM 操作性能要好很多，因此框架的虛擬 DOM 至少可以保證在不需要手動優化的情況下，依然可以提供還不錯的性能，即保證性能的下限；

無需手動操作 DOM： 我們不再需要手動去操作 DOM，只需要寫好 View-Model 的代碼邏輯，框架會根據虛擬 DOM 和 資料雙向系結，幫我們以可預期的方式更新視圖，極大提高我們的開發效率；

跨平臺： 虛擬 DOM 本質上是 JavaScript 物件，而 DOM 與平臺強相關，相比之下虛擬 DOM 可以進行更方便地跨平臺操作，例如服務器渲染、weex 開發等等，

缺點：

無法進行極致優化： 雖然虛擬 DOM + 合理的優化，足以應對絕大部分應用的性能需求，但在一些性能要求極高的應用中虛擬 DOM 無法進行針對性的極致優化，

35.虛擬 DOM 實作原理

虛擬 DOM 的實作原理主要包括以下 3 部分：

（1）用 JavaScript 物件模擬真實 DOM 樹，對真實 DOM 進行抽象；

（2）diff 演算法 — 比較兩棵虛擬 DOM 樹的差異；

（3）pach 演算法 — 將兩個虛擬 DOM 物件的差異應用到真正的 DOM 樹，

36.直接給一個陣列項賦值，Vue 能檢測到變化嗎？

由于 JavaScript 的限制，Vue 不能檢測到以下陣列的變動：

（1）利用索引直接設定一個陣列項時，例如：vm.items[indexOfItem] = newValue

（2）當你修改陣列的長度時，例如：vm.items.length = newLength

為了解決第一個問題，Vue 提供了以下操作方法：

// Vue.set
Vue.set(vm.items, indexOfItem, newValue)

// vm.$set，Vue.set的一個別名
vm.$set(vm.items, indexOfItem, newValue)

// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)

為了解決第二個問題，Vue 提供了以下操作方法：

// Array.prototype.splice
vm.items.splice(newLength)

37.在Vue生命周期什么階段才能訪問操作DOM？

在鉤子函式 mounted 被呼叫前，Vue 已經將編譯好的模板掛載到頁面上，所以在 mounted 中可以訪問操作 DOM，

38.Vue-router 原理

vue-router通過hash與history兩種方式實作前端路由；更新視圖但不重新請求頁面是前端路由原理的核心之一，目前在瀏覽器環境中這一功能的實作主要有兩種方式：

（1）hash：利用 URL 中的 hash. 形式上會多個# ；如下，

http://localhost:8080/#/login

hash("#") 的作用是加載 URL 中指示網頁中的位置； # 本身以及它后面的字符稱之為 hash，可通過 window.location.hash 獲取；

hash 雖然出現在 url 中，但不會被包括在 http 請求中，它是用來指導瀏覽器動作的，對服務器端完全無用，因此改變 hash 不會重新加載頁面， 每一次改變 hash(window.localtion.hash)都會在瀏覽器訪問歷史中增加一個記錄， 利用 hash 的以上特點，就可以來實作前端路由"更新視圖但不重新請求頁面"的功能了，

（2）history：html5 中新增的方法，形式上比 hash更好看；如下，

http://localhost:8080/login

History interface 是瀏覽器歷史記錄堆疊提供的介面，通過back()、forward()、go()等方法，可以讀取瀏覽器歷史記錄堆疊的資訊，進行各種跳轉操作，

從 HTML5開始，History interface 提供了2個新的方法：pushState()、replaceState() 使得我們 可以對瀏覽器歷史記錄堆疊進行修改，這2個方法有個共同的特點：當呼叫他們修改瀏覽器歷史堆疊后，雖然當前url改變了，但瀏覽器不會立即發送請求該url，這就為單頁應用前端路由，更新視圖但不重新請求頁面提供了基礎，

39.router-link 和 $router.push 實作跳轉的原理

router-link

默認會渲染為 a 標簽，可以通過 tag 屬性修改為其他標簽，自動為 a 標簽添加 click 事件，然后執行 $router.push() 實作跳轉；

$router.push

根據路由配置的 mode 確定使用 HTML5History 還是 HashHistory 實作跳轉；

HTML5History：呼叫 window.history.pushState() 跳轉；

HashHistory：呼叫 HashHistory.push() 跳轉，

40.promise 和 await/async 區別

區別主要在于按順序呼叫多個異步函式時的寫法和報錯獲取，

Promise方式

ajax().then(func1).then(func2).then(func3).then(func4)

await/async方式

async function demo(){
 await res = ajax();
 await res = func1(res);
 await res = func2(res);
 await res = func3(res);
 await res = func4(res);
}

當遇到多個異步函式時 Promise 方式需要很多 .then，這樣會導致代碼不易讀且結構復雜；await/async 方式讓異步代碼的格式與同步代碼一樣更易讀，

報錯讀取 Promise 使用 .catch 抓取報錯，await/async 使用 try...catch... 方式抓取報錯，

41.v-if 和 v-show 的區別

v-if	通過洗掉DOM元素實作元素的隱藏； 惰性：只有條件為真時, 才會加載元素到DOM；
v-show	通過設定元素的css樣式 display:none 實作元素的隱藏, 不操作DOM； 非惰性：不管條件真與假, 都會加載元素到 DOM；

v-if 的開銷比 v-show 更大，v-show 有更高的初始化渲染消耗；

一個元素頻繁進行隱藏和顯示操作時使用 v-show 更加合適；一個元素不頻繁進行隱藏和顯示操作時使用 v-if 更合適，

42.什么是單頁應用？

單頁應用的全稱是 Single Page Application，簡稱 SPA，通過路由的變更，區域切換網頁內容取代整個頁面的重繪操作；

三大框架 React、Vue、Angular 均采用單頁應用模式；

優點：用戶操作體驗好，用戶不用重繪頁面；區域更新, 對服務器壓力小；良好的前后端分離，后端不再負責頁面渲染和輸出作業，

缺點：首次加載耗時長, 速度慢；SEO不友好, 需要采用 prerender 服務進行完善，

43.Vue的權限管理

整體思路：

后端回傳用戶權限，前端根據用戶權限處理得到左側選單；所有路由在前端定義好，根據后端回傳的用戶權限篩 選出需要掛載的路由，然后使用 addRoutes 動態掛載路由，

具體思路：

（1）路由定義，分為初始路由和動態路由，一般來說初始路由只有 login，其他路由都掛載在 home 路由之下 需要動態掛載；

（2）用戶登錄，登錄成功之后得到 token，保存在 sessionStorage，跳轉到 home，此時會進入路由攔截根 據 token 獲取用戶權限串列；

（3）全域路由攔截，根據當前用戶有沒有 token 和 權限串列進行相應的判斷和跳轉，當沒有 token 時跳到 login，當有 token 而沒有權限串列時去發請求獲取權限等等邏輯；

（4）使用 Vuex 管理路由表, 根據 Vuex 動態渲染側邊欄組件，

44.vue 的 watch 是否可以監聽陣列

能監聽

陣列的元素增刪：例如 push 和 splice 操作；

陣列元素內部的變化：必須手動開啟 deep:true 配置, 才能監聽到，

不能監聽

陣列中已有值的替換，

45.前端的優化方案

（1）盡量減少閉包的使用；

（2）進行 js 和 css 檔案的合并，減少http請求次數，進行可能講檔案壓縮，減少請求大小；

（3）使用字體圖示和svg圖示，代替傳統的png格式；

（4）減少DOM操作，主要減少DOM的重繪和重排；

（5）采用圖片懶加載，加快頁面啟動速度，加載頁面時先不加載圖片，使用一張背景圖占位，等頁面加載完畢后再加載圖片；

（6）盡可能使用事件委托來處理系結操作，減少DOM的頻繁操作（事件委托：為父元素添加事件, 利用冒泡機制，讓父元素處理所有子元素的事件）；

（7）減少 css 運算式的使用；

（8）減少 css 標簽選擇器的使用；

（9）頁面資料獲取方式采用異步和延遲分批加載，