目錄

• 1.vue-router是怎么傳遞參數(shù)的
• 2.v-if和v-for一起使用的弊端以及解決辦法
• 3.beforeDestroyed里面一般進(jìn)行什么操作
• 4.vue同級(jí)組件間怎么傳值
• 5.vue中父組件如何獲取子組件的屬性和方法
• 6.watch和computed的區(qū)別
• 7.vue父組件和子組件生命周期的順序
• 8.vue中父組件能監(jiān)聽到子組件的生命周期嗎
• 9.vue中的事件修飾符主要有哪些？分別是什么作用
• 10.介紹下什么是<keep-alive />
• 11.watch能監(jiān)聽到數(shù)組的pop行為嗎
• 12.watch如何實(shí)現(xiàn)深度監(jiān)聽
• 13.vue中如何解決頁(yè)面不重新渲染問題
• 14. link和@import的區(qū)別
• 15. 如何理解js中的原型鏈
• 16. 怎么理解js中的內(nèi)存泄露
• 17. 跨域問題
• 18. Vuex：Vue的狀態(tài)管理模式 + 庫(kù)
• 19. Vue的生命周期
• 20. Computed和Watch的區(qū)別
• 21. Json和Xml數(shù)據(jù)的區(qū)別
• 22. http和https的區(qū)別
• 23. Vue-Router 跳轉(zhuǎn)方式
• 24. 什么是閉包？
• 25. 什么是事件代理（事件委托）枚赡？有什么好處？
• 26. JS原型绒障，原型鏈相關(guān)知識(shí)點(diǎn)
• 27. 組件通信方式有哪些？
• 28. 子組件為什么不可以修改父組件傳遞的Prop捍歪？
• 29. v-model是如何實(shí)現(xiàn)雙向綁定的户辱？
• 30. Vuex和單純的全局對(duì)象有什么區(qū)別鸵钝？
• 31. 為什么 Vuex 的 mutation 中不能做異步操作？
• 32. vue組件有哪些生命周期鉤子焕妙？
• 33. Vue 的父組件和子組件生命周期鉤子執(zhí)行順序是什么蒋伦？
• 34. v-show 和 v-if 有哪些區(qū)別？
• 35. computed 和 watch 有什么區(qū)別焚鹊？
• 36. computed vs methods
• 37. keep-alive 的作用是什么痕届？
• 38. Vue 中 v-html 會(huì)導(dǎo)致什么問題
• 39. Vue 的響應(yīng)式原理
• 40. Object.defineProperty有哪些缺點(diǎn)？
• 41. Vue中如何檢測(cè)數(shù)組變化末患？
• 42. 組件的 data 為什么要寫成函數(shù)形式研叫？
• 43. nextTick是做什么用的，其原理是什么?
• 44. Vue 的模板編譯原理
• 45. v-for 中 key 的作用是什么璧针？
• 46. 為什么 v-for 和 v-if 不建議用在一起
• 47. Vue-router 導(dǎo)航守衛(wèi)有哪些
• 48. vue-router hash 模式和 history 模式有什么區(qū)別嚷炉？
• 49. vue-router hash 模式和 history 模式是如何實(shí)現(xiàn)的？

• 了解哪些ES6內(nèi)容
• promise用過哪些方法（then,all,catch）
• all方法是干啥的（記串了探橱，記成了race方法申屹，面試官糾正）
• 低版本瀏覽器怎么兼容這些ES6的代碼
• vue響應(yīng)式原理
• get和post
• diff算法
• 使用vue遇到的比較難的問題
• 說一下webpack的常用配置
• 用過哪些loader
• 兼容低版本的CSS用什么（autofix）
• babel的了解
• 有沒有寫過plugin或者loader
• 說一下實(shí)踐過的性能優(yōu)化
• 路由懶加載怎么實(shí)現(xiàn)的（這個(gè)不知道是想問webpack的魔法注釋還是啥，我只說了cli自帶處理）
• 設(shè)計(jì)模式有哪些隧膏，在實(shí)踐中使用過哪些（說了幾個(gè)哗讥，然后面試官補(bǔ)充了一個(gè)他們做工程的一些例子，但是我一臉懵逼 ）
• 深入講一下項(xiàng)目（涼透了胞枕，項(xiàng)目深度不夠杆煞，流水線式介紹，難點(diǎn)不知道咋表述出來腐泻，后面面試官還教我怎么描述一個(gè)項(xiàng)目的難點(diǎn)）

1. Vue-Router有兩種傳參方式

(1)通過在router.js文件中配置path的地方動(dòng)態(tài)傳遞參數(shù) eg: path: '/detail/:id' 然后在組件內(nèi)通過this.$route.params.id即可獲取
(2).在router-link標(biāo)簽中傳遞參數(shù)

路由跳轉(zhuǎn)傳遞參數(shù)有兩種方式：
        動(dòng)態(tài)路由方式：
          * 在index.js里設(shè)置路由處path: '/detail/:iid', （這時(shí)候决乎，iid就被當(dāng)成的該路由對(duì)象的params里的一個(gè)參數(shù)），
            之后用的時(shí)候, 通過在后面拼接上id來傳入iid派桩，eg. this.$router.push('/detail/'+1111111)

          * 在跳轉(zhuǎn)后的路由里接收參數(shù)的方式：this.$route.params.iid

        1. 通過query的方式：this.$router.push({
                                path: '/detail/',
                                query: {
                                 id: 111111}
                            })//這就是使用query傳參：給路由傳入?yún)?shù)id
           然后在跳轉(zhuǎn)到的路由中构诚，再以query的方式接收參數(shù)：
             this.$route.query.id
        2. 通過params的方式：this.$router.push({
                                    name: '/detail/',
                                    params: {
                                     id: 111111}
                                })//這就是使用params傳參：給路由傳入?yún)?shù)id
           然后在跳轉(zhuǎn)到的路由中，再以qparams的方式接收參數(shù)：
              this.$route.params.id

        注意：
        (1) param和query傳參的區(qū)別：params傳參--->只能通過name而不是path來引入路由Ｃ蟆；椒础！鸭津！
        (2) 接受參數(shù)是：this.route!!!!!
        (3) * route是路由信息對(duì)象，包括path,params,hash,query,fullPath,matched,name等路由信息參數(shù)

        
       3. 使用vue里的<router-link>標(biāo)簽來傳遞參數(shù)
          3.1 使用query:
                   1) 傳值：
                      <router-link :to="{path:'/login',query:{userId: "33333"}}">
                     </router-link>   
                   2) 取值: this.$route.query. userId  
          3.2 使用params:
                  1) 傳值
                   <router-link :to="{name:'/test',params: {id: id}}">跳轉(zhuǎn)</router-link>                                       
                  2) 取值：this.$route.params.id

      注意：router-link中鏈接如果是‘/'開始就是從根路由開始肠缨，如果開始不帶‘/'逆趋，則從當(dāng)前路由開始。

也通過this.$route.params獲取

注意：這里通過router-link傳遞參數(shù)的方式是隱式傳參

label標(biāo)簽作用

label 標(biāo)簽為 input 元素定義標(biāo)注（標(biāo)簽）晒奕。
用于綁定一個(gè)表單元素, 當(dāng)點(diǎn)擊label標(biāo)簽的時(shí)候, 被綁定的表單元素就會(huì)獲得輸入焦點(diǎn)闻书。當(dāng)我們鼠標(biāo)點(diǎn)擊 label標(biāo)簽里面的文字時(shí)名斟， 光標(biāo)會(huì)定位到指定的表單里面。
如何綁定元素呢魄眉？

• 第一種用法就是用label直接包括input表單砰盐。
  <label> 用戶名： <input type="radio" name="usename" value="請(qǐng)輸入用戶名"> </label>
• 第二種用法 for 屬性與表單的id關(guān)聯(lián)，用于規(guī)定 label 與哪個(gè)表單元素綁定坑律。

<label for="sex">男</label>
<input type="radio" name="sex"  id="sex">

v-if與v-show的區(qū)別以及使用場(chǎng)景

(1) 手段

• v-if是通過創(chuàng)建和銷毀dom元素來控制元素的顯示與隱藏;
• v-show是通過設(shè)置DOM元素的display樣式岩梳，block為顯示，none為隱藏
  （2）編譯過程
• v-if切換有一個(gè)局部編譯/卸載的過程晃择，切換過程中合適地銷毀和重建內(nèi)部的事件監(jiān)聽和子組件冀值；
• v-show只是簡(jiǎn)單的基于css切換；
  （3）編譯條件：
• v-if是惰性的宫屠，如果初始條件為假列疗，則什么也不做；只有在條件第一次變?yōu)檎鏁r(shí)才開始局部編譯（編譯被緩存浪蹂？編譯被緩存后抵栈，然后再切換的時(shí)候進(jìn)行局部卸載);
• v-show是在任何條件下（首次條件是否為真）都被編譯，然后被緩存坤次，而且DOM元素保留古劲；
  (4) 性能消耗：
• v-if有更高的切換消耗；
• v-show有更高的初始渲染消耗浙踢；

使用場(chǎng)景：

基于以上區(qū)別绢慢，因此，如果需要非常頻繁地切換洛波，則使用 v-show 較好胰舆；
如果在運(yùn)行時(shí)條件很少改變，則使用 v-if 較好蹬挤。

總結(jié)：

• v-if判斷是否加載缚窿，可以減輕服務(wù)器的壓力，在需要時(shí)加載,但有更高的切換開銷;
• v-show調(diào)整DOM元素的CSS的dispaly屬性焰扳，可以使客戶端操作更加流暢倦零，但有更高的初始渲染開銷。
• 如果需要非常頻繁地切換吨悍，則使用 v-show 較好扫茅；如果在運(yùn)行時(shí)條件很少改變，則使用 v-if 較好育瓜。

“visibility:hidden”和“display：none”之間的不同:

• “visibility:hidden”將元素設(shè)置為不可見葫隙，但是同樣在布局上占領(lǐng)一定空間（例如，它會(huì)被渲染成為空盒子）
• 但是“display:none”的元素是將節(jié)點(diǎn)從整個(gè)render tree中移除躏仇，所以不是布局中的一部分 恋脚。

3. V-if和V-for一起使用的弊端以及解決辦法

由于v-for的優(yōu)先級(jí)比v-if高腺办，所以導(dǎo)致每循環(huán)一次就會(huì)去v-if一次，而v-if是通過創(chuàng)建和銷毀dom元素來控制元素的顯示與隱藏糟描，所以就會(huì)不停的去創(chuàng)建和銷毀元素怀喉，造成頁(yè)面卡頓，性能下降船响。

解決辦法：在v-for的外層或內(nèi)層包裹一個(gè)元素來使用v-if

render tree躬拢、CSSOM tree、DOM tree

CSSOM樹和DOM樹連接在一起形成一個(gè)render tree灿意，渲染樹用來計(jì)算可見元素的布局并且作為將像素渲染到屏幕上的過程的輸入估灿。

• DOM樹和CSSOM樹連接在一起形成render tree .
• render tree只包含了用于渲染頁(yè)面的節(jié)點(diǎn)
• 布局計(jì)算了每一個(gè)對(duì)象的準(zhǔn)確的位置以及大小
• 繪畫是最后一步，繪畫要求利用render tree來將像素顯示到屏幕上

第一步是結(jié)合DOM樹和CSSOM樹形成“render tree”缤剧，渲染樹用來描述所有可見的DOM內(nèi)容馅袁，并且將CSSOM樣式信息附加到節(jié)點(diǎn)上。

為了形成渲染樹荒辕，瀏覽器大致做的事情有:

1. 從DOM樹根節(jié)點(diǎn)開始汗销，遍歷每一個(gè)可見的節(jié)點(diǎn)
   • 一些節(jié)點(diǎn)是完全不可見的（比如 script標(biāo)簽，meta標(biāo)簽等）抵窒，這些節(jié)點(diǎn)會(huì)被忽略弛针，因?yàn)樗麄儾粫?huì)影響渲染的輸出
   • 一些節(jié)點(diǎn)是通過CSS樣式隱藏了，這些節(jié)點(diǎn)同樣被忽略——例如上例中的span節(jié)點(diǎn)在render tree中被忽略李皇，因?yàn)閟pan樣式是display:none;
2. 對(duì)每一個(gè)可見的節(jié)點(diǎn)削茁，找到合適的匹配的CSSOM規(guī)則，并且應(yīng)用樣式
3. 顯示可見節(jié)點(diǎn)（節(jié)點(diǎn)包括內(nèi)容和被計(jì)算的樣式）

總結(jié)：

• Render tree的構(gòu)建其實(shí)就是DOM Tree和CSSDOM Attach的過程掉房，在webkit中茧跋，解析樣式和創(chuàng)建呈現(xiàn)器的過程稱為“附加”，每個(gè)DOM節(jié)點(diǎn)都有一個(gè)“attach”方法卓囚。
• render tree 其實(shí)就是相當(dāng)于一個(gè)計(jì)算好樣式(CSS)瘾杭、與HTML對(duì)應(yīng)的Tree

記住“visibility:hidden”和“display：none”之間的不同:

• “visibility:hidden”將元素設(shè)置為不可見，但是同樣在布局上占領(lǐng)一定空間（例如哪亿，它會(huì)被渲染成為空盒子）;
• 但是“display:none”的元素是將節(jié)點(diǎn)從整個(gè)render tree中移除粥烁，所以不是布局中的一部分 。

DOM樹和渲染樹的對(duì)應(yīng)關(guān)系如下圖：

image

布局階段：

我們知道了哪些元素應(yīng)該被顯示以及元素的樣式蝇棉，但是我們還沒有計(jì)算元素在設(shè)備中的確切的位置和大小——這是“布局”階段讨阻，同樣也被叫做“reflow”。

所以Render tree創(chuàng)建后篡殷，就是開始渲染/布局了（根據(jù)render tree進(jìn)行布局渲染render layer）

• 創(chuàng)建渲染樹后变勇，layout根據(jù)渲染樹中的渲染對(duì)象的信息，計(jì)算好每一個(gè)渲染對(duì)象的位置和尺寸
• 將其放在瀏覽器窗口的正確位置
• （某些時(shí)候會(huì)在文檔布局完成之后進(jìn)行DOM修改，重新布局的過程就稱為回流搀绣。）
• 根據(jù)計(jì)算的布局信息進(jìn)行繪制：繪制階段則會(huì)遍歷呈現(xiàn)樹，并調(diào)用呈現(xiàn)器的paint方法戳气，將呈現(xiàn)器（display屬性）的內(nèi)容顯示在屏幕上链患，繪制的順序其實(shí)就是元素進(jìn)入堆棧樣式上下文的順序，例如塊呈現(xiàn)器（display:block)的堆棧順序如下：1. 背景顏色 2. 背景圖片 3.邊框 4.子代 5. 輪廓
• 最后輸出的是一個(gè)render包括了屏幕上可見內(nèi)容的樣式信息和內(nèi)容信息瓶您。

<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Critial Path: Hello world!</title>
  </head>
  <body>
    <div style="width: 50%">
      <div style="width: 50%">Hello world!</div>
    </div>
  </body>
</html>

上面的頁(yè)面展示了兩個(gè)div：第一個(gè)div是整個(gè)視圖的一半麻捻，第二個(gè)div是父親寬度的一半——也就是說是整個(gè)視圖的25%。

布局的輸出是“盒子模型”呀袱，并且將相對(duì)定位轉(zhuǎn)化成屏幕上的絕對(duì)像素贸毕。

最后，我們只差將render tree上的所有節(jié)點(diǎn)轉(zhuǎn)化成屏幕上的確切像素——這個(gè)步驟通常被稱為“painting”或者“rasterizing”夜赵。

每個(gè)步驟都要花費(fèi)一些時(shí)間明棍，谷歌瀏覽器開封工具為我們描述了一些步驟所花費(fèi)的時(shí)間：

• 構(gòu)造render tree和計(jì)算位置以及大小信息被捕捉在時(shí)間軸上的“Layout”時(shí)間中
• 一旦布局完成，瀏覽器計(jì)算"Paint Setup"和“Paint”事件用來描述render tree轉(zhuǎn)化成屏幕上確切像素的時(shí)間寇僧。

顯示構(gòu)造render tree以及布局和paint的時(shí)間受到頁(yè)面的大小摊腋，被應(yīng)用的樣式和正在運(yùn)行的設(shè)備影響。

頁(yè)面越大嘁傀，瀏覽器將要做更多工作兴蒸；樣式越復(fù)雜，painting階段所花費(fèi)的時(shí)間也越多细办。

但是橙凳，我們的頁(yè)面完成了！WOOOO笑撞！

讓我們快速的瀏覽下瀏覽器所做的事情：

1. 處理HTML標(biāo)簽建立DOM樹
2. 處理CSS標(biāo)簽建立CSSOM樹
3. 連接CSSOM樹和DOM樹形成一個(gè)render樹
4. 在render樹上運(yùn)行布局來計(jì)算每個(gè)節(jié)點(diǎn)的形狀
5. 在屏幕上畫每一個(gè)節(jié)點(diǎn)
   `

3. BeforeDestroy里面一般進(jìn)行什么操作

beforedestoryed是組件銷毀之前執(zhí)行的一個(gè)生命周期岛啸，在這個(gè)生命周期里，我們可以進(jìn)行回調(diào)函數(shù)或定時(shí)器的清除娃殖，不用的dom元素的清除等

4. Vue同級(jí)組件間怎么傳值

1.如果是兄弟組件值戳，可通過父元素作為中間組件進(jìn)行傳值 2.通過創(chuàng)建一個(gè)bus，進(jìn)行傳值

// 創(chuàng)建一個(gè)文件炉爆，定義bus中間件堕虹，并導(dǎo)出const bus = new Vue()// 在一個(gè)組件中發(fā)送事件bus.$emit('事件名稱', 傳遞的參數(shù))// 在另一個(gè)組件中監(jiān)聽事件bus.$on('事件名稱', 得到傳過來的參數(shù))

5. Vue中父組件如何獲取子組件的屬性和方法

vue中通過在子組件上定義ref屬性來獲取子組件的屬性和方法，代碼如下：

// 這里是父組件<templete>    <child ref="child"/></templete><script>method: {    getChild () {        this.$refs.child.屬性名（方法名）    }}</script>

6. Watch和Computed的區(qū)別

• watch作用通常是由一個(gè)值影響多個(gè)值的改變并且能監(jiān)聽到這個(gè)值變化時(shí)芬首，會(huì)去執(zhí)行一個(gè)回調(diào)函數(shù)赴捞，此時(shí)我們可以在這個(gè)回調(diào)函數(shù)中做一些邏輯處理
• computed是根據(jù)依賴的值衍生出一個(gè)新的值，并且依賴的值可以有多個(gè)郁稍，只有當(dāng)被依賴的值發(fā)生改變時(shí)赦政，才會(huì)重新去執(zhí)行計(jì)算

7. Vue父組件和子組件生命周期的順序

1.渲染過程順序：

父組件beforeCreate() -> 父組件created() -> 父組件beforeMount() -> 子組件beforeCreate() ->子組件created() -> 子組件beforeMount() -> 子組件mounted() -> 父組件mounted()

2.更新過程順序：

父組件更新過程：
父組件beforeUpdate() -> 父組件updated()
子組件更新過程：
父組件beforeUpdate() -> 子組件beforeUpdate() -> 子組件updated() -> 父組件updated()

3.銷毀過程

父組件beforeDestroy() -> 子組件beforeDestroy() -> 子組件destroyed() -> 父組件destroyed()

8. Vue中父組件能監(jiān)聽到子組件的生命周期嗎

父組件能夠監(jiān)聽到子組件的生命周期，通過@hook:進(jìn)行監(jiān)聽代碼如下：

// 這里是父組件<template>    <child    @hook:mounted="getChildMounted"    /></template><script>method: {    getChildMounted () {        // 這里可以獲取到子組件mounted的信息    }}</script>

9. Vue中的事件修飾符主要有哪些？分別是什么作用

• .stop: 阻止事件冒泡
• .native: 綁定原生事件
• .once: 事件只執(zhí)行一次
• .self:將事件綁定在自身身上恢着，相當(dāng)于阻止事件冒泡
• .prevent: 阻止默認(rèn)事件
• .caption: 用于事件捕獲

10.介紹下什么是keep-alive

keep-alive是用于做組件緩存的桐愉，只會(huì)執(zhí)行一次，不會(huì)被銷毀掰派。被keep-alive包裹的組件从诲，沒有create和beforeDestroyed等方法，但是有activated和deactivated方法靡羡。

11.watch能監(jiān)聽到數(shù)組的pop行為嗎

對(duì)于有返回值的數(shù)據(jù)系洛，watch就能監(jiān)聽到，比如數(shù)組的pop略步，push, unshift,map等行為描扯。

12. Watch如何實(shí)現(xiàn)深度監(jiān)聽

watch: {    obj: {        handler: function(val) {        },        deep: true // 深度監(jiān)聽    }}

13. Vue中如何解決頁(yè)面不重新渲染問題

(1).修改對(duì)象屬性后頁(yè)面未重新渲染可以使用 this.$set(對(duì)象名稱, '屬性名', '屬性值')

(2).使用this.$forceUpdate()方法可重新渲染頁(yè)面

14. link和@import的區(qū)別

• 1、link是html的標(biāo)簽趟薄，不僅可以加載css還可以定義Rss , rel連接屬性绽诚；@import是css的語(yǔ)法規(guī)則，只能引入樣式竟趾；
• 2憔购、加載頁(yè)面時(shí)，link是同時(shí)加載的岔帽，@impor是頁(yè)面加載完后才加載
• 3玫鸟、link沒有兼容性的問題，而@import只在較高版本的瀏覽器才可以識(shí)別
• 4犀勒、link可以通過js插入操作dom屎飘，@import 不可以！

15. 如何理解js中的原型鏈

1贾费；每個(gè)構(gòu)造函數(shù)都有一個(gè)原型對(duì)象2钦购；每個(gè)原型對(duì)象都有一個(gè)指向構(gòu)造函數(shù)的指針3；每個(gè)實(shí)例函數(shù)都有一個(gè)指向原型對(duì)象的指針褂萧。4押桃；查找方式是一層一層查找，直至頂層导犹。Object.prototype

16. 怎么理解js中的內(nèi)存泄露

定義：程序不需要的內(nèi)存唱凯，由于某些原因其不會(huì)返回到操作系統(tǒng)或者可用內(nèi)存池中。內(nèi)存泄露會(huì)導(dǎo)致（運(yùn)行緩慢 谎痢，高延遲磕昼，崩潰）的問題，常見的導(dǎo)致內(nèi)存泄露的原因有：

• 1节猿；意外的全局變量
• 2票从；被遺忘的計(jì)時(shí)器或回調(diào)函數(shù)
• 3；脫離文檔的DOM的引用
• 4；閉包

17. 跨域問題

由于瀏覽器的同源策略會(huì)導(dǎo)致跨域峰鄙，同源策略又分為

• 一：DOM同源策略：禁止對(duì)不同源頁(yè)面的DOM進(jìn)行操作浸间，主要是不同域名的ifram是限制互相訪問的
• 二：xmlHttpRequest同源策略：禁止使用XHR對(duì)象向不同源的服務(wù)器地址發(fā)起http請(qǐng)求，只要 "協(xié)議:域名:端口" 有一個(gè)不同都被當(dāng)做不同的域之間的請(qǐng)求吟榴，即跨域請(qǐng)求

解決方式：

• 1发框、CORS跨域資源共享 后端需要設(shè)置Access--Control-Allow-Credentials:true
• 2、jsonp實(shí)現(xiàn)跨域：動(dòng)態(tài)創(chuàng)建script煤墙，利用src屬性進(jìn)行跨域
• 3、 nginx代理跨域
• 4宪拥、nodejs中間件代理跨域
• 5仿野、WebSokect協(xié)跨域
• 6、window.name+ifram跨域

18. Vuex：Vue的狀態(tài)管理模式 + 庫(kù)

1她君、state

*保存vuex中的數(shù)據(jù)源脚作，通過this.$store.state獲取 *

2、getters

用于監(jiān)聽state中的值的變化缔刹，返回計(jì)算后的結(jié)果球涛。getter的返回值會(huì)根據(jù)它的依賴被緩存起來

3、mutations

是修改store中的值得唯一方式

4校镐、action

官方建議提交一個(gè)actions亿扁，在actions中提交mutations再去修改狀態(tài)值。 this.$store.dispatch('add')

//this.$store.commit('add')

5鸟廓、modules 模塊化

19. Vue的生命周期

Vue 實(shí)例有一個(gè)完整的生命周期从祝，也就是從開始創(chuàng)建、初始化數(shù)據(jù)引谜、編譯模板牍陌、掛載Dom→渲染、更新→渲染员咽、卸載等一系列過程毒涧，我們稱這是 Vue 的生命周期。通俗說就是 Vue 實(shí)例從創(chuàng)建到銷毀的過程贝室，就是生命周期契讲。

• beforeCreate: vue元素的掛載元素el和數(shù)據(jù)都為undefined，還未初始化档玻；
• created：vue實(shí)例的數(shù)據(jù)對(duì)象data有了怀泊，el還沒有；
• beforeMount：vue實(shí)例的$el和data都初始化了误趴，但是還掛載在之前的虛擬dom節(jié)點(diǎn)上霹琼，data.message還未替換；
• mounted：vue實(shí)例掛載完成，data.message成功渲染枣申。
• 更新前后：data變化時(shí)會(huì)觸發(fā)beforeUpdate和updated方法售葡；
• 銷毀前后：beforeDestory和destoryed，在執(zhí)行destoryed方法后忠藤，對(duì)data的改變不會(huì)觸發(fā)周期函數(shù)挟伙，說明vue實(shí)例已經(jīng)解除了事件監(jiān)聽以及dom綁定，但是dom結(jié)構(gòu)依然存在模孩；

vue生命周期的作用：

他的生命周期中有多個(gè)事件鉤子尖阔，讓我們控制整個(gè)vue實(shí)例的過程時(shí)更容易形成良好的邏輯。

生命周期鉤子的一些使用方法：

• beforeCreate：loading事件榨咐，在加載實(shí)例時(shí)觸發(fā)介却。
• created：初始化完成事件，異步請(qǐng)求块茁。
• mounted：掛載元素齿坷，獲取dom節(jié)點(diǎn)
• uptaded：對(duì)數(shù)據(jù)統(tǒng)一處理
• beforeDestory：確認(rèn)事件停止。
• nextTick：更新數(shù)據(jù)后立即操作dom数焊。

20. Computed和Watch的區(qū)別

computed

計(jì)算結(jié)果并返回永淌，只有當(dāng)被計(jì)算的屬性發(fā)生改變時(shí)才會(huì)觸發(fā)（即：計(jì)算屬性的結(jié)果會(huì)被緩存，除非依賴的響應(yīng)屬性變化才會(huì)重新及孫）

watch
監(jiān)聽某一個(gè)值佩耳，當(dāng)被監(jiān)聽的值發(fā)生變化時(shí)遂蛀，執(zhí)行相關(guān)操作。（與computed的區(qū)別是蚕愤，watch更加適用于監(jiān)聽某一個(gè)值得變化答恶，并做對(duì)應(yīng)操作，比如請(qǐng)求后太接口等萍诱。而computed適用于計(jì)算已有的值并返回結(jié)果悬嗓。）

監(jiān)聽簡(jiǎn)單數(shù)據(jù)類型：

data(){      return{        'first':2      }    },    watch:{      first(){        console.log(this.first)      }    },     ...}

21. Json和Xml數(shù)據(jù)的區(qū)別

1、數(shù)據(jù)體積方面：xml是重量級(jí)的裕坊，json是輕量級(jí)的包竹，傳遞的速度更快些。籍凝。2周瞎、數(shù)據(jù)傳輸方面：xml在傳輸過程中比較占帶寬，json占帶寬少饵蒂，易于壓縮声诸。3、數(shù)據(jù)交互方面：json與javascript的交互更加方便退盯，更容易解析處理彼乌，更好的進(jìn)行數(shù)據(jù)交互4泻肯、數(shù)據(jù)描述方面：json對(duì)數(shù)據(jù)的描述性比xml較差5、xml和json都用在項(xiàng)目交互下慰照，xml多用于做配置文件灶挟，json用于數(shù)據(jù)交互。

22. http和https的區(qū)別

Http：超文本傳輸協(xié)議（Http毒租，HyperText Transfer Protocol)是互聯(lián)網(wǎng)上應(yīng)用最為廣泛的一種網(wǎng)絡(luò)協(xié)議稚铣。設(shè)計(jì)Http最初的目的是為了提供一種發(fā)布和接收HTML頁(yè)面的方法。它可以使瀏覽器更加高效墅垮。Http協(xié)議是以明文方式發(fā)送信息的惕医，如果黑客截取了Web瀏覽器和服務(wù)器之間的傳輸報(bào)文，就可以直接獲得其中的信息算色。

Https：是以安全為目標(biāo)的Http通道曹锨，是Http的安全版。Https的安全基礎(chǔ)是SSL剃允。SSL協(xié)議位于TCP/IP協(xié)議與各種應(yīng)用層協(xié)議之間，為數(shù)據(jù)通訊提供安全支持齐鲤。SSL協(xié)議可分為兩層：SSL記錄協(xié)議（SSL Record Protocol）斥废，它建立在可靠的傳輸協(xié)議（如TCP）之上，為高層協(xié)議提供數(shù)據(jù)封裝给郊、壓縮牡肉、加密等基本功能的支持。SSL握手協(xié)議（SSL Handshake Protocol）淆九，它建立在SSL記錄協(xié)議之上统锤，用于在實(shí)際的數(shù)據(jù)傳輸開始前，通訊雙方進(jìn)行身份認(rèn)證炭庙、協(xié)商加密算法饲窿、交換加密密鑰等。

HTTP與HTTPS的區(qū)別

• 1焕蹄、HTTP是超文本傳輸協(xié)議逾雄，信息是明文傳輸，HTTPS是具有安全性的SSL加密傳輸協(xié)議腻脏。
• 2鸦泳、HTTPS協(xié)議需要ca申請(qǐng)證書，一般免費(fèi)證書少永品，因而需要一定費(fèi)用做鹰。
• 3、HTTP和HTTPS使用的是完全不同的連接方式鼎姐，用的端口也不一樣钾麸。前者是80，后者是443喂走。
• 4殃饿、HTTP連接是無狀態(tài)的，HTTPS協(xié)議是由SSL+HTTP協(xié)議構(gòu)建的可進(jìn)行加密傳輸芋肠、身份認(rèn)證的網(wǎng)絡(luò)協(xié)議乎芳，安全性高于HTTP協(xié)議。

https的優(yōu)點(diǎn)

盡管HTTPS并非絕對(duì)安全帖池，掌握根證書的機(jī)構(gòu)奈惑、掌握加密算法的組織同樣可以進(jìn)行中間人形式的攻擊，但HTTPS仍是現(xiàn)行架構(gòu)下最安全的解決方案睡汹，主要有以下幾個(gè)好處：

• 1）使用HTTPS協(xié)議可認(rèn)證用戶和服務(wù)器肴甸，確保數(shù)據(jù)發(fā)送到正確的客戶機(jī)和服務(wù)器；
• 2）HTTPS協(xié)議是由SSL+HTTP協(xié)議構(gòu)建的可進(jìn)行加密傳輸囚巴、身份認(rèn)證的網(wǎng)絡(luò)協(xié)議原在，要比http協(xié)議安全，可防止數(shù)據(jù)在傳輸過程中不被竊取彤叉、改變庶柿，確保數(shù)據(jù)的完整性。
• 3）HTTPS是現(xiàn)行架構(gòu)下最安全的解決方案秽浇，雖然不是絕對(duì)安全浮庐，但它大幅增加了中間人攻擊的成本。
• 4）谷歌曾在2014年8月份調(diào)整搜索引擎算法柬焕，并稱“比起同等HTTP網(wǎng)站审残，采用HTTPS加密的網(wǎng)站在搜索結(jié)果中的排名將會(huì)更高”。

Https的缺點(diǎn)

• 1）Https協(xié)議握手階段比較費(fèi)時(shí)斑举，會(huì)使頁(yè)面的加載時(shí)間延長(zhǎng)近搅轿。
• 2）Https連接緩存不如Http高效，會(huì)增加數(shù)據(jù)開銷富玷，甚至已有的安全措施也會(huì)因此而受到影響介时；
• 3）SSL證書通常需要綁定IP，不能在同一IP上綁定多個(gè)域名凌彬，IPv4資源不可能支撐這個(gè)消耗沸柔。
• 4）Https協(xié)議的加密范圍也比較有限。最關(guān)鍵的铲敛，SSL證書的信用鏈體系并不安全褐澎，特別是在某些國(guó)家可以控制CA根證書的情況下，中間人攻擊一

23. Vue-Router 跳轉(zhuǎn)方式

1. this.$router.push

//跳轉(zhuǎn)到不同的url伐蒋，但這個(gè)方法會(huì)向history棧添加一個(gè)記錄工三，點(diǎn)擊后退會(huì)返回到上一個(gè)頁(yè)面迁酸。this.$router.push({path: '/home/sort/detail',query:{id: 'abc'}})     //獲取參數(shù) {{this.$route.query.userId}}//this.$router.push({name: 'detail',params:{id: 'abc'}})獲取參數(shù)：{{this.$route.params.userId}}

2. query和params 的區(qū)別

a) 用法上，query要用path來引入俭正，params要用name來引入：eg

this.$router.push({   name:"detail",   params:{    name:'nameValue',    code:10011 }});

b) 展示上奸鬓，query更加類似于我們ajax中g(shù)et傳參，params則類似于post掸读，說的再簡(jiǎn)單一點(diǎn)串远，前者在瀏覽器地址欄中顯示參數(shù)，后者則不顯示

3. this.$router.replace

同樣是跳轉(zhuǎn)到指定的url儿惫，但是這個(gè)方法不會(huì)向history里面添加新的記錄澡罚，點(diǎn)擊返回，會(huì)跳轉(zhuǎn)到上上一個(gè)頁(yè)面肾请。上一個(gè)記錄是不存在的留搔。

4. this.$router.go

相對(duì)于當(dāng)前頁(yè)面向前或向后跳轉(zhuǎn)多少個(gè)頁(yè)面,類似 window.history.go(n)。n可為正數(shù)可為負(fù)數(shù)铛铁。正數(shù)返回上一個(gè)頁(yè)面

5. router-link標(biāo)簽使用

• 1. 根據(jù)路由路徑（/home/sort/detail）跳轉(zhuǎn) <router-link :to="{path: '/home/sort/detail', query:{id: 'abc'}}">點(diǎn)擊查看子頁(yè)面</router-link>
• 2. 根據(jù)路由名稱（detail）跳轉(zhuǎn) <router-link :to="{name: 'detail', params:{id: 'abc'}}">點(diǎn)擊查看子頁(yè)面</router-link> :to="" 可以實(shí)現(xiàn)綁定動(dòng)態(tài)的 路由 和 參數(shù)

24. 什么是閉包隔显？

閉包是指有權(quán)訪問其他函數(shù)所定義的變量的函數(shù)。

使用閉包的話只需要將一個(gè)函數(shù)定義在另一個(gè)函數(shù)的內(nèi)部饵逐，并將它給暴露出來荣月，比如可以直接返回或者給他傳遞給其他函數(shù)，由于內(nèi)部函數(shù)對(duì)外部函數(shù)變量還存在著應(yīng)用梳毙，所以在外部函數(shù)執(zhí)行完畢后不會(huì)主動(dòng)將該內(nèi)存銷毀。

閉包最重要的用途是實(shí)現(xiàn)對(duì)象的私有數(shù)據(jù)捐下。 對(duì)象的內(nèi)部數(shù)據(jù)無法被輕易的修改账锹，保證了程序的安全性。

但同時(shí)大量的使用閉包會(huì)導(dǎo)致內(nèi)存泄漏坷襟。

25. 什么是事件代理（事件委托）奸柬？有什么好處？

JS高級(jí)程序上的定義：利用事件冒泡婴程，只綁定一個(gè)函數(shù)就可以處理一類事件廓奕。

在JS中，添加到頁(yè)面上的事件數(shù)量直接關(guān)乎著頁(yè)面的性能档叔，多次與dom發(fā)生交互訪問dom會(huì)導(dǎo)致頁(yè)面重繪和重排心墅，導(dǎo)致拖慢整個(gè)頁(yè)面此熬，這就是為什么優(yōu)化里中的減少dom操作的原因。而且，每個(gè)函數(shù)都是一個(gè)對(duì)象之众，對(duì)象就要占據(jù)內(nèi)存，內(nèi)存大了性能自然就慢了距境。

事件委托的實(shí)現(xiàn)原理就是利用事件冒泡。

冒泡的順序 ：

• 目標(biāo)元素
• dom結(jié)構(gòu) 直至 body
• body
• html
• document
• windon

事件代理的好處:

• 優(yōu)化性能
• 當(dāng)新元素綁添加進(jìn)來的時(shí)候不需要再次綁定事件步藕，通過冒泡就可以觸發(fā)

26. JS原型，原型鏈相關(guān)知識(shí)點(diǎn)

在JS中挑格，每創(chuàng)建出來一個(gè)函數(shù)js就會(huì)默認(rèn)創(chuàng)建一個(gè)prototype的屬性咙冗，這個(gè)屬性指向函數(shù)的原型對(duì)象。

在原型對(duì)象里面有一個(gè)屬性constructor屬性指向了構(gòu)造函數(shù)漂彤。

每個(gè)對(duì)象都有一個(gè)隱式原型 proto 雾消，指向的是構(gòu)造該對(duì)象的構(gòu)造函數(shù)的原型對(duì)象。

原型對(duì)象也是對(duì)象,所以如果我們讓原型對(duì)象指向另外的一個(gè)實(shí)例显歧，這個(gè)實(shí)例也有自己的原型對(duì)象仪或，如果這個(gè)實(shí)例的原型對(duì)象又等于了另外的實(shí)例，一層層下去就形成了一個(gè)鏈條士骤。這就是所謂的原型鏈范删。

函數(shù)也是對(duì)象，所以函數(shù)也有隱式原型拷肌，函數(shù)的隱式原型為Function.prototype

Function.prototype的隱式原型為Object.prototype

Object.prototype 的隱式原型為null 這里也就是原型鏈的頂端

image

組件通信相關(guān)問題

27. 組件通信方式有哪些到旦？

父子組件通信：

props 和 event、v-model巨缘、 .sync添忘、 ref、 $parent 和 $children

非父子組件通信：

$attr 和 $listeners若锁、 provide 和 inject搁骑、eventbus、通過根實(shí)例$root訪問又固、vuex仲器、dispatch 和 brodcast

通信方式屬于較基礎(chǔ)的面試題，具體的可參考我的文章—— vue 組件通信看這篇就夠了

28. 子組件為什么不可以修改父組件傳遞的Prop仰冠？

Vue提倡單向數(shù)據(jù)流,即父級(jí) props 的更新會(huì)流向子組件,但是反過來則不行乏冀。這是為了防止意外的改變父組件狀態(tài)，使得應(yīng)用的數(shù)據(jù)流變得難以理解洋只。如果破壞了單向數(shù)據(jù)流辆沦，當(dāng)應(yīng)用復(fù)雜時(shí)，debug 的成本會(huì)非常高识虚。

29. v-model是如何實(shí)現(xiàn)雙向綁定的肢扯？

v-model 是用來在表單控件或者組件上創(chuàng)建雙向綁定的，他的本質(zhì)是 v-bind 和 v-on 的語(yǔ)法糖担锤，在一個(gè)組件上使用 v-model鹃彻，默認(rèn)會(huì)為組件綁定名為 value 的 prop 和名為 input 的事件。
文章—— vue 組件通信看這篇就夠了 中也有其詳細(xì)介紹

30. Vuex和單純的全局對(duì)象有什么區(qū)別妻献？

Vuex和全局對(duì)象主要有兩大區(qū)別：

1. Vuex 的狀態(tài)存儲(chǔ)是響應(yīng)式的蛛株。當(dāng) Vue 組件從 store 中讀取狀態(tài)的時(shí)候团赁，若 store 中的狀態(tài)發(fā)生變化，那么相應(yīng)的組件也會(huì)相應(yīng)地得到高效更新谨履。
2. 不能直接改變 store 中的狀態(tài)欢摄。改變 store 中的狀態(tài)的唯一途徑就是顯式地提交 (commit) mutation。這樣使得我們可以方便地跟蹤每一個(gè)狀態(tài)的變化笋粟，從而讓我們能夠?qū)崿F(xiàn)一些工具幫助我們更好地了解我們的應(yīng)用怀挠。

31. 為什么 Vuex 的 mutation 中不能做異步操作？

Vuex中所有的狀態(tài)更新的唯一途徑都是mutation害捕，異步操作通過 Action 來提交 mutation實(shí)現(xiàn)绿淋，這樣使得我們可以方便地跟蹤每一個(gè)狀態(tài)的變化，從而讓我們能夠?qū)崿F(xiàn)一些工具幫助我們更好地了解我們的應(yīng)用尝盼。

每個(gè)mutation執(zhí)行完成后都會(huì)對(duì)應(yīng)到一個(gè)新的狀態(tài)變更吞滞，這樣devtools就可以打個(gè)快照存下來，然后就可以實(shí)現(xiàn) time-travel 了盾沫。如果mutation支持異步操作裁赠，就沒有辦法知道狀態(tài)是何時(shí)更新的，無法很好的進(jìn)行狀態(tài)的追蹤赴精，給調(diào)試帶來困難佩捞。 參考尤大大回答： www.zhihu.com/question/48…

生命周期相關(guān)問題

32. vue組件有哪些生命周期鉤子？

beforeCreate蕾哟、created一忱、beforeMount、mounted谭确、beforeUpdate帘营、updated、beforeDestroy琼富、destroyed。
<keep-alive> 有自己獨(dú)立的鉤子函數(shù) activated 和 deactivated庄新。

33. Vue 的父組件和子組件生命周期鉤子執(zhí)行順序是什么鞠眉？

渲染過程：
父組件掛載完成一定是等子組件都掛載完成后，才算是父組件掛載完择诈，所以父組件的mounted在子組件mouted之后
父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted

子組件更新過程：

1. 影響到父組件： 父beforeUpdate -> 子beforeUpdate->子updated -> 父updted
2. 不影響父組件： 子beforeUpdate -> 子updated

父組件更新過程：

1. 影響到子組件： 父beforeUpdate -> 子beforeUpdate->子updated -> 父updted
2. 不影響子組件： 父beforeUpdate -> 父updated

銷毀過程：
父beforeDestroy -> 子beforeDestroy -> 子destroyed -> 父destroyed

看起來很多好像很難記憶械蹋，其實(shí)只要理解了，不管是哪種情況羞芍，都一定是父組件等待子組件完成后哗戈，才會(huì)執(zhí)行自己對(duì)應(yīng)完成的鉤子，就可以很容易記住荷科。

相關(guān)屬性的作用 & 相似屬性對(duì)比

34. v-show 和 v-if 有哪些區(qū)別唯咬？

v-if 會(huì)在切換過程中對(duì)條件塊的事件監(jiān)聽器和子組件進(jìn)行銷毀和重建纱注，如果初始條件是false，則什么都不做胆胰，直到條件第一次為true時(shí)才開始渲染模塊狞贱。
v-show 只是基于css進(jìn)行切換，不管初始條件是什么蜀涨，都會(huì)渲染瞎嬉。
所以，v-if 切換的開銷更大厚柳，而 v-show 初始化渲染開銷更大氧枣，在需要頻繁切換，或者切換的部分dom很復(fù)雜時(shí)别垮，使用 v-show 更合適便监。渲染后很少切換的則使用 v-if 更合適。

35. computed 和 watch 有什么區(qū)別宰闰？

computed 計(jì)算屬性茬贵，是依賴其他屬性的計(jì)算值，并且有緩存移袍，只有當(dāng)依賴的值變化時(shí)才會(huì)更新解藻。
watch 是在監(jiān)聽的屬性發(fā)生變化時(shí)，在回調(diào)中執(zhí)行一些邏輯葡盗。
所以螟左，computed 適合在模板渲染中，某個(gè)值是依賴了其他的響應(yīng)式對(duì)象甚至是計(jì)算屬性計(jì)算而來觅够，而 watch 適合監(jiān)聽某個(gè)值的變化去完成一段復(fù)雜的業(yè)務(wù)邏輯胶背。

36. computed vs methods

計(jì)算屬性是基于他們的響應(yīng)式依賴進(jìn)行緩存的，只有在依賴發(fā)生變化時(shí)喘先，才會(huì)計(jì)算求值钳吟，而使用 methods，每次都會(huì)執(zhí)行相應(yīng)的方法窘拯。

37. keep-alive 的作用是什么红且？

keep-alive 可以在組件切換時(shí)，保存其包裹的組件的狀態(tài)涤姊，使其不被銷毀暇番，防止多次渲染。
其擁有兩個(gè)獨(dú)立的生命周期鉤子函數(shù) actived 和 deactived思喊，使用 keep-alive 包裹的組件在切換時(shí)不會(huì)被銷毀壁酬，而是緩存到內(nèi)存中并執(zhí)行 deactived 鉤子函數(shù)，命中緩存渲染后會(huì)執(zhí)行 actived 鉤子函數(shù)。

38. Vue 中 v-html 會(huì)導(dǎo)致什么問題

在網(wǎng)站上動(dòng)態(tài)渲染任意 HTML舆乔，很容易導(dǎo)致 XSS 攻擊岳服。所以只能在可信內(nèi)容上使用 v-html，且永遠(yuǎn)不能用于用戶提交的內(nèi)容上蜕煌。

原理分析相關(guān)題目

這部分的面試題派阱，只看答案部分是不夠的，最好結(jié)合源碼來分析斜纪，可以有更深的理解贫母。我在之前的文章對(duì)某些源碼做過分析的，會(huì)給出鏈接盒刚。

39. Vue 的響應(yīng)式原理

如果面試被問到這個(gè)問題腺劣，又描述不清楚，可以直接畫出 Vue 官方文檔的這個(gè)圖因块，對(duì)著圖來解釋效果會(huì)更好橘原。

Vue 的響應(yīng)式是通過 Object.defineProperty 對(duì)數(shù)據(jù)進(jìn)行劫持，并結(jié)合觀察者模式實(shí)現(xiàn)涡上。 Vue 利用 Object.defineProperty 創(chuàng)建一個(gè) observe 來劫持監(jiān)聽所有的屬性趾断，把這些屬性全部轉(zhuǎn)為 getter 和 setter。Vue 中每個(gè)組件實(shí)例都會(huì)對(duì)應(yīng)一個(gè) watcher 實(shí)例吩愧，它會(huì)在組件渲染的過程中把使用過的數(shù)據(jù)屬性通過 getter 收集為依賴芋酌。之后當(dāng)依賴項(xiàng)的 setter 觸發(fā)時(shí)，會(huì)通知 watcher雁佳，從而使它關(guān)聯(lián)的組件重新渲染脐帝。

40. Object.defineProperty有哪些缺點(diǎn)？

這道題目也可以問成 “為什么vue3.0使用proxy實(shí)現(xiàn)響應(yīng)式糖权？” 其實(shí)都是對(duì)Object.defineProperty 和 proxy實(shí)現(xiàn)響應(yīng)式的對(duì)比堵腹。

1. Object.defineProperty 只能劫持對(duì)象的屬性，而 Proxy 是直接代理對(duì)象
   由于 Object.defineProperty 只能對(duì)屬性進(jìn)行劫持星澳，需要遍歷對(duì)象的每個(gè)屬性疚顷。而 Proxy 可以直接代理對(duì)象。
2. Object.defineProperty 對(duì)新增屬性需要手動(dòng)進(jìn)行 Observe禁偎， 由于 Object.defineProperty 劫持的是對(duì)象的屬性腿堤，所以新增屬性時(shí)，需要重新遍歷對(duì)象届垫，對(duì)其新增屬性再使用 Object.defineProperty 進(jìn)行劫持释液。 也正是因?yàn)檫@個(gè)原因全释，使用 Vue 給 data 中的數(shù)組或?qū)ο笮略鰧傩詴r(shí)装处，需要使用 vm.$set 才能保證新增的屬性也是響應(yīng)式的。
3. Proxy 支持13種攔截操作，這是 defineProperty 所不具有的妄迁。
4. 新標(biāo)準(zhǔn)性能紅利
   Proxy 作為新標(biāo)準(zhǔn)寝蹈，長(zhǎng)遠(yuǎn)來看，JS引擎會(huì)繼續(xù)優(yōu)化 Proxy 登淘，但 getter 和 setter 基本不會(huì)再有針對(duì)性優(yōu)化箫老。
5. Proxy 兼容性差 目前并沒有一個(gè)完整支持 Proxy 所有攔截方法的Polyfill方案

更詳細(xì)的對(duì)比，可以查看我的文章 為什么Vue3.0不再使用defineProperty實(shí)現(xiàn)數(shù)據(jù)監(jiān)聽黔州？

41. Vue中如何檢測(cè)數(shù)組變化耍鬓？

Vue 的 Observer 對(duì)數(shù)組做了單獨(dú)的處理，對(duì)數(shù)組的方法進(jìn)行編譯流妻，并賦值給數(shù)組屬性的 __proto__ 屬性上牲蜀，因?yàn)樵玩湹臋C(jī)制，找到對(duì)應(yīng)的方法就不會(huì)繼續(xù)往上找了绅这。編譯方法中會(huì)對(duì)一些會(huì)增加索引的方法（push涣达，unshift，splice）進(jìn)行手動(dòng) observe证薇。 具體同樣可以參考我的這篇文章 為什么Vue3.0不再使用defineProperty實(shí)現(xiàn)數(shù)據(jù)監(jiān)聽度苔？，里面有詳細(xì)的源碼分析浑度。

42. 組件的 data 為什么要寫成函數(shù)形式寇窑？

Vue 的組件都是可復(fù)用的，一個(gè)組件創(chuàng)建好后俺泣，可以在多個(gè)地方復(fù)用疗认，而不管復(fù)用多少次，組件內(nèi)的 data 都應(yīng)該是相互隔離伏钠，互不影響的横漏，所以組件每復(fù)用一次，data 就應(yīng)該復(fù)用一次熟掂，每一處復(fù)用組件的 data 改變應(yīng)該對(duì)其他復(fù)用組件的數(shù)據(jù)不影響缎浇。
為了實(shí)現(xiàn)這樣的效果，data 就不能是單純的對(duì)象赴肚，而是以一個(gè)函數(shù)返回值的形式素跺，所以每個(gè)組件實(shí)例可以維護(hù)獨(dú)立的數(shù)據(jù)拷貝，不會(huì)相互影響誉券。

43. nextTick是做什么用的指厌，其原理是什么?

能回答清楚這道問題的前提，是清楚 EventLoop 過程踊跟。
在下次 DOM 更新循環(huán)結(jié)束后執(zhí)行延遲回調(diào)踩验，在修改數(shù)據(jù)之后立即使用 nextTick 來獲取更新后的 DOM。
nextTick 對(duì)于 micro task 的實(shí)現(xiàn)，會(huì)先檢測(cè)是否支持 Promise箕憾，不支持的話牡借，直接指向 macro task，而 macro task 的實(shí)現(xiàn)袭异，優(yōu)先檢測(cè)是否支持 setImmediate（高版本IE和Etage支持）钠龙，不支持的再去檢測(cè)是否支持 MessageChannel，如果仍不支持御铃，最終降級(jí)為 setTimeout 0碴里；
默認(rèn)的情況，會(huì)先以 micro task 方式執(zhí)行上真，因?yàn)?micro task 可以在一次 tick 中全部執(zhí)行完畢并闲，在一些有重繪和動(dòng)畫的場(chǎng)景有更好的性能。
但是由于 micro task 優(yōu)先級(jí)較高谷羞，在某些情況下帝火，可能會(huì)在事件冒泡過程中觸發(fā)，導(dǎo)致一些問題(可以參考 Vue 這個(gè) issue：github.com/vuejs/vue/i…)湃缎，所以有些地方會(huì)強(qiáng)制使用 macro task （如 v-on）犀填。

注意：之所以將 nextTick 的回調(diào)函數(shù)放入到數(shù)組中一次性執(zhí)行，而不是直接在 nextTick 中執(zhí)行回調(diào)函數(shù)嗓违，是為了保證在同一個(gè)tick內(nèi)多次執(zhí)行了 nextTcik九巡，不會(huì)開啟多個(gè)異步任務(wù)，而是把這些異步任務(wù)都?jí)撼梢粋€(gè)同步任務(wù)蹂季，在下一個(gè)tick內(nèi)執(zhí)行完畢冕广。

44. Vue 的模板編譯原理

vue模板的編譯過程分為3個(gè)階段：

1. 第一步：解析
   將模板字符串解析生成 AST，生成的AST 元素節(jié)點(diǎn)總共有 3 種類型偿洁，1 為普通元素撒汉， 2 為表達(dá)式，3為純文本涕滋。
2. 第二步：優(yōu)化語(yǔ)法樹
   Vue 模板中并不是所有數(shù)據(jù)都是響應(yīng)式的睬辐，有很多數(shù)據(jù)是首次渲染后就永遠(yuǎn)不會(huì)變化的，那么這部分?jǐn)?shù)據(jù)生成的 DOM 也不會(huì)變化宾肺，我們可以在 patch 的過程跳過對(duì)他們的比對(duì)溯饵。

此階段會(huì)深度遍歷生成的 AST 樹，檢測(cè)它的每一顆子樹是不是靜態(tài)節(jié)點(diǎn)锨用，如果是靜態(tài)節(jié)點(diǎn)則它們生成 DOM 永遠(yuǎn)不需要改變丰刊，這對(duì)運(yùn)行時(shí)對(duì)模板的更新起到極大的優(yōu)化作用。

1. 生成代碼

const code = generate(ast, options)復(fù)制代碼

通過 generate 方法增拥，將ast生成 render 函數(shù)啄巧。 更多關(guān)于 AST洪橘，Vue 模板編譯原理，以及和 AST 相關(guān)的 Babel 工作原理等棵帽，我在 掌握了AST，再也不怕被問babel渣玲，vue編譯逗概，Prettier等原理 中做了詳細(xì)介紹。

45. v-for 中 key 的作用是什么忘衍？

清晰回答這道問題逾苫，需要先清楚 Vue 的 diff 過程，關(guān)于 diff 原理枚钓，推薦一篇文章 my.oschina.net/u/3060934/b…

key 是給每個(gè) vnode 指定的唯一 id铅搓，在同級(jí)的 vnode diff 過程中，可以根據(jù) key 快速的對(duì)比搀捷，來判斷是否為相同節(jié)點(diǎn)星掰，并且利用 key 的唯一性可以生成 map 來更快的獲取相應(yīng)的節(jié)點(diǎn)。
另外指定 key 后嫩舟，就不再采用“就地復(fù)用”策略了氢烘，可以保證渲染的準(zhǔn)確性。

46. 為什么 v-for 和 v-if 不建議用在一起

當(dāng) v-for 和 v-if 處于同一個(gè)節(jié)點(diǎn)時(shí)家厌，v-for 的優(yōu)先級(jí)比 v-if 更高播玖，這意味著 v-if 將分別重復(fù)運(yùn)行于每個(gè) v-for 循環(huán)中。如果要遍歷的數(shù)組很大饭于，而真正要展示的數(shù)據(jù)很少時(shí)蜀踏，這將造成很大的性能浪費(fèi)。
這種場(chǎng)景建議使用 computed掰吕，先對(duì)數(shù)據(jù)進(jìn)行過濾果覆。

路由相關(guān)問題

47. Vue-router 導(dǎo)航守衛(wèi)有哪些

全局前置/鉤子：beforeEach、beforeResolve殖熟、afterEach

路由獨(dú)享的守衛(wèi)：beforeEnter

組件內(nèi)的守衛(wèi)：beforeRouteEnter随静、beforeRouteUpdate、beforeRouteLeave

完整的導(dǎo)航解析流程如下：

• 導(dǎo)航被觸發(fā)吗讶。
• 在失活的組件里調(diào)用離開守衛(wèi)燎猛。
• 調(diào)用全局的 beforeEach 守衛(wèi)。
• 在重用的組件里調(diào)用 beforeRouteUpdate 守衛(wèi) (2.2+)照皆。
• 在路由配置里調(diào)用 beforeEnter重绷。
• 解析異步路由組件。
• 在被激活的組件里調(diào)用 beforeRouteEnter膜毁。
• 調(diào)用全局的 beforeResolve 守衛(wèi) (2.5+)昭卓。
• 導(dǎo)航被確認(rèn)愤钾。
• 調(diào)用全局的 afterEach 鉤子。
• 觸發(fā) DOM 更新候醒。
• 用創(chuàng)建好的實(shí)例調(diào)用 beforeRouteEnter 守衛(wèi)中傳給 next 的回調(diào)函數(shù)能颁。

48. vue-router hash 模式和 history 模式有什么區(qū)別？

區(qū)別：

1. url 展示上倒淫，hash 模式有“#”伙菊，history 模式?jīng)]有
2. 刷新頁(yè)面時(shí)，hash 模式可以正常加載到 hash 值對(duì)應(yīng)的頁(yè)面敌土，而 history 沒有處理的話镜硕，會(huì)返回 404，一般需要后端將所有頁(yè)面都配置重定向到首頁(yè)路由返干。
3. 兼容性兴枯。hash 可以支持低版本瀏覽器和 IE。

49. vue-router hash 模式和 history 模式是如何實(shí)現(xiàn)的矩欠？

• hash 模式：
  后面 hash 值的變化财剖，不會(huì)導(dǎo)致瀏覽器向服務(wù)器發(fā)出請(qǐng)求，瀏覽器不發(fā)出請(qǐng)求癌淮，就不會(huì)刷新頁(yè)面峰伙。同時(shí)通過監(jiān)聽 hashchange 事件可以知道 hash 發(fā)生了哪些變化，然后根據(jù) hash 變化來實(shí)現(xiàn)更新頁(yè)面部分內(nèi)容的操作该默。

• history 模式：
  history 模式的實(shí)現(xiàn)瞳氓，主要是 HTML5 標(biāo)準(zhǔn)發(fā)布的兩個(gè) API，pushState 和 replaceState栓袖，這兩個(gè) API 可以在改變 url匣摘，但是不會(huì)發(fā)送請(qǐng)求。這樣就可以監(jiān)聽 url 變化來實(shí)現(xiàn)更新頁(yè)面部分內(nèi)容的操作裹刮。

50. 對(duì) MVVM 的理解

MVVM分為Model音榜、View、ViewModel三者捧弃。

• Model：代表數(shù)據(jù)模型
• View：代表視圖
• ViewModel：連接視圖和模型赠叼，實(shí)現(xiàn)數(shù)據(jù)的雙向綁定

51. Vue 實(shí)現(xiàn)數(shù)據(jù)雙向綁定的原理

采用數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式，通過Object.defineProperty()來劫持各個(gè)屬性的setter违霞，getter嘴办，在數(shù)據(jù)變動(dòng)時(shí)發(fā)布消息給訂閱者，觸發(fā)相應(yīng)的監(jiān)聽回調(diào)买鸽。當(dāng)把一個(gè)普通的 JavaScript 對(duì)象傳給 Vue 作為它的 data 選項(xiàng)時(shí)涧郊，Vue 將遍歷它的屬性，用 Object.defineProperty 將它們轉(zhuǎn)化為 getter/setter眼五，用戶看不到getter/setter妆艘，但是在內(nèi)部它們讓 Vue 追蹤依賴彤灶，在屬性被訪問和修改時(shí)通知變化。
1批旺、實(shí)現(xiàn)一個(gè)數(shù)據(jù)監(jiān)聽器Observer幌陕，能夠?qū)?shù)據(jù)對(duì)象的所有屬性進(jìn)行監(jiān)聽，如有變動(dòng)可拿到最新值并通知訂閱者
2汽煮、實(shí)現(xiàn)一個(gè)指令解析器Compile搏熄，對(duì)每個(gè)元素節(jié)點(diǎn)的指令進(jìn)行掃描和解析，根據(jù)指令模板替換數(shù)據(jù)逗物，以及綁定相應(yīng)的更新函數(shù)
3、實(shí)現(xiàn)一個(gè)Watcher瑟俭，作為連接Observer和Compile的橋梁翎卓，能夠訂閱并收到每個(gè)屬性變動(dòng)的通知，執(zhí)行指令綁定的相應(yīng)回調(diào)函數(shù)摆寄，從而更新視圖

52. 對(duì) webpack 的了解

前端打包工具

53. 對(duì)前端工程化的理解

54. 對(duì)模塊化失暴，組件化的理解

55. 使用 vue-lic 搭建一個(gè) Vue 的項(xiàng)目

56. 對(duì) npm 的了解

 第三方庫(kù)的管理工具

57. ES6 提出了哪些新概念

> 1.var let
> 2.箭頭函數(shù)
> 3.模板字符串（反引號(hào)）
> 4.解構(gòu)賦值
> 5.import,export
> 6.class
> …

58. HTTP 常見的狀態(tài)碼

> 400 客戶端請(qǐng)求有語(yǔ)法錯(cuò)誤，不能被服務(wù)器所理解
> 403 服務(wù)器收到請(qǐng)求但是拒絕提供服務(wù)|
> 200 客戶端請(qǐng)求成功|
> 404 請(qǐng)求資源不存在 eg:輸入錯(cuò)誤的URL |
> 500 服務(wù)器發(fā)生不可預(yù)期的錯(cuò)誤 |
> 503 服務(wù)器當(dāng)前不能處理客戶端請(qǐng)求微饥，一段時(shí)間后可能恢復(fù)正常

59. 數(shù)組的常用方法逗扒，及使用

60. let ,var ,const 之間的區(qū)別

> var聲明變量可以重復(fù)聲明，而let不可以重復(fù)聲明
> var是不受限于塊級(jí)的欠橘，而let是受限于塊級(jí)
> var會(huì)與window相映射（會(huì)掛一個(gè)屬性）矩肩，而let不與window相映射
> var可以在聲明的上面訪問變量，而let有暫存死區(qū)肃续，在聲明的上面訪問變量會(huì)報(bào)錯(cuò)
> const聲明之后必須賦值黍檩，否則會(huì)報(bào)錯(cuò)
> const定義不可變的量，改變了就會(huì)報(bào)錯(cuò)
> const和let一樣不會(huì)與window相映射始锚、支持塊級(jí)作用域刽酱、在聲明的上面訪問變量會(huì)報(bào)錯(cuò)

61. 跨域問題 如何解決

> jsonp

62. 如何解決瀏覽器的兼容問題

63. 對(duì)于 數(shù)據(jù)安全 的措施

> md5，對(duì)稱加密瞧捌，非對(duì)稱加密

64. Vue 全家桶——vue棵里，vue-router，vuex

65. vuex 的五個(gè)核心屬性

> state姐呐，getter殿怜，mutations，actions曙砂，modules

66. v-show 和 v-if 的區(qū)別

67. 父子組件的傳值

> 父組件傳值給子組件：
> 第一步：在父組件中 v-bind:parentmsg=“父組件的data值”（parentmsg 這個(gè)名字可自定義）
> 第二步：在子組件中 props:[‘parentmsg’]
> {{parentmsg}}這樣就可以使用 父組件的值
> 父組件把方法傳遞給子組件：
> 第一步：在父類組件中 @func=父組件方法名 (方法名不帶‘()’,func可自定義)
> 第二步：在子組件方法中寫 this.$emit(‘func’,方法參數(shù)) (func可自定義稳捆，無參方法‘方法參數(shù)’就別寫)

68. 路由跳轉(zhuǎn)的方式

> 1.`<router-link to='home'> router-link`
> 2\. `router.push('/home')`

69. Vue 實(shí)例的生命周期

70. vue-router 中 hash 模式和 history 模式的區(qū)別

> 最直觀的區(qū)別是在 url 中 hash 帶了一個(gè) # 而 history 是沒有的；
> history 需要后端提供支持麦轰；
> history 跳轉(zhuǎn)后刷新或者回跳會(huì)報(bào)錯(cuò)

71. 對(duì) ui 框架的使用

> element-ui乔夯，iview砖织，ionic

72. angular 和 vue 的對(duì)比

73. 原生 Ajax 如何發(fā)送請(qǐng)求

74. 閉包的概念

> 函數(shù)嵌套函數(shù)，內(nèi)部函數(shù)引用外部函數(shù)變量末荐，外部函數(shù)調(diào)用之后侧纯，其對(duì)象本該被銷毀，但閉包的存在甲脏，使我們?nèi)匀豢稍L問外部函數(shù)的變量對(duì)象眶熬，導(dǎo)致垃圾回收機(jī)制沒有生效，變量被保存下來块请，內(nèi)存泄漏娜氏。

75. Vue 中發(fā)送請(qǐng)求的方式

> vue-router

76. axios 怎樣發(fā)送請(qǐng)求

77. 前端緩存

> cookie, WebStorage

78. CSS 常用的布局

79. 你用過的 CSS 框架

> less

80. 對(duì)單向數(shù)據(jù)流的理解

81. 計(jì)算屬性（computed）和 watch 的區(qū)別

82. 回調(diào)函數(shù)

83. Promise 三種狀態(tài)

> pending、fulfilled墩新、rejected(未決定贸弥，履行，拒絕)海渊，同一時(shí)間只能存在一種狀態(tài),且狀態(tài)一旦改變就不能再變绵疲。promise是一個(gè)構(gòu)造函數(shù)，promise對(duì)象代表一項(xiàng)有兩種可能結(jié)果（成功或失敵家伞）的任務(wù)盔憨，它還持有多個(gè)回調(diào)，出現(xiàn)不同結(jié)果時(shí)分別發(fā)出相應(yīng)回調(diào)讯沈。
> 1.初始化郁岩，狀態(tài)：pending
> 2.當(dāng)調(diào)用resolve(成功)，狀態(tài)：pengding=>fulfilled
> 3.當(dāng)調(diào)用reject(失敗)缺狠，狀態(tài)：pending=>rejected

84. 同步和異步的概念

85. Get 請(qǐng)求和 Post 請(qǐng)求的區(qū)別

> 1.  Get是不安全的驯用，因?yàn)樵趥鬏斶^程，數(shù)據(jù)被放在請(qǐng)求的URL中儒老；Post的所有操作對(duì)用戶來說都是不可見的蝴乔。
>     2 Get傳送的數(shù)據(jù)量較小，這主要是因?yàn)槭躑RL長(zhǎng)度限制驮樊；Post傳送的數(shù)據(jù)量較大薇正，一般被默認(rèn)為不受限制。
>     3.Get限制Form表單的數(shù)據(jù)集的值必須為ASCII字符囚衔；而Post支持整個(gè)ISO10646字符集挖腰。
>     4\. Get執(zhí)行效率卻比Post方法好。Get是form提交的默認(rèn)方法练湿。

86. 自定義過濾器

87. 如何用原生js給一個(gè)按鈕綁定多個(gè) onclick 事件

88. VUE如果注冊(cè)全局組件

89. 列舉css 選擇器及優(yōu)先級(jí)

90. 權(quán)重計(jì)算規(guī)則

91. 闡述清除浮動(dòng)的幾種方式及優(yōu)缺點(diǎn)

92. 簡(jiǎn)述 cookies sessionStorage 和 localStorage 區(qū)別

93. 數(shù)組去重

94. mvvm猴仑，mvc 原理及區(qū)別

以下是筆試題

在這里插入圖片描述

在這里插入圖片描述

在這里插入圖片描述

在這里插入圖片描述

在這里插入圖片描述

在這里插入圖片描述

在這里插入圖片描述

在這里插入圖片描述

在這里插入圖片描述