vue面試題總結

1、vue雙向綁定的實現原理
2、js的繼承和原型鏈
3、es6語法箭頭函數和普通函數的區別

• 普通函數的this總是指向它的直接調用者。
• 在嚴格模式下，沒找到直接調用者，則函數中的this是undefined。
• 在默認模式下（非嚴格模式），沒找到直接調用者，則函數中的this指向window。

箭頭函數中的this始終指向其父級作用域中的this。換句話說，箭頭函數會捕獲其所在的上下文的this值，作為自己的this值。任何方法都改變不了其指向，如call(), bind(), apply()。在箭頭函數中調用 this 時，僅僅是簡單的沿着作用域鏈向上尋找，找到最近的一個 this 拿來使用，它與調用時的上下文無關。我們用代碼來解釋一下。

 

4、vue父子兄弟組件之間傳遞信息的方式，
5、promise的作用

6、不用es6如何實現promise
7、element-ui的slot插槽
8、如何封裝vue的插件
9、常用的es6屬性

10、ref屬性的應用場景

答：應用場景一：獲取當前元素；應用場景二：父組件（home.vue）中使用子組件（child.vue）中定義的 export default {.......}中的屬性等。

this.$refs.name2是個對象

應用場景二：父路由調用嵌套子路由的方法，在父路由的<router-view ref="childRouter" />   this.$refs.childRouter.getData()

應用場景三：也可以通過此方法獲取dom元素進行一些dom操作

11、【ES6】var、let、const三者的區別

塊級作用域 {}
ES5 中作用域有：全局作用域、函數作用域。沒有塊作用域的概念。
ES6 中新增了塊級作用域。塊作用域由 { } 包括，if語句和 for語句里面的{ }也屬於塊作用域。

var定義的變量，沒有塊的概念，可以跨塊訪問, 不能跨函數訪問，可以變量提升。
let定義的變量，只能在塊作用域里訪問，不能跨塊訪問，也不能跨函數訪問。
const用來定義常量，使用時必須初始化(即必須賦值)，只能在塊作用域里訪問，而且不能修改。

所謂變量提升,指的是變量聲明總會被解釋器"提升"到函數的頂部.

變量提升就是var在函數內部使用的時候，在var定義變量的語句之前是訪問不到變量的！ 所以避免預防的方法就是盡量不使用同名的變量名命名並且在函數頭部定義變量並賦值。

12、for循環中的作用域問題，寫出以下代碼輸出值，嘗試用es5和es6的方式進行改進輸出循環中的i值。

for (var i=1; i<=5; i++) { 
    setTimeout(function timer() { 
       console.log(i); 
    }, i*1000); 

解答：

輸出5個6，因為回調函數在for循環之后執行，所有函數共享一個i的引用。

es5:

 

for (var i=1; i<=5; i++) { 
    (function(j) { 
        setTimeout(function timer() { 
            console.log(j); 
        }, j*1000); 
    })(i); 
}

 

 

es6:

for (let i=1; i<=5; i++) { 
    setTimeout(function timer() { 
        console.log(i);
    }, i*1000); 
}

13、Promise中的執行順序

let promise = new Promise(function(resolve, reject) {
  console.log('Promise');
  resolve();
});
 
promise.then(function() {
  console.log('resolved.');
});
 
console.log('Hi!');
 
// Promise
// Hi!

上面代碼中，Promise 新建后立即執行，所以首先輸出的是Promise。然后，then方法指定的回調函數，將在當前腳本所有同步任務執行完才會執行，所以resolved最后輸出。

14、JavaScript事件循環機制相關問題

關鍵字：單線程非阻塞、執行棧、事件隊列、宏任務(setTimeout()、setInterval())、微任務(new Promise())

• 宏任務、微任務、同步任務的執行順序

setTimeout(function () {
    console.log(1);
});
 
new Promise(function(resolve,reject){
    console.log(2)
    resolve(3)
}).then(function(val){
    console.log(val);
})
console.log(4);
// 2
// 4
// 3
// 1

先按順序執行同步任務，Promise新建后立即執行輸出2，接着輸出4，異步任務等同步任務執行完后執行，且同一次事件循環中，微任務永遠在宏任務之前執行。這時候執行棧空了，執行事件隊列，先取出微任務，輸出3，最后取出一個宏任務，輸出1。

15、let跟var的區別

Var只有函數作用域跟全局作用域，let是ES6變量定義有塊級作用域，var可以變量提升，let沒有變量提升有暫時性死區，var，可以重復聲明，let變量不可以重復聲明。

16、什么是變量提升

在ES6之前，JavaScript沒有塊級作用域(一對花括號{}即為一個塊級作用域)，只有全局作用域和函數作用域。變量提升即將變量聲明提升到它所在作用域的最開始的部分。

 

 

 

 

17、for跟map的優缺點

 

map的優點，可以遍歷數組且可返回新組成的數組而不改變原數組，是高階函數，使代碼的可維護性更高，，更加精煉易讀優雅，缺點就是比較耗性能，數據量非常大的時候，容易影響到性能，低版本瀏覽器不支持；for循環優點是沒有兼容性問題，性能最高適合用於大數據量遍歷，缺點就是代碼不夠優雅，沒辦法直接返回組成新數組。

18、http請求過程

域名解析 --> 發起TCP的3次握手 --> 建立TCP連接后發起http請求 --> 服務器響應http請求，瀏覽器得到html代碼 --> 瀏覽器解析html代碼，並請求html代碼中的資源（如js、css、圖片等） --> 瀏覽器對頁面進行渲染呈現給用戶

19、Vue組件中的data為什么必須是一個函數

 

 

如果data是一個函數的話，這樣每復用一次組件，就會返回一份新的data，類似於給每個組件實例創建一個私有的數據空間，讓各個組件實例維護各自的數據。而單純的寫成對象形式，就使得所有組件實例共用了一份data，就會造成一個變了全都會變的結果。