1、 談談你對MVVM開發模式的理解：

MVVM可以理解為：model-view-viewModel

• Model：數據模型層，數據和業務邏輯都在Model層中定義；

• View：UI視圖，負責數據展示；

• ViewModel： Model和View無直接關聯，通過ViewModel來進行數據處理，Model和ViewModel之間有著雙向數據綁定的聯系。因此當Model中的數據改變時會觸發View層的刷新，View中由于用戶交互操作而改變的數據也會在Model中同步。

2、vue實現數據雙向綁定的原理？

采用數據劫持結合發布者-訂閱者模式的方式，通過Object.defineProperty()來劫持各個屬性的setter，getter，在數據變動時發布消息給訂閱者，訂閱者會觸發它的update方法，對視圖進行更新。從而實現數據的雙向綁定。

3、vue的生命周期鉤子是什么？

Vue繼承了Angular雙向數據綁定的優點和react組件化的特點。在 vue中，每個組件都是獨立的，都有屬于自己的生命周期。
即在new一個對象實例的過程中，我們可以在不同的階段做各種各樣的事情。例如：創建、數據初始化、掛載、更新、銷毀。這就是一個完整的組件生命周期，生命周期鉤子=生命周期函數=生命周期事件：

    beforeCreate：new了一個空的vue實例，暫未初始化data、methods；
    created：完成data、methods的初始化；
    beforeMount：生成模板，并將data數據和方法掛載到虛擬的Dom樹上。
    mounted：通過虛擬模板和虛擬DOM渲染真實DOM樹。

    (
        beforeUpdate：數據被更新到虛擬DOM上，在實際頁面中找哪位反應出來；
        updated：通過虛擬DOM重新渲染真實DOM樹，可進行DOM操作；
    )// 更新階段不必須（可為0至多次）

    beforeDestroy：清楚事件監聽、子組件、watcher等，但是還是可以實現完整的功能；
    destroyed：組件已經銷毀。

生命周期事件

4、Vue 有哪些常見的指令？

v-html、v-show、v-if、v-for、v-model、v-on、v-once等等。

5、v-if 和 v-show 有什么區別？

• v-show：僅僅控制元素的顯示方式，將 display 屬性在 block 和 none 來回切換；
• v-if：會控制這個 DOM 節點的存在與否。當我們需要經常切換某個元素的顯示/隱藏時，即初始化時如果v-if為false，那么將不用編譯該節點；
  優缺點對照：如果需要顯示和隱藏來回切花，那么使用v-show會更加節省性能上的開銷；當只需要一次顯示或隱藏時，使用v-if更加合理。

6、delete和Vue.delete刪除數組的區別

delete只是被刪除的元素變成了 empty/undefined 其他的元素的鍵值還是不變。
Vue.delete 直接刪除數組元素，改變了數組的鍵值。

7、手寫promise獲取一張圖片

1、Promise產生的原因

常見的回調地獄場景：
// 回調地獄  callback hell
// 獲取第一份數據
$.get(url1, (data1) => {
    console.log(data1)
    //獲取第二份數據
    $.get(url2, (data2) => {
        console.log(data2)
        //獲取第三份數據
        $.get(url3, (data3) => {
            console.log(data3)
            //...
        })
    })
})

如上所示，多異步容易出現以下問題：

• 多異步返回的執行順序不可控。
• 多異步的異常錯誤處理非常繁雜。
• 多異步嵌套，會導致回調地獄。

我們急需要一個能夠保證異步執行順序，保證執行和拋出錯誤的異步處理的保證范式來解決這些問題。ES6用 promise處理同樣的多異步問題：

function getData(url) {
            return new Promise((resolve, reject) => {
        $.ajax({
            url,
            success(data) {
                resolve(data)
            },
            error(err) {
                reject(data)
            }
        })
    })
}
var url1 = '/datà1.json'
var url2 = '/datà2.json'
var url3 = '/datà3.json'
getData(url1).then(data1 => {
    console.log(data1)
    return getData(url2)
}).then(data2 => {
    console.log(data2)
    return getData(url3)
}).then(data3 => {
    console.log(data3)
}).catch(err => {
    console.log(err)
})

2、Promise加載一張圖片

function loadImg(src2) {
    return new Promise(
        //參數 resolve reject 均是函數
        (resolve,reject)=>{
            const img1 = document.createElement('image')
            img1.src = src2
            img1.onload=()=>{
                resolve(img1)
            }
            img1.onerror=()=>{
                const err = new Error(`圖片加載失敗！${src}`)
                reject(err)
            }
            
        }
    )
}
const url1 = 'https://img4.sycdn.imooc.com/szimg/5dbffa9109ef425a12000676-360-202.png'
const url2 = 'https://img4.sycdn.imooc.com/szimg/5dbffa9109ef425a12000676-360-202.png'
loadImg(url1).then(img1=>{
    console.log(img1.width)
    return img1 //返回resolve中的參數
}).then(img1=>{
    console.log(img1.height)
    return loadImg(url2) //返回promise實例
}).then(img2=>{則下一個then的數據就是該promise實例的resolve中的參數
    console.log(img2.width)
    return img2
}).then(img2=>{
    console.log(img2.height)
})
.catch(err=>{
    console.log(err)
})

其他前端面試問題：

1、前端如何優化網站性能？

1、減少 HTTP 請求數量
在瀏覽器與服務器進行通信時，主要是通過 HTTP 進行通信。瀏覽器與服務器需要經過三次握手，每次握手需要花費大量時間。而且不同瀏覽器對資源文件并發請求數量有限（不同瀏覽器允許并發數），一旦 HTTP 請求數量達到一定數量，資源請求就存在等待狀態，這是很致命的，因此減少 HTTP 的請求數量可以很大程度上對網站性能進行優化。

2、CSS Sprites（精靈圖）
這是將多張圖片合并成一張圖片達到減少HTTP請求的一種解決方案，可以通過CSS的background屬性來訪問圖片內容。這種方案同時還可以減少圖片總字節數。

3、合并 CSS 和 JS 文件
現在前端有很多工程化打包工具，如：grunt、gulp、webpack等。為了減少 HTTP 請求數量，可以通過這些工具再發布前將多個CSS或者多個JS合并成一個文件。

4、采用 lazyLoad
俗稱懶加載，可以控制網頁上的內容在一開始無需加載，不需要發請求，等到用戶操作真正需要的時候立即加載出內容。這樣就控制了網頁資源一次性請求數量。

5、控制資源文件加載優先級
瀏覽器在加載HTML內容時，是將HTML內容從上至下依次解析，解析到link或者script標簽就會加載href或者src對應鏈接內容，為了第一時間展示頁面給用戶，就需要將CSS提前加載，不要受 JS 加載影響。
一般情況下都是CSS在頭部，JS在底部。

6、利用瀏覽器緩存
瀏覽器緩存是將網絡資源存儲在本地，等待下次請求該資源時，如果資源已經存在就不需要到服務器重新請求該資源，直接在本地讀取該資源。

7、減少重排（Reflow）
基本原理：重排是DOM的變化影響到了元素的幾何屬性（寬和高），瀏覽器會重新計算元素的幾何屬性，會使渲染樹中受到影響的部分失效，瀏覽器會驗證 DOM 樹上的所有其它結點的visibility屬性，這也是Reflow低效的原因。如果Reflow的過于頻繁，CPU使用率就會急劇上升。
減少Reflow，如果需要在DOM操作時添加樣式，盡量使用 增加class屬性，而不是通過style操作樣式。

8、減少 DOM 操作

9、圖標使用 IconFont 替換

2、 頁面渲染過程？

• 輸入網址；

• 發送到DNS服務器，并獲取域名對應的web服務器對應的ip地址；

• 與web服務器建立TCP連接；

• 瀏覽器向web服務器發送http請求；

• web服務器響應請求，并返回指定url的數據（或錯誤信息，或重定向的新的url地址）；

• 瀏覽器下載web服務器返回的數據及解析html源文件；

• 生成DOM樹，解析css和js，渲染頁面，直至顯示完成；

3、 jQuery獲取的dom對象和原生的dom對象有何區別？

js原生獲取的dom是一個對象，jQuery對象就是一個數組對象，其實就是選擇出來的元素的數組集合，所以說他們兩者是不同的對象類型不等價。

原生DOM對象轉jQuery對象：

• var box = document.getElementById('box');
• var (box);

jQuery對象轉原生DOM對象：

• var ('#box');
• var box = $box[0];

4、jQuery如何擴展自定義方法

• (jQuery.fn.myMethod=function () {
• alert('myMethod');
• })