為什麼使用keep-alive？
在vue中，我們使用component內建元件或者vue-router切換檢視的時候，由於vue會主動解除安裝不使用的元件，所以我們不能儲存元件之前的狀態，而我們經常能遇到需要儲存之前狀態的需求，例如搜尋頁（儲存搜尋記錄），列表頁（儲存之前的瀏覽記錄）等等
keep-alive的作用？
keep-alive是乙個vue的內建元件，它能將不活動的元件儲存下來，而不是直接銷毀，當我們再次訪問這個元件的時候，會先從keep-alive中儲存的元件中尋找，如果有快取的話，直接渲染之前快取的，如果沒有的話，再載入對應的元件。
作為抽象元件，keep-alive是不會直接渲染在dom中的
keep-alive的屬性？
keep-alive提供了三個可選屬性
include- 字串或陣列或正規表示式。只有名稱匹配的元件會被快取。
// **字串**只快取a元件
// **字串**只快取a元件和b元件
// **正規表示式，需要使用v-bind **只快取a元件和b元件
// **陣列，需要使用v-bind **只快取a元件和b元件
exclude- 字串或陣列或正規表示式。名稱匹配的元件不會被快取。
// **字串**不快取a元件
// **字串**不快取a元件和b元件
// **正規表示式，需要使用v-bind **不快取a元件和b元件
// **陣列，需要使用v-bind **不快取a元件和b元件
max- 數字型別。表示最多可以快取多少元件例項。
對於keep-alive需要知道的事情？
keep-alive提供了兩個生命鉤子，分別是activated與deactivated。
因為keep-alive會將元件儲存在記憶體中，並不會銷毀以及重新建立，所以不會重新呼叫元件的created等方法，需要用activated與deactivated這兩個生命鉤子來得知當前元件是否處於活動狀態。
單頁面應用（spa），其實就是指只有乙個主頁面的應用，類似於前端現在的三大框架，react、vue、angular瀏覽器一開始要載入所有必須的 html, js, css。所有的頁面內容都包含在這個所謂的主頁面中。
單頁應用的原理是：利用js感知到url的變化，通過這一點，可以用js動態的將當前的頁面內容清除掉，然後將下乙個頁面的內容掛載到當前的頁面上。頁面每次切換跳轉時，並不需要做html檔案的請求，這樣就節約了很多http傳送時延，我們在切換頁面的時候速度很快。
單頁面應用的優缺點：
優點前後端分離
頁面效果會比較炫酷（比如切換頁面內容時的專場動畫）
缺點
多頁面（mpa），就是指乙個應用中有多個頁面，頁面跳轉時是整頁重新整理，每次都請求乙個新的頁面，
優點
缺點
首先看一下什麼是計算屬性？
computed是vue的計算屬性
為什麼會有計算屬性？
我們都知道的是，在vue的模板指令中我們可以書寫一些簡單的計算，但是，如果我們在模板指令中書寫太多的邏輯運算的話，會使得**難以維護，例如
}
什麼情況下使用計算屬性？
當我們需要乙個值或者乙個資料，而這個資料需要通過一些邏輯運算才能得到的時候，我們更希望將它放在計算屬性內，這樣的話我們可以將整個專案對於資料的複雜運算邏輯全部集中管理在計算屬性內
計算屬性如何使用？
在乙個計算屬性裡可以完成各種複雜的邏輯，包括運算、函式呼叫等，只要最終返回乙個結果就可以。計算屬性可以依賴多個vue 例項的資料，還可以依賴其他計算屬性; 而且計算屬性不僅可以依賴當前vue 例項的資料，還可以依賴其他例項的資料
只要其中任一資料變化，計算屬性就會重新執行，檢視也會更新。
// template
} // script
computed:
}
而計算屬性還有一些稍微高階的用法
// template
} // script
computed:
set(newvalue)
}}
可以看到的是，計算屬性可以是乙個函式，而我們在vue中，methods也是乙個函式，那我們同樣可以通過methods中的方法來實現計算屬性，但是它們之間肯定是有區別的，接著看一下它們之間的區別
computed計算屬性與methods方法的區別
自定義指令是什麼？以及自定義指令的使用場景
在vue中，有很多內建指令，但是這些指令只能滿足我們最基礎的使用，當我們在實際專案中遇到了必須要對dom進行操作的邏輯時，我們就用到了自定義指令自定義指令的鉤子函式 (這裡我們可以直接看官網的介紹)
bind：只呼叫一次，指令第一次繫結到元素時呼叫。在這裡可以進行一次性的初始化設定。
inserted：被繫結元素插入父節點時呼叫 (僅保證父節點存在，但不一定已被插入文件中)。
update：所在元件的 vnode 更新時呼叫，但是可能發生在其子 vnode 更新之前。指令的值可能發生了改變，也可能沒有。但是你可以通過比較更新前後的值來忽略不必要的模板更新。
componentupdated：指令所在元件的 vnode 及其子 vnode 全部更新後呼叫。
unbind：只呼叫一次，指令與元素解綁時呼叫。鉤子函式的引數
el-繫結指令的dom元素，可以用來直接操作dom元素
binding-繫結指令時得到的值、修飾符、引數等
vnode- vue生成的虛擬dom節點
oldvnode- 修改之前的vnode，只能在update函式和componentupdated中呼叫
自定義指令的使用方法
vue.directive('drag',
inserted(el,binding,vnode)
upate(el,binding,vnode,oldvnode)
componentupated(el,binding,vnode,oldvnode)
unbind(el,binding,vnode)
})繫結指令的div
*** ## 6. 父元件獲取非同步動態資料傳遞給子元件，報錯如何解決？
這個問題一般出現在物件，或者我們直接呼叫陣列指定下標的內容時會出現，因為陣列的話，一般我們都是執行列表渲染，陣列內沒有資料是不會執行遍歷的，而物件不一樣，如果沒有對應的屬性，還是會呼叫，只是返回undefined，而我們再呼叫undefined上的屬性時，就會出現報錯
在父元件給子元件傳值的時候，給子元件加乙個判斷，如果資料沒有請求到就不渲染當前元件
0">
data()
}// 執行非同步請求資料的方法和生命週期鉤子等等
methods:
}
首先在vue中router路由跳轉分為兩種
router.push(路由資訊)- 程式設計式導航
- 宣告式導航
這兩種跳轉方式傳遞引數是沒有太大的區別的
vue-router傳參有兩種方式，query和paramsquery傳參
params傳參
query和params傳參的區別
結言
前端常見面試題一
js事件委託就是利用冒泡的原理，把本應該新增到某個元素上的事件委託給他的父級，從而減少dom互動達到網頁優化 var ulobj document.getelementbyid list ulobj.onclick function e nodename 屬性可依據節點的型別返回其名稱。如果節點是乙...
高階前端常見面試題
1 請介紹一下回流 reflow 與重繪 repaint 回流 當我們對 dom 的修改引發了 dom 幾何尺寸的變化 比如修改元素的寬 高或隱藏元素 等 時，瀏覽器需要重新計算元素的幾何屬性 其他元素的幾何屬性和位置也會因此受到影 響 然後再將計算的結果繪製出來。這個過程就是回流 也叫重排 重繪 ...
前端開發常見面試題
1.盒子模型 所謂盒子模型 box model 就是把html頁面中的元素看作是乙個矩形的盒子，也就是乙個盛裝內容的容器。每個矩形都由元素的內容 content 內邊距 padding 邊框 border 和外邊距 margin 組成。2.html5新特性 3.div垂直水平居中 child 1 f...