1.vue性能優(yōu)化的幾種方案
1.正確的選擇v-if和v-show的使用聊疲，v-if有更高的切換消耗希停，v-show有更高的初始消耗
2.路由懶加載：當(dāng)頁面很多，組件很多的時候奢人，SPA頁面在首次加載的時候攻走，就會變的很慢殷勘。這是因?yàn)関ue首次加載的時候把可能一開始看不見的組件也一次加載了，這個時候就需要對頁面進(jìn)行優(yōu)化昔搂，就需要異步組件了玲销。
3.緩存：spa頁面采用keep-alive緩存組件
4.圖片懶加載：提高頁面加載速度，不在可視區(qū)域內(nèi)的圖片先不加載摘符，只有滾動到可視區(qū)域的時候才加載痒玩。一般借助外部插件如 vue-lazyload淳附。使用只需要npm install vue-lazyload然后頁面引入即可使用议慰。
5.SEO優(yōu)化： ssr服務(wù)端渲染
6.打包優(yōu)化：對于一些過大的包采取cdn引入文件的方式而不是直接下載到本地蠢古。
2.v-show和v-if誰的性能更高
v-show本質(zhì)就是通過控制css中的display設(shè)置為none，控制隱藏别凹，只會編譯?次草讶；v-if是動態(tài)的向DOM樹內(nèi)添加或者刪除DOM元素，若初始值為false炉菲，就不會編譯了堕战。?且v-if不停的銷毀和創(chuàng)建?較消耗性能。所以如果要頻繁切換那么v-show性能更高拍霜，如果不是頻繁切換嘱丢，v-if性能更高
3.vue之間的數(shù)據(jù)傳遞
父到子：props
子到父：$emit自定義事件
復(fù)雜組件的傳遞：通過vuex
4.單文件組件中如何讓樣式只在當(dāng)前組件生效
在組件中的style前面加上scoped
5.vue中的生命周期（鉤子函數(shù)）
共有8+2個鉤子函數(shù) 基本的有8個，keep-alive中有2個
beforeCreate（創(chuàng)建前） / created（創(chuàng)建后） / beforeMount（掛載前） / mounted（掛載后） beforeUpdate（更新前）/ updated（更新后） /beforeDestroy（銷毀前）/ destroyed（銷毀后）
其中第一次加載頁面會觸發(fā) beforeCreate, created, beforeMount, mounted 這幾個鉤子
另外在keep-alive中祠饺，vue新增了兩個鉤子函數(shù)
activated：因?yàn)槭褂昧薻eep-alive的組件會被緩存越驻，所以created,mounted這種的鉤子函數(shù)只會執(zhí)行一次， 如果我們的子組件需要在每次加載的時候進(jìn)行某些操作道偷，可以使用activated鉤子觸發(fā)缀旁。
deactivated：組件被移除時使用。
6.vue父子組件生命周期的執(zhí)行順序
加載渲染過程
父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
子組件更新過程
父beforeUpdate->子beforeUpdate->子updated->父updated
父組件更新過程
父beforeUpdate->父updated
銷毀過程
父beforeDestroy->子beforeDestroy->子destroyed->父destroyed
7.在vue中如何獲取DOM元素
給元素添加ref屬性 通過this.$refs.domName獲取
8.key的作用
需要使用key來給每個節(jié)點(diǎn)做一個唯一標(biāo)識勺鸦，Diff算法就可以正確的識別此節(jié)點(diǎn)并巍。
作用主要是為了高效的更新虛擬DOM。
9.$nextTick的使用場景（作用）
因?yàn)関ue中數(shù)據(jù)更新是異步的换途，當(dāng)你修改了data的值然后馬上獲取這個dom元素的值懊渡，是不能獲取到更新后的值，
你需要使用$nextTick這個回調(diào)军拟，讓修改后的data值渲染更新到dom元素之后在獲取剃执，才能成功。
10.v-if和v-for的優(yōu)先級
v-if 與 v-for 一起使用時吻谋，v-for 具有比 v-if 更高的優(yōu)先級忠蝗，這意味著 v-if 將分別重復(fù)運(yùn)行于每個 v-for 循環(huán)中。所以漓拾，不推薦v-if和v-for同時使用阁最。如果非要一起用，可以把v-if放到外層元素骇两，或者不用v-if速种，先在計(jì)算屬性中篩選出數(shù)據(jù)，然后在v-for
11.v-model的原理
vue 雙向數(shù)據(jù)綁定是通過 數(shù)據(jù)劫持 結(jié)合 發(fā)布訂閱模式的方式來實(shí)現(xiàn)的低千， 也就是說數(shù)據(jù)和視圖同步配阵，數(shù)據(jù)發(fā)生變化馏颂，視圖跟著變化，視圖變化棋傍，數(shù)據(jù)也隨之發(fā)生改變救拉；
核心：關(guān)于VUE雙向數(shù)據(jù)綁定，其核心是 Object.defineProperty()方法瘫拣。
12.什么是mvvm
MVVM 將數(shù)據(jù)雙向綁定（data-binding）作為核心思想亿絮，View 和 Model 之間沒有聯(lián)系，它們通過 ViewModel 這個橋梁進(jìn)行交互麸拄。
Model 和 ViewModel 之間的交互是雙向的派昧，因此 View 的變化會自動同步到 Model，而 Model 變化也會立即反映到 View 上顯示拢切。
當(dāng)用戶操作 View蒂萎，ViewModel 感知到變化，然后通知 Model 發(fā)生相應(yīng)改變淮椰；反之當(dāng) Model 發(fā)生改變五慈，ViewModel 也能感知到變化，使 View 作出相應(yīng)更新实苞。
13.如何優(yōu)化SPA應(yīng)用的首屏加載速度慢的問題
將公用的JS庫通過script標(biāo)簽外部引入豺撑，減小app.bundel的大小，讓瀏覽器并行下載資源文件黔牵，提高下載速度聪轿；
在配置 路由時，頁面和組件使用懶加載的方式引入猾浦，進(jìn)一步縮小 app.bundel 的體積陆错，在調(diào)用某個組件時再加載對應(yīng)的js文件；
加一個首屏 loading 圖金赦，提升用戶體驗(yàn)音瓷；
14.vue路由的兩種模式，hash與history的區(qū)別
hash —— 即地址欄 URL 中的 # 符號（此 hash 不是密碼學(xué)里的散列運(yùn)算）夹抗。
比如這個 URL：ABC Home Page - ABC.com?的值為 #/hello绳慎。它的特點(diǎn)在于：hash 雖然出現(xiàn)在 URL 中，但不會被包括在 HTTP 請求中漠烧，對后端完全沒有影響杏愤，因此改變 hash 不會重新加載頁面。
history —— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法已脓。（需要特定瀏覽器支持）
這兩個方法應(yīng)用于瀏覽器的歷史記錄棧珊楼，在當(dāng)前已有的 back、forward度液、go 的基礎(chǔ)之上厕宗，它們提供了對歷史記錄進(jìn)行修改的 功能画舌。只是當(dāng)它們執(zhí)行修改時，雖然改變了當(dāng)前的 URL已慢，但瀏覽器不會立即向后端發(fā)送請求曲聂。
因此可以說，hash 模式和 history 模式都屬于瀏覽器自身的特性蛇受，Vue-Router 只是利用了這兩個特性（通過調(diào)用瀏覽器提供 的接口）來實(shí)現(xiàn)前端路由句葵。
注意！＞ぱ觥！history模式下剂碴，前端的url必須和實(shí)際向后端發(fā)起請求的url 一致把将，如http://www.abc.com/book/id?。如果后端缺少對/book/id 的路由處理忆矛，將返回404錯誤察蹲。刷新也會報404因?yàn)闀?shí)際去請求數(shù)據(jù)。 （需要后端進(jìn)行配置催训。vue官網(wǎng)有介紹）
15.如何解決vuex數(shù)據(jù)刷新丟失的問題
因?yàn)閟tore里的數(shù)據(jù)是保存在運(yùn)行內(nèi)存中的,當(dāng)頁面刷新時洽议，頁面會重新加載vue實(shí)例，store里面的數(shù)據(jù)就會被重新賦值
如何解決：
一種是state里的數(shù)據(jù)全部是通過請求來觸發(fā)action或mutation來改變(不推薦漫拭，當(dāng)vuex數(shù)據(jù)很多項(xiàng)目很大的時候不適用)
一種是將state里的數(shù)據(jù)保存一份到本地存儲(localStorage亚兄、sessionStorage、cookie）中 （推薦）
16.vue中如何實(shí)現(xiàn)跨域訪問
1.開發(fā)環(huán)境：配置vue.config.js proxy代理
2.生產(chǎn)環(huán)境：配置nginx代理
更多文章請關(guān)注：前端小學(xué)弟
文章來源于CSDN采驻，作者前端徐老濕
