金三銀四

馬上就到了金三銀四的重要時(shí)刻了！！今天給大家分享一個(gè)度小滿的面經(jīng)。考Vue考的多一些~~~

面經(jīng)

1.怎么理解Vue單向數(shù)據(jù)流？

父組件傳輸局props給子組件時(shí)，子組件只能使用而不能修改，這是為了組件之間能更高地去解耦。比如有一個(gè)父組件，傳props給10個(gè)子組件，如果某一個(gè)子組件修改了，那么會(huì)影響其他9個(gè)子組件跟著刷新，所以不推薦子組件修改props。

2.Vue 組件之間的通信方式都有哪些，用過(guò) eventbus 么，eventbus 的思想是什么

• 父組件傳值給子組件數(shù)據(jù)props
• 子組件傳值給父組件，通過(guò)$emit事件對(duì)父組件進(jìn)行傳值
• 父組件和子組件通過(guò)$parent和$children進(jìn)行獲取實(shí)例數(shù)據(jù)
• 二次封裝時(shí)經(jīng)常使用$attrs和$listener進(jìn)行傳值
• 使用$refs獲取組件實(shí)例，進(jìn)而獲取數(shù)據(jù)
• 使用Vuex進(jìn)行狀態(tài)管理
• 使用eventBus進(jìn)行跨組件傳值，進(jìn)而傳遞數(shù)據(jù)(發(fā)布訂閱模式)
• 使用provide和inject，官方不建議
• 瀏覽器本地緩存，例如localStorage
• 路由傳值

3.寫個(gè)自定義 v-model？

v-model實(shí)際是:value + @input的語(yǔ)法糖

<input v-model="inputValue" />

<input 
:value="inputValue" 
@input="inputValue = $event.target.value" 
/>

4.$attrs 和 $listener 有了解嗎？

常用于對(duì)組件進(jìn)行二次封裝時(shí)，比如A -> B -> C，B可以直接將爺爺組件的所有數(shù)據(jù)或者事件直接傳給孫子。

5.Vue 生命周期有哪些，都是做什么的，updated 什么情況下會(huì)觸發(fā)，beforeCreate 的時(shí)候能拿到 Vue 實(shí)例么，組件銷毀的時(shí)候調(diào)用的是哪個(gè) API

生命周期：

• beforeVCreated：實(shí)例了Vue但是還沒(méi)有進(jìn)行數(shù)據(jù)初始化與響應(yīng)式處理
• created：數(shù)據(jù)已經(jīng)被初始化和響應(yīng)式處理，這里可以訪問(wèn)和修改數(shù)據(jù)
• beforeMount：render函數(shù)在這里調(diào)用，生成虛擬DOM，但是還沒(méi)轉(zhuǎn)真實(shí)DOM并替代到el
• mounted：真實(shí)DOM掛載完畢
• beforeUpdated：數(shù)據(jù)更新后，新的虛擬DOM生成，但還沒(méi)更舊虛擬DOM對(duì)比打補(bǔ)丁
• update：新舊虛擬DOM對(duì)比打補(bǔ)丁后，進(jìn)行真實(shí)DOM的更新
• activated：被keep-alive緩存的組件被激活時(shí)調(diào)用
• deactivated：被keep-alive緩存的組件停用時(shí)調(diào)用
• beforeDestroy：實(shí)例銷毀之前調(diào)用，在這一步，依然可以訪問(wèn)數(shù)據(jù)
• destroyed：實(shí)例銷毀后調(diào)用。Vue實(shí)例的所有指令都被解綁，實(shí)例的監(jiān)聽(tīng)器被移除，所有子實(shí)例也都被銷毀
• errorCaptured：捕獲子孫組件的錯(cuò)誤時(shí)被調(diào)用。此鉤子會(huì)收到三個(gè)參數(shù)：錯(cuò)誤對(duì)象、發(fā)生錯(cuò)誤的組件實(shí)例以及一個(gè)包含錯(cuò)誤來(lái)源信息的字符串。此鉤子可以返回false以阻止該錯(cuò)誤繼續(xù)向上傳播。

6.什么情況下會(huì)觸發(fā)組件銷毀，銷毀的時(shí)候會(huì)卸載自定義事件和原生事件么？

組件銷毀時(shí)會(huì)自動(dòng)卸載組件本身綁定的事件，但是僅限于組件本身。例如一些定時(shí)器、全局對(duì)象的事件綁定、eventBus則不會(huì)自動(dòng)解綁，需要手動(dòng)解綁。

7.自定義指令寫過(guò)么，自定義指令都有哪些鉤子？

Vue2：

• bind：指令綁定到指定元素時(shí)觸發(fā)，只觸發(fā)一次
• inserted：指定元素插入到DOM時(shí)觸發(fā)，只觸發(fā)一次
• update：VNode更新時(shí)觸發(fā)，會(huì)觸發(fā)多次
• unbind：指令解綁時(shí)觸發(fā)，只觸發(fā)一次

Vue3：

• created：指定元素的attribute或事件監(jiān)聽(tīng)器被應(yīng)用之前被調(diào)用
• beforeMount：指令綁定到指定元素上觸發(fā)
• mounted：指定元素被掛載時(shí)觸發(fā)
• beforeUpdate：在更新包含組件的VNode之前觸發(fā)
• updated：在包含組件的VNode及其VNode更新后調(diào)用
• beforeUnMount：在卸載指定元素的父組件之前觸發(fā)
• unmounted：指令解綁時(shí)觸發(fā)

8.傳統(tǒng)前端開(kāi)發(fā)和框架開(kāi)發(fā)的區(qū)別是什么？

傳統(tǒng)的前端開(kāi)發(fā)就像是蓋房子時(shí)需要自己從零開(kāi)始，用了框架開(kāi)發(fā)就相當(dāng)于有人事先給你搭好架子，你只需要添磚加瓦就行了。框架有他自己的一套開(kāi)發(fā)模式和開(kāi)發(fā)流程，只要跟著他的流程走，并利用好其開(kāi)發(fā)模式，做起事來(lái)會(huì)事半功倍，這也是為什么現(xiàn)在的前端越來(lái)越趨于框架開(kāi)發(fā)的原因，畢竟時(shí)間就是金錢，節(jié)省時(shí)間很重要。

9.Vue2 的數(shù)據(jù)響應(yīng)式有兩個(gè)缺陷，你知道是哪兩個(gè)缺陷么，為什么會(huì)有這樣的缺陷，如何解決？

• 對(duì)象新增屬性或修改新增的屬性時(shí)，無(wú)法觸發(fā)視圖更新，需要使用 Vue.set，對(duì)象刪除屬性時(shí)需要使用Vue.delete才能觸發(fā)更新
• 數(shù)組直接通過(guò)下標(biāo)修改元素?zé)o法觸發(fā)視圖更新，需要使用數(shù)組的方法splice、push等等

10.Vue 如何實(shí)現(xiàn)的數(shù)組的監(jiān)聽(tīng)，為什么 Vue 沒(méi)有對(duì)數(shù)組下標(biāo)修改做劫持？

Vue2是通過(guò)重寫了數(shù)組原型上的方法來(lái)達(dá)到對(duì)數(shù)組的修改的監(jiān)聽(tīng)，Vue2沒(méi)有對(duì)數(shù)組下標(biāo)做劫持，是出于心梗的考慮，因?yàn)橥ǔ?shù)組元素都是非常多的，可能成百上千，如果每個(gè)元素都進(jìn)行劫持，則非常耗費(fèi)性能。

11.Symbol 有了解嗎，迭代器有了解嗎，哪些是可迭代的？

(1) Symbol

是ES6的特性，具體使用場(chǎng)景有：

• 充當(dāng)對(duì)象的屬性名，實(shí)現(xiàn)私有屬性
• 充當(dāng)變量，實(shí)現(xiàn)單獨(dú)變量
• 用來(lái)定義類里的私有屬性

(2) 迭代

迭代器：Iterator，可迭代對(duì)象有Array、Set、Map，想將不可迭代對(duì)象變成可迭代對(duì)象，可以設(shè)置Symbol.iterator屬性

const t = {
  name: '林三心',
  age: 12
}

t[Symbol.iterator] = function () {
  let index = 0,
    self = this,
    keys = Object.keys(this)

  return {
    next() {
      if (index < keys.length) {
        return {
          value: self[keys[index++]],
          done: false
        }
      } else {
        return {
          value: undefined,
          done: true
        }
      }
    }
  }
}
for (let value of t) {
  console.log(value)
}

(3) 迭代器和迭代對(duì)象

12.用Set獲取兩個(gè)數(shù)組的交集，如何做？

合集：

const heji = (arr1, arr2) => {
  return [...new Set(arr1.concat(arr2))]
}

交集：

const jiaoji = (arr1, arr2) => {
  const temp = new Set(arr1)
  return Array.from(new Set(arr2)).filter(item => {
    return temp.has(item)
  })
}

差集：

const chaji = (arr1, arr2) => {
  const temp1 = new Set(arr1)
  const temp2 = new Set(arr2)
  const res = []
  for (let item of temp1) {
    !temp2.has(item) && res.push(item)
  }
  return res
}

13.實(shí)現(xiàn) Promise.all？

Promise.sx_all = (promises) => {
    return new Promise((resolve, reject) => {
        const result = []
        let count = 0
        for (let i = 0; i < promises.length; i++) {
            const promise = Promise.resolve(promises[i])
            promise.then(res => {
                result[i] = res
                count++
                if (count === promises.length) {
                    resolve(result)
                }
            }).catch(err => {
                reject(err)
            })
        }
    })
}

14.animation 和 transition 的區(qū)別？

• animation需配合@keyframe，而transition不需要
• animation可以出發(fā)多次，transition只能觸發(fā)一次
• animation可以設(shè)置多個(gè)幀，而transition只有兩幀
• 前者可能會(huì)引起多次重回回流，后者會(huì)比較少

15.寫個(gè)動(dòng)畫，一個(gè)盒子，開(kāi)始時(shí)縮放是 0，50%時(shí)是 1，100%時(shí)是 0，開(kāi)始結(jié)束都是慢速，持續(xù) 2 秒，延遲 2 秒，結(jié)束后固定在結(jié)束的效果

.box {
    width: 100px;
    height: 100px;
    background-color: pink;
    animation: scale 2s 9999999 alternate;
  }
  @keyframes scale {
    from { transform: scale(0); }
    to { transform: scale(1); }
  }
}