金九銀十籍嘹，開始充電渗磅，準(zhǔn)備沖刺培慌，祝各位都找到心儀的好工作Ｆ踩５乩础槽惫！沖沖沖
在這里簡單總結(jié)一下最近看的面試題窜管。共勉
回顧一下vue內(nèi)容项秉。
1~keep-alive 是什么?說一下
keep-alive用來緩存組件,避免多次加載相應(yīng)的組件,減少性能消耗诬垂，簡單一點(diǎn)來說就是從頁面1鏈接到其他頁面后回退到頁面1不用在重新執(zhí)行頁面1的代碼劲室，只會(huì)從緩存中加載之前已經(jīng)緩存的頁面1，這樣可以減少加載時(shí)間及性能消耗结窘，提高用戶體驗(yàn)性很洋。
但實(shí)際項(xiàng)目中,需要配合vue-router共同使用
include - 字符串或正則表達(dá)，只有匹配的組件會(huì)被緩存
exclude - 字符串或正則表達(dá)式隧枫，任何匹配的組件都不會(huì)被緩存
2~data為什么是一個(gè)函數(shù)喉磁？
當(dāng)data是一個(gè)函數(shù)的時(shí)候谓苟，每一個(gè)實(shí)例的data屬性都是相互獨(dú)立的，不會(huì)相互影響协怒。這是因?yàn)閖s本身的特性帶來的涝焙，跟vue本身的設(shè)計(jì)無關(guān)。
js本身的面向?qū)ο缶幊桃彩腔谠玩満蜆?gòu)造函數(shù)孕暇，應(yīng)該會(huì)注意原型鏈上添加一般都是一個(gè)函數(shù)方法而不會(huì)去添加一個(gè)對(duì)象了仑撞。
~3vue3.0和2.0的區(qū)別？
- 默認(rèn)進(jìn)行懶觀察（lazy observation）妖滔。
在 2.x 版本里隧哮，不管數(shù)據(jù)多大，都會(huì)在一開始就為其創(chuàng)建觀察者铛楣。當(dāng)數(shù)據(jù)很大時(shí)近迁，這可能會(huì)在頁面載入時(shí)造成明顯的性能壓力。3.x 版本簸州，只會(huì)對(duì)「被用于渲染初始可見部分的數(shù)據(jù)」創(chuàng)建觀察者鉴竭，而且 3.x 的觀察者更高效。 - 更精準(zhǔn)的變更通知岸浑。
比例來說：2.x 版本中搏存，使用 Vue.set 來給對(duì)象新增一個(gè)屬性時(shí)，這個(gè)對(duì)象的所有 watcher 都會(huì)重新運(yùn)行矢洲；3.x 版本中璧眠，只有依賴那個(gè)屬性的 watcher 才會(huì)重新運(yùn)行。 - 3.0 新加入了 TypeScript 以及 PWA 的支持
- 部分命令發(fā)生了變化：
下載安裝 npm install -g vue@cli
刪除了vue list
創(chuàng)建項(xiàng)目 vue create
啟動(dòng)項(xiàng)目 npm run serve - 默認(rèn)項(xiàng)目目錄結(jié)構(gòu)也發(fā)生了變化：
移除了配置文件目錄读虏，config 和 build 文件夾
移除了 static 文件夾责静，新增 public 文件夾，并且 index.html 移動(dòng)到 public 中
在 src 文件夾中新增了 views 文件夾盖桥，用于分類 視圖組件 和 公共組件
4~$nextTick在什么情況下使用灾螃？
我常用的場景是在進(jìn)行獲取數(shù)據(jù)后，需要對(duì)新視圖進(jìn)行下一步操作或者其他操作時(shí)揩徊，發(fā)現(xiàn)獲取不到dom腰鬼。因?yàn)橘x值操作只完成了數(shù)據(jù)模型的改變并沒有完成視圖更新。在這個(gè)時(shí)候需要用到this.$nextTick函數(shù)塑荒。
雖然 Vue.js 通常鼓勵(lì)開發(fā)人員沿著“數(shù)據(jù)驅(qū)動(dòng)”的方式思考熄赡，避免直接接觸 DOM，但是有時(shí)我們確實(shí)要這么做齿税。比如你在Vue生命周期的created()/mounted()鉤子
5~數(shù)據(jù)更新彼硫，但是視圖不更新的情況怎么解決？
由于 Vue 會(huì)在初始化實(shí)例時(shí)對(duì)屬性執(zhí)行 getter/setter 轉(zhuǎn)化過程，所以屬性必須在 data 對(duì)象上存在才能讓 Vue 轉(zhuǎn)換它乌助，這樣才能讓它是響應(yīng)的溜在。在一個(gè)組件實(shí)例中，只有在data里初始化的數(shù)據(jù)才是響應(yīng)的他托，Vue不能檢測到對(duì)象屬性的添加或刪除，沒有在data里聲明的屬性不是響應(yīng)的仆葡。
解決辦法：
使用 Vue.set(object, key, value) 方法將響應(yīng)屬性添加到嵌套的對(duì)象上
Vue.set(vm.someObject, 'b', 2) 或者 this.$set(this.someObject,'b',2) （這也是全局 Vue.set 方法的別名）
6~路由守衛(wèi)說一下赏参？
router.beforeEach((to,from,next)=>{}) （這個(gè)一筆帶過，感興趣的小伙伴百度吧沿盅，我就不贅述了）
7~vue路由改變傳參怎么監(jiān)聽變化把篓？
1.第一種
watch: { '$route'(to, from) { // 在此處監(jiān)聽 }
2.第二種
beforeRouteUpdate (to, from, next) {//這里監(jiān)聽}
8~vue跳轉(zhuǎn)頁面的傳參？
query傳參腰涧，相當(dāng)于get請(qǐng)求韧掩，頁面跳轉(zhuǎn)時(shí)參數(shù)會(huì)在地址欄中顯示 接收參數(shù)：this.$route.query.id
params傳參，相當(dāng)于post請(qǐng)求窖铡，頁面跳轉(zhuǎn)時(shí)參數(shù)不會(huì)在地址欄中顯示 接收：this.$route.params.id
(https://blog.csdn.net/louyuqi520/article/details/109816753)
9~作用域插槽和其他插槽的區(qū)別疗锐？
1.插槽slot
在渲染父組件的時(shí)候，會(huì)將插槽中的先渲染费彼。
創(chuàng)建組件虛擬節(jié)點(diǎn)時(shí)滑臊，會(huì)將組件的兒子的虛擬節(jié)點(diǎn)保存起來。當(dāng)初始化組件時(shí)箍铲，通過插槽屬性將兒子進(jìn)行分類{a:[vnode],b[vnode]}
渲染組件時(shí)會(huì)拿對(duì)應(yīng)的slot屬性的節(jié)點(diǎn)進(jìn)行替換操作雇卷。（插槽的作用域?yàn)楦附M件，插槽中的HTML模板顯示不顯示颠猴、以及怎樣顯示由父組件來決定）
有name的父組件通過html模板上的slot屬性關(guān)聯(lián)具名插槽关划。沒有slot屬性的html模板默認(rèn)關(guān)聯(lián)匿名插槽。
2.作用域插槽slot-scope
作用域插槽在解析的時(shí)候翘瓮，不會(huì)作為組件的孩子節(jié)點(diǎn)贮折，會(huì)解析成函數(shù)，當(dāng)子組件渲染時(shí)春畔，會(huì)調(diào)用此函數(shù)進(jìn)行渲染脱货。
或者可以說成作用域插槽是子組件可以在slot標(biāo)簽上綁定屬性值，在父組件可以拿到子組件的數(shù)據(jù)律姨，通過子組件綁定數(shù)據(jù)傳遞給父組件振峻。（插槽的作用域?yàn)樽咏M件）
//有name的屬于具名插槽，沒有name屬于匿名插槽
普通插槽渲染的位置是在它的父組件里面择份，而不是在子組件里面
作用域插槽渲染是在子組件里面
10~說下vue的響應(yīng)式原理扣孟？
實(shí)現(xiàn)mvvm的雙向綁定，是采用數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式荣赶，通過Object.definePropertype()來劫持各個(gè)屬性的setter凤价，getter鸽斟，在數(shù)據(jù)變動(dòng)時(shí)發(fā)布消息給訂閱者，觸發(fā)相應(yīng)的監(jiān)聽回調(diào)利诺。
11~vue中mixins的理解及應(yīng)用
組件在引用之后相當(dāng)于在父組件內(nèi)開辟了一塊單獨(dú)的空間富蓄，來根據(jù)父組件props過來的值進(jìn)行相應(yīng)的操作，單本質(zhì)上兩者還是涇渭分明慢逾，相對(duì)獨(dú)立立倍。（一筆帶過了，深入了解的百度吧）
再回顧一下js的內(nèi)容
12~你常用數(shù)組有哪些侣滩？
push()口注，pop()，shift()君珠，unshift()寝志，splice()，sort()策添，reverse()可被vue檢測到
filter(), concat(), slice()材部。這些不會(huì)改變原始數(shù)組，但總是返回一個(gè)新數(shù)組舰攒。
13~es6知道多少败富？
模板字符串、解構(gòu)賦值摩窃、箭頭函數(shù)兽叮、let 與 const、class類猾愿，Promise鹦聪，Generator，export蒂秘、import泽本，Default導(dǎo)出，Proxy代理
更多戳[https://www.imooc.com/article/19684](https://www.imooc.com/article/19684]
14~async,await 說一下姻僧？
在ES6中封裝了Generator函數(shù)的語法糖async函數(shù)规丽，但是將其定義在了es7中。ES7定義出的async 函數(shù)撇贺，終于讓 JavaScript 對(duì)于異步操作有了終極解決方案赌莺。Async 函數(shù)是 Generator函數(shù)的語法糖。使用 關(guān)鍵字 Async 來表示松嘶，在函數(shù)內(nèi)部使用 await來表示異步艘狭。相較于 Generator，Async函數(shù)的改進(jìn)在于下面幾點(diǎn)：Generator 函數(shù)的執(zhí)行必須依靠執(zhí)行器，而 Async（） 函數(shù)自帶執(zhí)行器巢音，調(diào)用方式跟普通函數(shù)的調(diào)用一樣遵倦。Async 和 await相較于 * 和 yield 更加語義化。async 函數(shù)返回值是 Promise 對(duì)象官撼，比 Generator函數(shù)返回的 Iterator 對(duì)象方便梧躺，可以直接使用 then（）方法進(jìn)行調(diào)用。
https://www.cnblogs.com/lunlunshiwo/p/8922500.html
15~去重
https://zhuanlan.zhihu.com/p/100610150
16~怎么判斷空對(duì)象歧寺？
Object.keys()方法會(huì)返回一個(gè)由一個(gè)給定對(duì)象的自身可枚舉屬性組成的數(shù)組燥狰。
如果我們的對(duì)象為空，他會(huì)返回一個(gè)空數(shù)組斜筐。
Object.keys(obj).length === 0 ? '空' : '不為空'
17~判斷數(shù)組的的方法?
const arr=[ 1,2,3,4]
① Array.isArray
Array.isArray(arr) // true 在IE9以下版本，不支持
② instanceof
arr instanceof Array // true instanceof關(guān)鍵字蛀缝，用instanceof判斷顷链，會(huì)比Array.isArray判定的范圍要廣泛
③ polyfill中，就是如此實(shí)現(xiàn)：
if (!Array.isArray) {
Array.isArray = function (arg) {
return Object.prototype.toString.call(arg) === "[object Array]"
}
}
Object.prototype.toString.call(arr) === '[object Array]' // true
④ constructor
arr.constructor === Array // true
arr.__proto__.constructor === Array //true
18~元素水平垂直居中
1.position:absolute/fixed;top:0;right:0;bottom:0;left:0; margin:auto;(不用知道元素的寬高)
2.position:absolute/fixed;top:50%;left:50%; margin-top:-(height/2);margin-left:-(width/2)屈梁；
(需知道元素的寬高)
3.flex布局
19~手寫jsonp嗤练，最有成就感的功能，開發(fā)流程在讶，cors除了頭不同外還有什么不同煞抬，建議：細(xì)節(jié)問題。
這個(gè)沒有固定答案构哺。自己臨場發(fā)揮吧革答，多看看代碼
(http://www.ruanyifeng.com/blog/2016/04/cors.html)
好了，先總結(jié)這么多吧曙强。祝各位跳槽成功残拐。沖沖沖！
