vue面試題整理(自用)

時間 2019-11-21

標籤 vue 面試整理自用欄目快樂工作简体版

原文原文鏈接

vue生命週期

什麼是vue生命週期？

vue實例從建立到銷燬的過程，就是生命週期。也就是從開始建立、初始化數據、編譯模板、掛載Dom->渲染、更新->渲染、卸載等一些列的過程。咱們稱這是vue的生命週期。vue

vue生命週期的做用？

vue的生命週期中有多個事件鉤子，讓咱們在控制整個vue示例的過程時更容易造成好的邏輯。node

第一次頁面加載會觸發那幾個鉤子？

beforeCreate、created、beforeMount、mounted面試

DOM渲染在哪一個週期中就已經完成

mountedajax

Vue 的父組件和子組件生命週期鉤子執行順序是什麼

加載渲染過程父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mountedvuex
子組件更新過程父beforeUpdate->子beforeUpdate->子updated->父updatednpm
父組件更新過程父beforeUpdate->父updated數組
銷燬過程父beforeDestroy->子beforeDestroy->子destroyed->父destroyedpromise

vuex相關面試

vuex有哪幾種屬性？

5中，分別是state、getter、mutation、action、module緩存

state 單一狀態樹。在state中須要定義咱們所須要管理的數組，對象，字符等，只有在這裏定義了，在vue的組件中才能獲取你定義的這個對象的狀態。(基本數據 )
getter相似vue的計算屬性，當咱們須要從store的state中派生出一些狀態，那麼咱們就須要使用getter，getter會接受state做爲第一個參數，並且getter的返回值會根據他的依賴被緩存起來，只有getter中的依賴值（state中的某個須要派生狀態的值）發生改變的時候纔會被從新計算。(從基本數據派生的數據 )
mutation更改store中state狀態的惟一方法就是提交mutation，每一個mutation都有一個字符串類型的事件類型和一個回調函數，咱們須要改變state的值就要在回調函數中改變。咱們要執行這個回調函數，那麼咱們須要執行一個相應的調用方法：store.commit。(提交更改數據的方法，同步！ )
actionaction能夠提交mutation，在action中能夠執行store.commit，並且action中能夠有任何的異步操做。在頁面中若是咱們要調用這個action，則須要執行store.dispatch.( 像一個裝飾器，包裹mutations，使之能夠異步。 )
module其實只是解決了當state中很複雜臃腫的時候，module能夠將store分割成模塊，每一個模塊中擁有本身的state、mutation、action和getter。(模塊化Vuex)

vuex的State特性是?

Vuex就是一個倉庫，倉庫裏面放了不少對象。其中state就是數據源存放地，對應於與通常Vue對象裏面的data
state裏面存放的數據是響應式的，Vue組件從store中讀取數據，如果store中的數據發生改變，依賴這個數據的組件也會發生更新
它經過mapState把全局的 state 和 getters 映射到當前組件的 computed 計算屬性中

vuex的Getter特性是？

getters 能夠對State進行計算操做，它就是Store的計算屬性
雖然在組件內也能夠作計算屬性，可是getters 能夠在多組件之間複用
若是一個狀態只在一個組件內使用，是能夠不用getters

vuex的Mutation特性是？

Action 相似於 mutation，不一樣在於：
Action 提交的是 mutation，而不是直接變動狀態。
Action 能夠包含任意異步操做

Vue.js中ajax請求代碼應該寫在組件的methods中仍是vuex的actions中？

若是請求來的數據是否是要被其餘組件公用，僅僅在請求的組件內使用，就不須要放入vuex 的state裏。
若是被其餘地方複用，這個很大概率上是須要的，若是須要，請將請求放入action裏，方便複用，幷包裝成promise返回，在調用處用async await處理返回的數據。若是不要複用這個請求，那麼直接寫在vue文件裏很方便。

不用Vuex會帶來什麼問題？

可維護性會降低，你要想修改數據，你得維護三個地方
可讀性會降低，由於一個組件裏的數據，你根本就看不出來是從哪來的
增長耦合，大量的上傳派發，會讓耦合性大大的增長，原本Vue用Component就是爲了減小耦合，如今這麼用，和組件化的初衷相背。 但兄弟組件有大量通訊的，建議必定要用，無論大項目和小項目，由於這樣會省不少事

vuex的store有幾個屬性值？

state,mutations,active,gettersbash

Vue computed 和 watch 區別

methods
在頁面中使用大量或是複雜的表達式去處理數據，對頁面的維護會有很大的影響。這個時候就須要用到computed 計算屬性來處理複雜的邏輯運算。
computed 計算屬性只有在相關的數據發生變化時纔會改變要計算的屬性，當相關數據沒有變化是，它會讀取緩存。
Watch：當你須要在數據變化響應時，執行異步操做，或高性能消耗的操做，自定義 watcher 的方式就會頗有幫助。

寫 React / Vue 項目時爲何要在列表組件中寫 key，其做用是什麼？

key是給每個vnode的惟一id,能夠依靠key,更準確, 更快的拿到oldVnode中對應的vnode節點。

若是數據位置替換了，

沒key，dom位置不變，節點innerText內容更新了
有key，dom位置變了，內容沒有更新

數據進行增刪

沒key，節點位置不變，內容也更新了
有key, 節點刪除了 A, B 節點，新增了 F, G 節點

['1', '2', '3'].map(parseInt) what & why ?

對於每一個迭代map, parseInt()傳遞兩個參數: 字符串和基數。因此實際執行的的代碼是：

['1', '2', '3'].map((item, index) => {
	return parseInt(item, index)
})
複製代碼

即返回的值分別爲：

複製代碼

介紹下 Set、Map、WeakSet 和 WeakMap 的區別？

Set

成員的值都是惟一的，沒有重複的值
兩個屬性 constructor，size
能夠遍歷，
四個方法：add, delete,has,clear

weakSet

不重複的值的集合
成員只能是對象，而不能是其餘類型的值。
沒有size屬性，不能遍歷，
三個方法add，delete，has

Map

JavaScript 的對象（Object），本質上是鍵值對的集合
可是傳統上只能用字符串看成鍵。
能夠遍歷，方法不少，能夠幹跟各類數據格式轉換

weakMap

只接受對象做爲鍵名
健名所指向的對象，不計入垃圾回收機制
不能遍歷，方法同get,set,has,delete

ES5/ES6 的繼承除了寫法之外還有什麼區別？

介紹下深度優先遍歷和廣度優先遍歷，如何實現？

請分別用深度優先思想和廣度優先思想實現一個拷貝函數？

setTimeout、Promise、Async/Await 的區別

事件循環中分爲宏任務隊列和微任務隊列。

setTimeout

console.log('script start')	//1. 打印 script start

setTimeout(function(){
    console.log('settimeout')	// 4. 打印 settimeout
})	// 2. 調用 setTimeout 函數，並定義其完成後執行的回調函數

console.log('script end')	//3. 打印 script start

// 輸出順序： script start -> script end -> settimeout
複製代碼

Promise

console.log('script start')  // 1111111
let promise1 = new Promise(function (resolve) {
    console.log('promise1')   // 222222
    resolve()
    console.log('promise1 end')  // 333333
}).then(function () {
    console.log('promise2')
})
setTimeout(function(){
    console.log('settimeout')
})
console.log('script end')
// 輸出順序: script start -> promise1 -> promise1 end -> script end-> promise2 -> settimeout
複製代碼

async/await

async function async1(){
   console.log('async1 start');
    await async2();
    console.log('async1 end')
}
async function async2(){
    console.log('async2')
}

console.log('script start');
async1();
console.log('script end')

// 輸出順序：script start -> async1 start -> async2 -> script end -> async1 end
複製代碼

將數組扁平化並去除其中重複數據，最終獲得一個升序且不重複的數組

已知以下數組： var arr = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14] ] ] ], 10]; 編寫一個程序將數組扁平化去併除其中重複部分數據，最終獲得一個升序且不重複的數組

let newArr = [...new Set(arr.flat(Infinity)].sort((a,b)=>a-b)
複製代碼

Promise 構造函數是同步執行仍是異步執行，那麼 then 方法呢？

promise構造函數是同步執行的，then方法是異步執行的

介紹下 npm 模塊安裝機制，爲何輸入 npm install 就能夠自動安裝對應的模塊？

？？？？

有如下 3 個判斷數組的方法，請分別介紹它們之間的區別和優劣Object.prototype.toString.call() 、 instanceof 以及 Array.isArray()

關於 const 和 let 聲明的變量不在 window 上

在ES5中，全局變量直接掛載到全局對象的屬性上，因此能在window上看到var聲明的變量在ES6中，全局對象的屬性和全局變量脫鉤，可是爲了保持兼容性，舊的不變，因此var、function聲明的全局變量依然能夠在window對象上看到，而let、const聲明的全局變量在window對象上看不到

vue 的雙向數據綁定，Model 如何改變 View，View 又是如何改變 Model 的

在 Vue 中，子組件爲什麼不能夠修改父組件傳遞的 Prop，若是修改了，Vue 是如何監控到屬性的修改並給出警告的。

爲了保證數據的單向流動，便於對數據進行追蹤，避免數據混亂。

vue如何知道修改了父組件傳來的props？

然而 props傳入的是對象的話是能夠直接在子組件裏更改的, 由於是同一個引用組件對於data的監聽是深度監聽而對於props的監聽是淺度監聽

使用 sort() 對數組 [3, 15, 8, 29, 102, 22] 進行排序，輸出結果

let arr = [3, 15, 8, 29, 102, 22]
arr.sort((a, b)=>{
    return a-b
})
複製代碼

雙向綁定和 vuex 是否衝突

在嚴格模式下直接使用確實會有問題。解決方案：

<input v-model="message" />

computed: {
    message: {
        set (value) {
            this.$store.dispatch('updateMessage', value);
        },
        get () {
            return this.$store.state.obj.message
        }
    }
}
mutations: {
    UPDATE_MESSAGE (state, v) {
        state.obj.message = v;
    }
}
actions: {
    update_message ({ commit }, v) {
        commit('UPDATE_MESSAGE', v);
    }
}
複製代碼

Vue 的響應式原理中 Object.defineProperty 有什麼缺陷？爲何在 Vue3.0 採用了 Proxy，拋棄了 Object.defineProperty？

Object.defineProperty沒法監控到數組下標的變化，致使經過數組下標添加元素，不能實時響應；
Object.defineProperty只能劫持對象的屬性，從而須要對每一個對象，每一個屬性進行遍歷，若是，屬性值是對象，還須要深度遍歷。Proxy能夠劫持整個對象，並返回一個新的對象。
Proxy不只能夠代理對象，還能夠代理數組。還能夠代理動態增長的屬性。

怎麼讓一個 div 水平垂直居中

<div class="parent">
  <div class="child"></div>
</div>


div.parent{
  display:flex;
}
div.child{
  margin:auto;
}
複製代碼

給定兩個數組，寫一個方法來計算它們的交集。

var nums1 = [1, 2, 2, 1], nums2 = [2, 2, 3, 4];
var newArr2 = nums1.filter((item) => {
     return nums2.includes(item);
});
console.log(newArr2);
複製代碼

如何把一個字符串的大小寫取反（大寫變小寫小寫變大寫），例如 ’AbC' 變成 'aBc' 。

function processString (s) {
    var arr = s.split('');
    var new_arr = arr.map((item) => {
        return item === item.toUpperCase() ? item.toLowerCase() : item.toUpperCase();
    });
    return new_arr.join('');
}
console.log(processString('AbC'));
複製代碼