vue面試題（微信公眾號：前端面試成長之路）

1.vue優(yōu)點？
答：輕量級框架：只關(guān)注視圖層灿意，是一個構(gòu)建數(shù)據(jù)的視圖集合估灿，大小只有幾十kb；
簡單易學(xué)：國人開發(fā)脾歧，中文文檔甲捏，不存在語言障礙 演熟，易于理解和學(xué)習(xí)鞭执；
雙向數(shù)據(jù)綁定：保留了angular的特點司顿，在數(shù)據(jù)操作方面更為簡單；
組件化：保留了react的優(yōu)點兄纺，實現(xiàn)了html的封裝和重用大溜，在構(gòu)建單頁面應(yīng)用方面有著獨特的優(yōu)勢；
視圖估脆，數(shù)據(jù)钦奋，結(jié)構(gòu)分離：使數(shù)據(jù)的更改更為簡單，不需要進行邏輯代碼的修改疙赠，只需要操作數(shù)據(jù)就能完成相關(guān)操作付材；
虛擬DOM：dom操作是非常耗費性能的， 不再使用原生的dom操作節(jié)點圃阳，極大解放dom操作厌衔，但具體操作的還是dom不過是換了另一種方式；
運行速度更快:相比較與react而言捍岳，同樣是操作虛擬dom富寿，就性能而言，vue存在很大的優(yōu)勢锣夹。
2.vue父組件向子組件傳遞數(shù)據(jù)页徐？
答：通過props
3.子組件像父組件傳遞事件？

答： $emit方法

4.v-show和v-if指令的共同點和不同點银萍？
答: 共同點：都能控制元素的顯示和隱藏变勇；
不同點：實現(xiàn)本質(zhì)方法不同，v-show本質(zhì)就是通過控制css中的display設(shè)置為none贴唇，控制隱藏贰锁，只會編譯一次；v-if是動態(tài)的向DOM樹內(nèi)添加或者刪除DOM元素滤蝠，若初始值為false豌熄，就不會編譯了。而且v-if不停的銷毀和創(chuàng)建比較消耗性能物咳。
總結(jié)：如果要頻繁切換某節(jié)點锣险，使用v-show(切換開銷比較小，初始開銷較大)览闰。如果不需要頻繁切換某節(jié)點使用v-if（初始渲染開銷較小芯肤，切換開銷比較大）。
5.如何讓CSS只在當前組件中起作用压鉴？
答：在組件中的style前面加上scoped
6.keep-alive 的作用是什么?
答:keep-alive 是 Vue 內(nèi)置的一個組件崖咨，可以使被包含的組件保留狀態(tài)，或避免重新渲染油吭。
7.如何獲取dom?

答：ref="domName" 用法：this.$refs.domName

參考資料:https://www.cnblogs.com/gitByLegend/p/10868340.html

8.說出幾種vue當中的指令和它的用法击蹲？
答：v-model雙向數(shù)據(jù)綁定署拟；
v-for循環(huán)；
v-if v-show 顯示與隱藏歌豺；
v-on事件推穷；
v-once: 只綁定一次。
9. vue-loader是什么类咧？使用它的用途有哪些馒铃？
答：vue文件的一個加載器，將template/js/style轉(zhuǎn)換成js模塊痕惋。
用途：js可以寫es6区宇、style樣式可以scss或less、template可以加jade等
10.為什么使用key?
答：需要使用key來給每個節(jié)點做一個唯一標識值戳，Diff算法就可以正確的識別此節(jié)點萧锉。
作用主要是為了高效的更新虛擬DOM。
11.axios及安裝?
答：請求后臺資源的模塊述寡。npm install axios --save裝好柿隙，
js中使用import進來，然后.get或.post鲫凶。返回在.then函數(shù)中如果成功禀崖，失敗則是在.catch函數(shù)中。
12.v-modal的使用螟炫。
答：v-model用于表單數(shù)據(jù)的雙向綁定波附，其實它就是一個語法糖，這個背后就做了兩個操作：
v-bind綁定一個value屬性昼钻；
v-on指令給當前元素綁定input事件掸屡。
13.請說出vue.cli項目中src目錄每個文件夾和文件的用法？
答：assets文件夾是放靜態(tài)資源然评；components是放組件仅财；router是定義路由相關(guān)的配置; app.vue是一個應(yīng)用主組件；main.js是入口文件碗淌。
14.分別簡述computed和watch的使用場景
答：computed:
　　　　當一個屬性受多個屬性影響的時候就需要用到computed
　　　　最典型的栗子： 購物車商品結(jié)算的時候
watch:
　　　　當一條數(shù)據(jù)影響多條數(shù)據(jù)的時候就需要用watch
　　　　栗子：搜索數(shù)據(jù)
15.v-on可以監(jiān)聽多個方法嗎盏求？
答：可以，栗子：<input type="text" v-on="{ input:onInput,focus:onFocus,blur:onBlur, }">亿眠。

**16.$nextTick的使用**
答：當你修改了data的值然后馬上獲取這個dom元素的值碎罚，是不能獲取到更新后的值，
你需要使用$nextTick這個回調(diào)纳像，讓修改后的data值渲染更新到dom元素之后在獲取荆烈，才能成功。

17.vue組件中data為什么必須是一個函數(shù)竟趾？
答：因為JavaScript的特性所導(dǎo)致憔购，在component中宫峦，data必須以函數(shù)的形式存在，不可以是對象倦始。組件中的data寫成一個函數(shù)，數(shù)據(jù)以函數(shù)返回值的形式定義山卦，這樣每次復(fù)用組件的時候鞋邑，都會返回一份新的data，相當于每個組件實例都有自己私有的數(shù)據(jù)空間账蓉，它們只負責(zé)各自維護的數(shù)據(jù)枚碗，不會造成混亂。而單純的寫成對象形式铸本，就是所有的組件實例共用了一個data肮雨，這樣改一個全都改了。
18.漸進式框架的理解
答：主張最少箱玷；可以根據(jù)不同的需求選擇不同的層級怨规；
19.Vue中雙向數(shù)據(jù)綁定是如何實現(xiàn)的？
答：vue 雙向數(shù)據(jù)綁定是通過 數(shù)據(jù)劫持 結(jié)合 發(fā)布訂閱模式的方式來實現(xiàn)的锡足， 也就是說數(shù)據(jù)和視圖同步波丰，數(shù)據(jù)發(fā)生變化，視圖跟著變化舶得，視圖變化掰烟，數(shù)據(jù)也隨之發(fā)生改變；
核心：關(guān)于VUE雙向數(shù)據(jù)綁定沐批，其核心是 Object.defineProperty()方法纫骑。
20.單頁面應(yīng)用和多頁面應(yīng)用區(qū)別及優(yōu)缺點
答：單頁面應(yīng)用（SPA），通俗一點說就是指只有一個主頁面的應(yīng)用九孩，瀏覽器一開始要加載所有必須的 html, js, css先馆。所有的頁面內(nèi)容都包含在這個所謂的主頁面中。但在寫的時候躺彬，還是會分開寫（頁面片段）磨隘，然后在交互的時候由路由程序動態(tài)載入，單頁面的頁面跳轉(zhuǎn)顾患，僅刷新局部資源番捂。多應(yīng)用于pc端。
多頁面（MPA）江解，就是指一個應(yīng)用中有多個頁面设预，頁面跳轉(zhuǎn)時是整頁刷新
單頁面的優(yōu)點：
用戶體驗好，快犁河，內(nèi)容的改變不需要重新加載整個頁面鳖枕，基于這一點spa對服務(wù)器壓力較衅翘荨；前后端分離宾符；頁面效果會比較炫酷（比如切換頁面內(nèi)容時的專場動畫）酿秸。
單頁面缺點：
不利于seo；導(dǎo)航不可用魏烫，如果一定要導(dǎo)航需要自行實現(xiàn)前進辣苏、后退。（由于是單頁面不能用瀏覽器的前進后退功能哄褒，所以需要自己建立堆棧管理）稀蟋；初次加載時耗時多；頁面復(fù)雜度提高很多呐赡。

注：https://blog.csdn.net/weixin_44633281/article/details/100132009

21.v-if和v-for的優(yōu)先級
答：當 v-if 與 v-for 一起使用時退客，v-for 具有比 v-if 更高的優(yōu)先級，這意味著 v-if 將分別重復(fù)運行于每個 v-for 循環(huán)中链嘀。所以萌狂，不推薦v-if和v-for同時使用。
如果v-if和v-for一起用的話怀泊，vue中的的會自動提示v-if應(yīng)該放到外層去粥脚。
22.assets和static的區(qū)別
答：相同點：assets和static兩個都是存放靜態(tài)資源文件。項目中所需要的資源文件圖片包个，字體圖標刷允，樣式文件等都可以放在這兩個文件下，這是相同點
不相同點：assets中存放的靜態(tài)資源文件在項目打包時碧囊，也就是運行npm run build時會將assets中放置的靜態(tài)資源文件進行打包上傳树灶，所謂打包簡單點可以理解為壓縮體積，代碼格式化糯而。而壓縮后的靜態(tài)資源文件最終也都會放置在static文件中跟著index.html一同上傳至服務(wù)器天通。static中放置的靜態(tài)資源文件就不會要走打包壓縮格式化等流程，而是直接進入打包好的目錄熄驼，直接上傳至服務(wù)器像寒。因為避免了壓縮直接進行上傳，在打包時會提高一定的效率瓜贾，但是static中的資源文件由于沒有進行壓縮等操作诺祸，所以文件的體積也就相對于assets中打包后的文件提交較大點。在服務(wù)器中就會占據(jù)更大的空間祭芦。
建議：將項目中template需要的樣式文件js文件等都可以放置在assets中筷笨，走打包這一流程。減少體積。而項目中引入的第三方的資源文件如iconfoont.css等文件可以放置在static中胃夏，因為這些引入的第三方文件已經(jīng)經(jīng)過處理轴或，我們不再需要處理，直接上傳仰禀。
23.vue常用的修飾符
答：.stop：等同于JavaScript中的event.stopPropagation()照雁，防止事件冒泡；
.prevent：等同于JavaScript中的event.preventDefault()答恶，防止執(zhí)行預(yù)設(shè)的行為（如果事件可取消饺蚊，則取消該事件，而不停止事件的進一步傳播）亥宿；
.capture：與事件冒泡的方向相反卸勺，事件捕獲由外到內(nèi)砂沛；
.self：只會觸發(fā)自己范圍內(nèi)的事件烫扼，不包含子元素；
.once：只會觸發(fā)一次碍庵。
24.vue的兩個核心點
答：數(shù)據(jù)驅(qū)動映企、組件系統(tǒng)
數(shù)據(jù)驅(qū)動：ViewModel，保證數(shù)據(jù)和視圖的一致性静浴。
組件系統(tǒng)：應(yīng)用類UI可以看作全部是由組件樹構(gòu)成的堰氓。

注：從vue繼承angular和react優(yōu)點方面記憶

25.vue和jQuery的區(qū)別

答：jQuery是使用選擇器（$）選取DOM對象，對其進行賦值苹享、取值双絮、事件綁定等操作，其實和原生的HTML的區(qū)別只在于可以更方便的選取和操作DOM對象得问，而數(shù)據(jù)和界面是在一起的囤攀。比如需要獲取label標簽的內(nèi)容：$("lable").val();,它還是依賴DOM元素的值。
Vue則是通過Vue對象將數(shù)據(jù)和View完全分離開來了宫纬。對數(shù)據(jù)進行操作不再需要引用相應(yīng)的DOM對象焚挠，可以說數(shù)據(jù)和View是分離的，他們通過Vue對象這個vm實現(xiàn)相互的綁定漓骚。這就是傳說中的MVVM蝌衔。

26. 引進組件的步驟
答: 在template中引入組件；
在script的第一行用import引入路徑蝌蹂；
用component中寫上組件名稱噩斟。
27.delete和Vue.delete刪除數(shù)組的區(qū)別
答：delete只是被刪除的元素變成了 empty/undefined 其他的元素的鍵值還是不變。Vue.delete 直接刪除了數(shù)組 改變了數(shù)組的鍵值孤个。
28.SPA首屏加載慢如何解決
答：安裝動態(tài)懶加載所需插件亩冬；使用CDN資源。
29.Vue-router跳轉(zhuǎn)和location.href有什么區(qū)別
答：使用location.href='/url'來跳轉(zhuǎn)，簡單方便硅急，但是刷新了頁面覆享；
使用history.pushState('/url')父阻，無刷新頁面糕再，靜態(tài)跳轉(zhuǎn)；
引進router传黄，然后使用router.push('/url')來跳轉(zhuǎn)荚板，使用了diff算法凤壁，實現(xiàn)了按需加載，減少了dom的消耗跪另。
其實使用router跳轉(zhuǎn)和使用history.pushState()沒什么差別的拧抖，因為vue-router就是用了history.pushState()，尤其是在history模式下免绿。
30. vue slot
答：簡單來說唧席，假如父組件需要在子組件內(nèi)放一些DOM，那么這些DOM是顯示嘲驾、不顯示淌哟、在哪個地方顯示、如何顯示辽故，就是slot分發(fā)負責(zé)的活徒仓。
31.你們vue項目是打包了一個js文件，一個css文件誊垢，還是有多個文件掉弛？
答：根據(jù)vue-cli腳手架規(guī)范，一個js文件喂走，一個CSS文件殃饿。
32.Vue里面router-link在電腦上有用，在安卓上沒反應(yīng)怎么解決缴啡？
答：Vue路由在Android機上有問題壁晒，babel問題，安裝babel polypill插件解決业栅。
33.Vue2中注冊在router-link上事件無效解決方法
答： 使用@click.native秒咐。原因：router-link會阻止click事件，.native指直接監(jiān)聽一個原生事件碘裕。
34.RouterLink在IE和Firefox中不起作用（路由不跳轉(zhuǎn)）的問題
答: 方法一：只用a標簽携取，不適用button標簽；方法二：使用button標簽和Router.navigate方法
35.axios的特點有哪些
答：從瀏覽器中創(chuàng)建XMLHttpRequests帮孔；
node.js創(chuàng)建http請求雷滋；
支持Promise API不撑；
攔截請求和響應(yīng)；
轉(zhuǎn)換請求數(shù)據(jù)和響應(yīng)數(shù)據(jù)晤斩；
取消請求焕檬；
自動換成json。
axios中的發(fā)送字段的參數(shù)是data跟params兩個澳泵，兩者的區(qū)別在于params是跟請求地址一起發(fā)送的实愚，data的作為一個請求體進行發(fā)送
params一般適用于get請求，data一般適用于post put 請求兔辅。

注：http://www.axios-js.com/zh-cn/docs/

36.請說下封裝 vue 組件的過程腊敲？
答：1. 建立組件的模板，先把架子搭起來维苔，寫寫樣式碰辅，考慮好組件的基本邏輯。(os：思考1小時介时，碼碼10分鐘没宾，程序猿的準則。)
　　2. 準備好組件的數(shù)據(jù)輸入潮尝。即分析好邏輯榕吼，定好 props 里面的數(shù)據(jù)饿序、類型勉失。
　　3. 準備好組件的數(shù)據(jù)輸出。即根據(jù)組件邏輯原探，做好要暴露出來的方法乱凿。
　　4. 封裝完畢了，直接調(diào)用即可

37.params和query的區(qū)別**
答：用法：query要用path來引入咽弦，params要用name來引入徒蟆，接收參數(shù)都是類似的，分別是this.route.query.name和this.route.params.name型型。
url地址顯示：query更加類似于我們ajax中g(shù)et傳參段审，params則類似于post，說的再簡單一點闹蒜，前者在瀏覽器地址欄中顯示參數(shù)寺枉，后者則不顯示
注意點：query刷新不會丟失query里面的數(shù)據(jù)
params刷新 會 丟失 params里面的數(shù)據(jù)。
38.vue初始化頁面閃動問題
答：使用vue開發(fā)時绷落，在vue初始化之前姥闪，由于div是不歸vue管的，所以我們寫的代碼在還沒有解析的情況下會容易出現(xiàn)花屏現(xiàn)象砌烁，看到類似于{{message}}的字樣筐喳，雖然一般情況下這個時間很短暫，但是我們還是有必要讓解決這個問題的。
首先：在css里加上[v-cloak] {
display: none;
}避归。
如果沒有徹底解決問題荣月，則在根元素加上style="display: none;" :style="{display: 'block'}"
39.vue更新數(shù)組時觸發(fā)視圖更新的方法
答:push()；pop()梳毙；shift()喉童；unshift()；splice()顿天； sort()堂氯；reverse()
40.vue常用的UI組件庫
答：Mint UI，element牌废，VUX
41.vue修改打包后靜態(tài)資源路徑的修改
cli3版本：在根目錄下新建vue.config.js 文件咽白，然后加上以下內(nèi)容：（如果已經(jīng)有此文件就直接修改）
module.exports = {
publicPath: '', // 相對于 HTML 頁面（目錄相同） }
生命周期函數(shù)面試題
1.什么是 vue 生命周期？有什么作用鸟缕？
答：每個 Vue 實例在被創(chuàng)建時都要經(jīng)過一系列的初始化過程——例如晶框，需要設(shè)置數(shù)據(jù)監(jiān)聽、編譯模板懂从、將實例掛載到 DOM 并在數(shù)據(jù)變化時更新 DOM 等授段。同時在這個過程中也會運行一些叫做 生命周期鉤子 的函數(shù)，這給了用戶在不同階段添加自己的代碼的機會番甩。（ps：生命周期鉤子就是生命周期函數(shù)）例如侵贵，如果要通過某些插件操作DOM節(jié)點，如想在頁面渲染完后彈出廣告窗缘薛， 那我們最早可在mounted 中進行窍育。

注：vue的生命周期是：vue實例從創(chuàng)建到摧毀，也就是開始創(chuàng)建宴胧、初始化數(shù)據(jù)漱抓、編譯模板、掛載DOM → 渲染恕齐、更新 → 渲染乞娄、卸載等一系列過程。

2.第一次頁面加載會觸發(fā)哪幾個鉤子显歧？
答：beforeCreate仪或， created， beforeMount追迟， mounted
**3.簡述每個周期具體適合哪些場景（生命周期鉤子函數(shù)） **
答：beforeCreate：在new一個vue實例后溶其，只有一些默認的生命周期鉤子和默認事件，其他的東西都還沒創(chuàng)建敦间。在beforeCreate生命周期執(zhí)行的時候瓶逃，data和methods中的數(shù)據(jù)都還沒有初始化束铭。不能在這個階段使用data中的數(shù)據(jù)和methods中的方法

注：在實例初始化之后，數(shù)據(jù)觀測（data observer）和 event/watcher事件配置之前被調(diào)用厢绝。

create：data 和 methods都已經(jīng)被初始化好了契沫，如果要調(diào)用 methods 中的方法，或者操作 data 中的數(shù)據(jù)昔汉，最早可以在這個階段中操作
beforeMount：執(zhí)行到這個鉤子的時候懈万，在內(nèi)存中已經(jīng)編譯好了模板了，但是還沒有掛載到頁面中靶病，此時会通，頁面還是舊的
mounted：執(zhí)行到這個鉤子的時候，就表示Vue實例已經(jīng)初始化完成了娄周。此時組件脫離了創(chuàng)建階段涕侈，進入到了運行階段。 如果我們想要通過插件操作頁面上的DOM節(jié)點煤辨，最早可以在和這個階段中進行
beforeUpdate： 當執(zhí)行這個鉤子時裳涛，頁面中的顯示的數(shù)據(jù)還是舊的，data中的數(shù)據(jù)是更新后的众辨， 頁面還沒有和最新的數(shù)據(jù)保持同步
updated：頁面顯示的數(shù)據(jù)和data中的數(shù)據(jù)已經(jīng)保持同步了端三，都是最新的
beforeDestory：Vue實例從運行階段進入到了銷毀階段，這個時候上所有的 data 和 methods 鹃彻， 指令郊闯， 過濾器 ……都是處于可用狀態(tài)。還沒有真正被銷毀
destroyed： 這個時候上所有的 data 和 methods 浮声， 指令虚婿， 過濾器 ……都是處于不可用狀態(tài)旋奢。組件已經(jīng)被銷毀了泳挥。
4.created和mounted的區(qū)別
答：created:在模板渲染成html前調(diào)用，即通常初始化某些屬性值至朗，然后再渲染成視圖屉符。
mounted:在模板渲染成html后調(diào)用，通常是初始化頁面完成后锹引，再對html的dom節(jié)點進行一些需要的操作矗钟。
5.vue獲取數(shù)據(jù)在哪個周期函數(shù)
答：一般 created/beforeMount/mounted 皆可.
比如如果你要操作 DOM , 那肯定 mounted 時候才能操作.
6.請詳細說下你對vue生命周期的理解？

答：總共分為8個階段創(chuàng)建前/后嫌变，載入前/后吨艇，更新前/后，銷毀前/后腾啥。
創(chuàng)建前/后： 在beforeCreated階段东涡，vue實例的掛載元素$el和**數(shù)據(jù)對象**data都為undefined冯吓，還未初始化。在created階段疮跑，vue實例的數(shù)據(jù)對象data有了组贺，$el還沒有。
載入前/后：在beforeMount階段祖娘，vue實例的$el和data都初始化了失尖，但還是掛載之前為虛擬的dom節(jié)點，data.message還未替換渐苏。在mounted階段，vue實例掛載完成琼富，data.message成功渲染胧辽。
更新前/后：當data變化時，會觸發(fā)beforeUpdate和updated方法公黑。
銷毀前/后：在執(zhí)行destroy方法后邑商，對data的改變不會再觸發(fā)周期函數(shù)，說明此時vue實例已經(jīng)解除了事件監(jiān)聽以及和dom的綁定凡蚜，但是dom結(jié)構(gòu)依然存在人断。

vue路由面試題
1.mvvm 框架是什么？
答：vue是實現(xiàn)了雙向數(shù)據(jù)綁定的mvvm框架朝蜘，當視圖改變更新模型層恶迈，當模型層改變更新視圖層。在vue中谱醇，使用了雙向綁定技術(shù)暇仲，就是View的變化能實時讓Model發(fā)生變化，而Model的變化也能實時更新到View副渴。
2.vue-router 是什么?它有哪些組件
答：vue用來寫路由一個插件奈附。router-link、router-view
3.active-class 是哪個組件的屬性煮剧？
答：vue-router模塊的router-link組件斥滤。children數(shù)組來定義子路由
4.怎么定義 vue-router 的動態(tài)路由? 怎么獲取傳過來的值？
答：在router目錄下的index.js文件中勉盅，對path屬性加上/:id佑颇。 使用router對象的params.id。
5.vue-router 有哪幾種導(dǎo)航鉤子?
答：三種草娜，
第一種：是全局導(dǎo)航鉤子：router.beforeEach(to,from,next)挑胸，作用：跳轉(zhuǎn)前進行判斷攔截。
第二種：組件內(nèi)的鉤子
第三種：單獨路由獨享組件

參考地址：https://www.cnblogs.com/goloving/p/9211295.html

6.route 和router 的區(qū)別
答：router是VueRouter的實例宰闰，在script標簽中想要導(dǎo)航到不同的URL,使用router.push方法茬贵。返回上一個歷史history用router.to(-1)route為當前router跳轉(zhuǎn)對象凸克。里面可以獲取當前路由的name,path,query,parmas等。
7.vue-router的兩種模式
答:hash模式：即地址欄 URL 中的 # 符號闷沥；
history模式：window.history對象打印出來可以看到里邊提供的方法和記錄長度萎战。利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定瀏覽器支持）舆逃。
8.vue-router實現(xiàn)路由懶加載（ 動態(tài)加載路由 ）
答:三種方式
第一種：vue異步組件技術(shù) ==== 異步加載蚂维，vue-router配置路由 , 使用vue的異步組件技術(shù) , 可以實現(xiàn)按需加載 .但是,這種情況下一個組件生成一個js文件。
第二種：路由懶加載(使用import)路狮。
第三種：webpack提供的require.ensure()虫啥，vue-router配置路由，使用webpack的require.ensure技術(shù)奄妨，也可以實現(xiàn)按需加載涂籽。這種情況下，多個路由指定相同的chunkName砸抛，會合并打包成一個js文件评雌。
vuex常見面試題
1.vuex是什么？怎么使用直焙？哪種功能場景使用它景东？
答：vue框架中狀態(tài)管理。在main.js引入store奔誓，注入斤吐。
新建了一個目錄store.js，….. export 厨喂。
場景有：單頁應(yīng)用中和措，組件之間的狀態(tài)。音樂播放蜕煌、登錄狀態(tài)派阱、加入購物車
2.vuex有哪幾種屬性？
答：有五種幌绍，分別是 State颁褂、 Getter、Mutation 傀广、Action、 Module
state => 基本數(shù)據(jù)(數(shù)據(jù)源存放地)
getters => 從基本數(shù)據(jù)派生出來的數(shù)據(jù)
mutations => 提交更改數(shù)據(jù)的方法彩届，同步伪冰！
actions => 像一個裝飾器，包裹mutations樟蠕，使之可以異步贮聂。
modules => 模塊化Vuex
3.Vue.js中ajax請求代碼應(yīng)該寫在組件的methods中還是vuex的actions中靠柑？
答：如果請求來的數(shù)據(jù)是不是要被其他組件公用，僅僅在請求的組件內(nèi)使用吓懈，就不需要放入vuex 的state里歼冰。

nextTick原理

<template>
  <div>
    <div>{{number}}</div>
    <div @click="handleClick">click</div>
  </div>
</template>
export default {
    data () {
        return {
            number: 0
        };
    },
    methods: {
        handleClick () {
            for(let i = 0; i < 1000; i++) {
                this.number++;
            }
        }
    }
}

當我們按下 click 按鈕的時候，number 會被循環(huán)增加1000次耻警。

那么按照之前的理解隔嫡，每次 number 被 +1 的時候，都會觸發(fā) number 的 setter 方法甘穿，從而根據(jù)上面的流程一直跑下來最后修改真實 DOM腮恩。那么在這個過程中，DOM 會被更新 1000 次温兼！那怎么辦秸滴？

Vue.js中的 nextTick 函數(shù)，會傳入一個 cb 募判，這個 cb 會被存儲到一個隊列中荡含，在下一個 tick 時觸發(fā)隊列中的所有 cb 事件。

Vue.js 肯定不會以如此低效的方法來處理届垫。Vue.js在默認情況下内颗，每次觸發(fā)某個數(shù)據(jù)的 setter 方法后，對應(yīng)的 Watcher 對象其實會被 push 進一個隊列 queue 中敦腔，在下一個 tick 的時候?qū)⑦@個隊列 queue 全部拿出來 run（ Watcher 對象的一個方法均澳，用來觸發(fā) patch 操作） 一遍。

因為目前瀏覽器平臺并沒有實現(xiàn) nextTick 方法符衔，所以 Vue.js 源碼中分別用 Promise找前、setTimeout、setImmediate 等方式在 microtask（或是task）中創(chuàng)建一個事件判族，目的是在當前調(diào)用棧執(zhí)行完畢以后（不一定立即）才會去執(zhí)行這個事件躺盛。

export function nextTick (cb?: Function, ctx?: Object) {
  let _resolve
  callbacks.push(() => {
    if (cb) {
      try {
        cb.call(ctx)
      } catch (e) {
        handleError(e, ctx, 'nextTick')
      }
    } else if (_resolve) {
      _resolve(ctx)
    }
  })
  if (!pending) {
    pending = true
    timerFunc()
  }
  // $flow-disable-line
  if (!cb && typeof Promise !== 'undefined') {
    return new Promise(resolve => {
      _resolve = resolve
    })
  }
}

首先定義一個 callbacks 數(shù)組用來存儲 nextTick，在下一個 tick 處理這些回調(diào)函數(shù)之前形帮，所有的 cb 都會被存在這個 callbacks 數(shù)組中槽惫。pending 是一個標記位，代表一個等待的狀態(tài)辩撑。 這里用setTimeout做描述（真實源碼里更復(fù)雜）： setTimeout 會在 task 中創(chuàng)建一個事件 flushCallbacks 界斜，flushCallbacks 則會在執(zhí)行時將 callbacks 中的所有 cb 依次執(zhí)行。

watcher

上面例子中合冀，當我們將 number 增加 1000 次時各薇，先將對應(yīng)的 Watcher 對象給 push 進一個隊列 queue 中去，等下一個 tick 的時候再去執(zhí)行君躺，這樣做是對的峭判。但是有沒有發(fā)現(xiàn)开缎，另一個問題出現(xiàn)了？

因為 number 執(zhí)行 ++ 操作以后對應(yīng)的 Watcher 對象都是同一個林螃，我們并不需要在下一個 tick 的時候執(zhí)行 1000 個同樣的 Watcher 對象去修改界面奕删，而是只需要執(zhí)行一個 Watcher 對象，使其將界面上的 0 變成 1000 即可疗认。

那么完残，我們就需要執(zhí)行一個過濾的操作，同一個的 Watcher 在同一個 tick 的時候應(yīng)該只被執(zhí)行一次侮邀，也就是說隊列 queue 中不應(yīng)該出現(xiàn)重復(fù)的 Watcher 對象坏怪。

那么我們可以用 id 來標記每一個 Watcher 對象，讓他們看起來不太一樣绊茧。

我們再回過頭聊一下第一個例子铝宵， number 會被不停地進行 ++ 操作，不斷地觸發(fā)它對應(yīng)的 Dep 中的 Watcher 對象的 update 方法华畏。然后最終 queue 中因為對相同 id 的 Watcher 對象進行了篩選鹏秋，從而 queue 中實際上只會存在一個 number 對應(yīng)的 Watcher 對象。在下一個 tick 的時候（此時 number 已經(jīng)變成了 1000）亡笑，觸發(fā) Watcher 對象的 run 方法來更新視圖侣夷，將視圖上的 number 從 0 直接變成 1000。

首先分析原因

VUE首頁加載過慢仑乌，其原因是因為它是一個單頁應(yīng)用百拓，需要將所有需要的資源都下載到瀏覽器端并解析。

考慮解決辦法

  • 1.使用首屏SSR + 跳轉(zhuǎn)SPA方式來優(yōu)化
  • 2.改單頁應(yīng)用為多頁應(yīng)用晰甚，需要修改webpack的entry
  • 3.CDN資源還是很重要的衙传，最好分開，也能減少一些不必要的資源損耗
  • 4.骨架屏這種的用戶體驗的東西一定要上
  • 5.合理使用緩存

react-router 里的 routerLink標簽和a 標簽有什么區(qū)別

先看Link點擊事件handleClick部分源碼

      if (_this.props.onClick) _this.props.onClick(event);

      if (!event.defaultPrevented && // onClick prevented default
      event.button === 0 && // ignore everything but left clicks
      !_this.props.target && // let browser handle "target=_blank" etc.
      !isModifiedEvent(event) // ignore clicks with modifier keys
      ) {
          event.preventDefault();

          var history = _this.context.router.history;
          var _this$props = _this.props,
              replace = _this$props.replace,
              to = _this$props.to;


          if (replace) {
            history.replace(to);
          } else {
            history.push(to);
          }
        }

Link做了3件事情：

  1. 有onclick那就執(zhí)行onclick
  2. click的時候阻止a標簽?zāi)J事件（這樣子點擊[123]()就不會跳轉(zhuǎn)和刷新頁面）
  3. 再取得跳轉(zhuǎn)href（即是to）厕九，用history（前端路由兩種方式之一蓖捶，history & hash）跳轉(zhuǎn)，此時只是鏈接變了扁远，并沒有刷新頁面

寫 React / Vue 項目時為什么要在列表組件中寫 key俊鱼，其作用是什么

當 Vue 正在更新使用 v-for 渲染的元素列表時，它默認使用“就地更新”的策略畅买。如果數(shù)據(jù)項的順序被改變并闲，Vue 將不會移動 DOM。 元素來匹配數(shù)據(jù)項的順序皮获，而是就地更新每個元素焙蚓，并且確保它們在每個索引位置正確渲染。這個類似 Vue 1.x 的 track-by="$index"洒宝。

這個默認的模式是高效的购公，但是只適用于不依賴子組件狀態(tài)或臨時 DOM 狀態(tài) (例如：表單輸入值) 的列表渲染輸出。

  • 避免對節(jié)點「就地復(fù)用」

需要修改的節(jié)點位置沒有改變雁歌，是內(nèi)容更新了宏浩，這雖然提高了復(fù)用性能，但是往往在復(fù)雜的表單會導(dǎo)致狀態(tài)出現(xiàn)錯位靠瞎。也不會產(chǎn)生過度效果

  • key相當于每個vnode 的唯一id比庄，我們可以依靠key，更快更精確的知道oldVnode中對應(yīng)的vnode節(jié)點乏盐。

帶key就不會使用就定復(fù)用了佳窑，在sameNode函數(shù)a.key===b.key對比中可以避免就地復(fù)用的情況。

我們可以利用key的唯一性來更快獲取到對應(yīng)節(jié)點父能，比遍歷更快神凑。

什么是diff算法？

要渲染真實的DOM的開銷很大何吝，因為改變真實dom溉委，會當值整個dom樹的重繪和回流。我們需要渲染真實dom的時候往往會把生成一個虛擬節(jié)點 virtual DOM爱榕，當virtual dom某個節(jié)點的數(shù)據(jù)改變后生成一個新的Vnode瓣喊，然后將Vnode和oldVnode對比，當然有不同的地方教就直接修改在真實DOM上黔酥，然后是oldVnode=Vnode

  • 真實DOM
<div>
    <p>123</p>
</div>
  • virtual DOM （虛擬DOM）
var Vnode={
    tag:'div',
    children:[{
        tag:'p',text:'123'
    }]
    
}

diff的比較方式

在同層級進行藻三，不會跨層級比較

oldDOM

<div>
    <p>123</p>
</div>

newDOM

<div>
    <span>2222</span>
</div>

[圖片上傳失敗...(image-d84716-1597763667097)]

  • 先對比DIV，發(fā)現(xiàn)兩個DIV不對等
  • 查看DIV的子元素P跪者、SPAN棵帽，發(fā)現(xiàn)不對等
  • 查看P、SPAN沒有子元素坑夯，則移除P岖寞，增加SPAN

[圖片上傳失敗...(image-8d2227-1597763667097)]

現(xiàn)在我們來看看在進行替換

對比節(jié)點函數(shù)

function patch(oldVnode, vnode) {
  // 對比是否相等
  if (sameVnode(oldVnode, vnode)) {
    patchVnode(oldVnode, vnode)
  } else {
    const oEl = oldVnode.el // 當前oldVnode對應(yīng)的真實元素節(jié)點
    let parentEle = api.parentNode(oEl) // 父元素

    createELe(vnode) // 為vnode生成新的元素

    if (parentEle !== null) {
      api.insertBefore(parentEle, vnode.el, api.nextSibling(oEl)) // 將新的元素添加到父元素中
      api.removeChild(parentEle, oldVnode.el) // 移除以前的元素
    }
  }

  return vnode
}

判斷兩者是否相同函數(shù)

function sameVnode(a, b) {
  return (
    a.key === b.key && // 對比key
    a.tag === b.tag && // 對比標簽名
    a.isComment === b.isComment && // 是否為注釋節(jié)點
    isDef(a.data) === isDef(b.data) && // 是否定義了data，或者其他屬性
    sameInputType(a, b) //判斷是當<Input>時 是否type相同
  )
}

其他

webpack 做過哪些優(yōu)化柜蜈，開發(fā)效率方面仗谆、打包策略方面等等
答案：https://github.com/lgwebdream/FE-Interview/issues/25

介紹下 promise 的特性、優(yōu)缺點淑履，內(nèi)部是如何實現(xiàn)的隶垮，動手實現(xiàn) Promise
答案：https://github.com/lgwebdream/FE-Interview/issues/29

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個濱河市秘噪，隨后出現(xiàn)的幾起案子狸吞，更是在濱河造成了極大的恐慌，老刑警劉巖，帶你破解...
    沈念sama閱讀 218,755評論 6贊 507
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件蹋偏，死亡現(xiàn)場離奇詭異便斥，居然都是意外死亡，警方通過查閱死者的電腦和手機威始，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,305評論 3贊 395
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門枢纠，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人黎棠，你說我怎么就攤上這事晋渺。” “怎么了脓斩？”我有些...
    開封第一講書人閱讀 165,138評論 0贊 355
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵木西，是天一觀的道長。 經(jīng)常有香客問我随静，道長八千，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 58,791評論 1贊 295
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任挪挤，我火速辦了婚禮叼丑，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘扛门。我一直安慰自己鸠信，他們只是感情好，可當我...
    茶點故事閱讀 67,794評論 6贊 392
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布论寨。 她就那樣靜靜地躺著星立，像睡著了一般。 火紅的嫁衣襯著肌膚如雪葬凳。 梳的紋絲不亂的頭發(fā)上绰垂，一...
    開封第一講書人閱讀 51,631評論 1贊 305
  • 城市分裂傳說
    那天，我揣著相機與錄音火焰，去河邊找鬼劲装。 笑死，一個胖子當著我的面吹牛昌简，可吹牛的內(nèi)容都是我干的占业。 我是一名探鬼主播，決...
    沈念sama閱讀 40,362評論 3贊 418
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼纯赎，長吁一口氣：“原來是場噩夢啊……” “哼谦疾！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起犬金，我...
    開封第一講書人閱讀 39,264評論 0贊 276
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤念恍，失蹤者是張志新（化名）和其女友劉穎六剥，沒想到半個月后，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體峰伙，經(jīng)...
    沈念sama閱讀 45,724評論 1贊 315
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡疗疟，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,900評論 3贊 336
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了词爬。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片秃嗜。...
    茶點故事閱讀 40,040評論 1贊 350
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡权均，死狀恐怖顿膨，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情叽赊，我是刑警寧澤恋沃，帶...
    沈念sama閱讀 35,742評論 5贊 346
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布，位于F島的核電站必指，受9級特大地震影響囊咏，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜塔橡，卻給世界環(huán)境...
    茶點故事閱讀 41,364評論 3贊 330
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一梅割、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧葛家，春花似錦户辞、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,944評論 0贊 22
  • 一樁弒父案底燎，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至弹砚，卻和暖如春双仍，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背桌吃。 一陣腳步聲響...
    開封第一講書人閱讀 33,060評論 1贊 270
  • 情欲美人皮
    我被黑心中介騙來泰國打工朱沃， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人茅诱。 一個月前我還...
    沈念sama閱讀 48,247評論 3贊 371
  • 代替公主和親
    正文 我出身青樓逗物，卻偏偏與公主長得像，于是被迫代替她去往敵國和親让簿。 傳聞我的和親對象是個殘疾皇子敬察，可洞房花燭夜當晚...
    茶點故事閱讀 44,979評論 2贊 355