1.vue生命周期有哪些，在每個生命周期都做什么事情孝赫？

vue實例從創(chuàng)建到銷毀的整個過程较木，總共有8個生命鉤子函數(shù)

• beforecreate創(chuàng)建之前的狀態(tài)，初始化事件和生命周期青柄，里面可以加載一些頁面渲染前出現(xiàn)的內容
• created創(chuàng)建完成之后伐债，此時存在data屬性，但是沒有el元素致开，可以在這個生命周期函數(shù)內進行數(shù)據(jù)和資源的加載
• beforeMount掛在之前峰锁，先判斷有沒有el元素，如果沒有可以通過手動調用$mount這個方法進行手動掛載双戳，這個生命周期基本上不常用
• mounted掛在完成之后虹蒋，先看看有沒有template模板，如果有飒货，就渲染魄衅，如果沒有，就渲染外層的html塘辅，在這個生命鉤子函數(shù)里面可以進行DOM元素的一些操作
• 當頁面發(fā)生數(shù)據(jù)更新的時候晃虫，會觸發(fā)beforeupdate和updated這兩個生命鉤子函數(shù)，但是在beforeupdate里面可以監(jiān)聽到數(shù)據(jù)的變化扣墩，但是頁面沒有發(fā)生變化傲茄，在updated里面才實現(xiàn)頁面的變化
• 如果要銷毀這個組件毅访，調用$destroy這個方法銷毀組件，destroyed 可以執(zhí)行一些優(yōu)化操作,清空定時器盘榨，解除綁定事件

2.watch和computed的區(qū)別喻粹？

watch是監(jiān)聽屬性，里面可以傳兩個參數(shù)草巡，一個新值和舊值守呜，里面可以做一些異步的操作

computed是計算屬性，有緩存機制山憨，只有依賴的數(shù)據(jù)發(fā)生改變才會重新計算查乒，computed里面不能進行異步操作

3.組件之間的通訊？

父組件給子組件傳值：在父組件里面的子組件的標簽上面自定義一個變量郁竟，在子組件中通過props屬性來接收玛迄，props是一個數(shù)組，也可以是一個對象棚亩，第一個參數(shù)為數(shù)據(jù)的類型 第二個參數(shù)為默認值（default）是否必填項（required）自定義驗證函數(shù)（validator）

子組件給父組件傳值蓖议，需要通過事件來觸發(fā)，在子組件中定義一個事件讥蟆，通過$emit（函數(shù)名勒虾，數(shù)據(jù)）傳遞參數(shù)，在父組件里面定義這個自定義事件瘸彤，就可以接受到子組件傳過來的參數(shù)

兄弟之間的傳值：需要定義一個公共的實例文件修然，然后通過on響應事件并接受參數(shù)

4.v-if和v-show的區(qū)別质况？

都是用來控制元素的顯示和隱藏愕宋，在控制元素隱藏的時候v-if采用的是惰性加載，不加載這個DOM節(jié)點结榄，而v-show則采用的是利用display來控制元素的隱藏

如果需要頻繁的切換元素的顯示和隱藏就用v-show

如果通過條件判斷來控制元素的顯示和隱藏的時候使用v-if

5.key值得作用掏婶？

當使用v-for采用循環(huán)的dom節(jié)點的時候，采用的是‘就地復用的元素’潭陪，所以我們需要為每一個元素綁定一個唯一值來區(qū)分雄妥，提高虛擬dom的渲染速率

6.vuex的使用流程？

先使用npm i vuex 來安裝

創(chuàng)建一個store文件夾依溯，在里面創(chuàng)建一個index文件老厌，然后將文件引入到main.js文件中，vue.use(vuex)

vuex有5個模塊黎炉，分別是state枝秤，mutations，getters慷嗜，actions淀弹，module

1.在vue組件里面丹壕，通過dispatch來觸發(fā)actions提交修改數(shù)據(jù)的操作。 this.$store.dispatch()

2.然后再通過actions的commit來觸發(fā)mutations來修改數(shù)據(jù)薇溃。this.$store.commit()

3.mutations接收到commit的請求菌赖，就會自動通過Mutate來修改state（數(shù)據(jù)中心里面的數(shù)據(jù)狀態(tài)）里面的數(shù)據(jù)。

4.最后由store觸發(fā)每一個調用它的組件的更新

可以通過this.store.state直接調用里面的數(shù)據(jù)沐序，通過this.store.commit()調用mutations里面的方法

getters相當于vue中的計算屬性琉用，通過this.$store.getters.xx來調用，

module可以在每個模塊中定義自己的倉庫

使用場景：音樂播放策幼，加入購物車

7.vue中的修飾符邑时？

stop阻止冒泡， prevent阻止事件的默認行為特姐， once只觸發(fā)一次 晶丘， self 只在自己身上觸發(fā) capture 觸發(fā)捕獲事件 .lazy失去焦點或回車才更新 .number轉成number類型 .trim 過濾首尾空格

8.vue-router模塊？

有router-view 用來顯示視圖 router-link 用來實現(xiàn)路由跳轉

9.動態(tài)路由的跳轉和編程式導航的跳轉唐含？

動態(tài)路由跳轉： 在路由文件中先配置path路徑浅浮，在后面寫：id ，然后通過params.id來接收參數(shù)

編程式導航的方式進行跳轉觉壶，通過 this.route.params.id 獲取傳過來的參數(shù) this.route.query.id

10.params和query獲取參數(shù)的方法有什么區(qū)別脑题？

• query需要path來引入件缸，params需要name來引入
• query類似于ajax中的get铜靶，params則類似于post
• query刷新不會丟失query里面的數(shù)據(jù)，params刷新會丟失params里面的數(shù)據(jù)

11.axios是什么他炊？

請求后臺數(shù)據(jù)的模塊争剿。

使用方法：先npm i axios，然后將其掛載到vue原型上面痊末，如果請求的地址有跨域蚕苇，需要先在config/index.js中進行配置，然后使用.get和.post方法凿叠，請求成功將在then中返回數(shù)據(jù)涩笤，失敗的話在catch里面

12、自定義指令（v-check盒件、v-focus）的方法有哪些蹬碧？它有哪些鉤子函數(shù)？還有哪些鉤子函數(shù)參數(shù)炒刁？

全局定義指令：在vue對象的directive方法里面有兩個參數(shù)恩沽，一個是指令名稱，另外一個是函數(shù)翔始。組件內定義指令：directives

鉤子函數(shù)：bind（綁定事件觸發(fā)）罗心、inserted(節(jié)點插入的時候觸發(fā))里伯、update（組件內相關更新）

鉤子函數(shù)參數(shù)：el、binding

13.vue實現(xiàn)雙向數(shù)據(jù)綁定的原理渤闷？

vue實現(xiàn)雙向數(shù)據(jù)綁定的原理是采用數(shù)據(jù)劫持結合發(fā)布者-訂閱者模式疾瓮，通過Object.defineProperty()來劫持各個屬性的getter和setter方法，在數(shù)據(jù)發(fā)生變化的時候發(fā)布消息給訂閱者肤晓，觸發(fā)相對應的回調函數(shù)爷贫。

需要observe的數(shù)據(jù)對象進行遞歸遍歷

compile解析模板指令

Watcher訂閱者是Observe和compile之間通信的橋梁

MVVM作為數(shù)據(jù)綁定的入口，整合Observe补憾、compile漫萄、Watcher三者，通過Observer 來監(jiān)聽自己的model數(shù)據(jù)變化盈匾，通過Compile來解析編譯模板指令腾务，最終利用Watcher搭起Observer和Compile之間的通信橋梁，達到數(shù)據(jù)變化 -> 視圖更新削饵；視圖交互變化(input) -> 數(shù)據(jù)model變更的雙向綁定效果岩瘦。

14.<keep-alive></keep-alive>的作用是什么?

<keep-alive></keep-alive> 包裹動態(tài)組件時，會緩存不活動的組件實例,主要用于保留組件狀態(tài)或避免重新渲染窿撬。

15.methods启昧、computed、watch三者的區(qū)別劈伴？

methods是個方法密末，執(zhí)行的時候需要事件進行觸發(fā)

computed是一個計算屬性，是實時響應的跛璧，只要data中的屬性發(fā)生了變化那么就會觸發(fā)computed严里，計算屬 性是基于屬性的依賴進行緩存的，methods調用的時候需要加()追城，而computed調用的時候是不需要加()

watch屬性監(jiān)聽刹碾，watch用來監(jiān)聽屬性的變化，當值發(fā)生變化的時候來執(zhí)行特定的函數(shù)座柱，watch監(jiān)聽屬性的時候 會有2個參數(shù)newVal和oldVal一個新值一個舊值

16.vue中的過濾器如何使用迷帜？

Vue.filter()

參數(shù)1：過濾器名稱

參數(shù)2：過濾器實現(xiàn)的方法 該方法中有2個參數(shù) 參數(shù)1為需要過濾的數(shù)據(jù)，參數(shù)2為過濾器傳遞的參數(shù)

使用場景：日期的過濾.....

17.為什么在組件內部data是一個函數(shù)而不是一個對象色洞？

因為每次調用組件的時候都會重新生成一個對象,如果是一個對象的情況下戏锹，data數(shù)據(jù)會進行復用(因為對象是引 用數(shù)據(jù)類型),而當data是一個函數(shù)的時候每次調用的時候就會返回一個新的對象

18.如何實現(xiàn)路由解耦？

在路由的配置項中設置props:true 在需要接受組件的內部通過props進行接受

19.什么是路由守衛(wèi)锋玲？路由的鉤子函數(shù)有哪些景用？分別說出使用的場景，及用法？

1伞插、什么是路由守衛(wèi)割粮？ 路由跳轉前后做的一些驗證

2、路由常見的鉤子函數(shù) berforeRouteEnter媚污、beforeRouteUpdate舀瓢、beforeRouteLeave

使用的場景： beforeRouteEnter:當路由進入之前:登陸驗證、熱力圖的記錄耗美、

beforeRouteUpdate:當路由進行更新的時候京髓。如果當前路由發(fā)生了變化，但是不需要組件的創(chuàng)建銷毀的過程的 時候商架，就需要用到這個鉤子函數(shù)

beforeRouterLeave:當路由離開的時候堰怨、當用戶沒有進行支付離開的時候、當用戶填寫完信息沒有保存的時候

20.使用vue的時候會一下子加載所有的東西使得初始化頁面很卡蛇摸，該如何解決备图？ vue-router解決首次加載緩慢的問題。懶加載簡單來說就是按需加載赶袄？

像vue這種單頁面應用揽涮，如果沒有應用懶加載，運用webpack打包后的文件將會異常的大饿肺，造成進入首頁時蒋困， 需要加載的內容過多，時間過長敬辣，會出現(xiàn)長時間的白屏雪标，即使做了loading也是不利于用戶體驗，而運用懶加載 則可以將頁面進行劃分购岗，需要的時候加載頁面汰聋，可以有效的分擔首頁所承擔的加載壓力门粪，減少首頁加載用時喊积。

用法：在配置路由時使用：component:resolve=>require([“@components/路由的路徑”]，resolve)玄妈。 就是用了懶加載后打完包直接運行那個index.html會報錯乾吻，報文件引用錯誤其實是打包時候路徑配置有點問 題，找到build下面的webpack.prod.conf.js 添加 publicPath："./",

21.vm.$nextTick( [callback] )是什么拟蜻？

將回調延遲到下次 DOM 更新循環(huán)之后執(zhí)行绎签。在修改數(shù)據(jù)之后立即使用它，然后等待 DOM 更新酝锅。它跟全局方法 Vue.nextTick 一樣诡必，不同的是回調的 this 自動綁定到調用它的實例上。

22.vue2.0和vue3.0有什么區(qū)別？

1. 默認進行懶觀察：在 2.x 版本里爸舒，不管數(shù)據(jù)多大蟋字，都會在一開始就為其創(chuàng)建觀察者。當數(shù)據(jù)很大時扭勉，這可能會在頁面載入時造成明顯的性能壓力鹊奖。3.x 版本，只會對「被用于渲染初始可見部分的數(shù)據(jù)」創(chuàng)建觀察者涂炎，而且 3.x 的觀察者更高效忠聚。
2. 3.0中加入了typescript
3. 創(chuàng)建項目的時候不一樣：2.0 vue init webpack ， 3.0 vue create
4. 啟動項目： 2.0 npm run dev 3.0 npm run serve
5. 文件結構不一樣：移除了配置文件唱捣，移除了static文件两蟀，新增了public文件夾

23.get請求和post請求有什么區(qū)別？

1. 傳參的時候震缭，get將參數(shù)拼接到url后面垫竞，而post將參數(shù)放到請求體中
2. get有大小限制（大約10KB），post沒有大小限制
3. post請求相對安全
4. get有緩存蛀序，post沒有緩存

24.為什么說get請求不安全欢瞪？

Get是不安全的，因為在傳輸過程徐裸，數(shù)據(jù)被放在請求的URL中遣鼓，而如今現(xiàn)有的很多服務器、代理服務器或者用戶代理都會將請求URL記錄到日志文件中重贺，然后放在某個地方骑祟，這樣就可能會有一些隱私的信息被第三方看到。另外气笙，用戶也可以在瀏覽器上直接看到提交的數(shù)據(jù)次企，一些系統(tǒng)內部消息將會一同顯示在用戶面前。

25.淺拷貝和深拷貝潜圃？

淺拷貝：如果拷貝的對象是基本數(shù)據(jù)類型缸棵，則拷貝的值就是基本數(shù)據(jù)類型的值，如果是復雜類型的值谭期，則拷貝的就是內存地址堵第，因此對于基本數(shù)據(jù)類型，修改一個隧出，不會影響其他的值踏志，對于復雜類型，改變一個胀瞪，對其他的也有改變

深拷貝：深拷貝會拷貝所有的屬性,并拷貝屬性指向的動態(tài)分配的內存镜廉。當對象和它所引用的對象一起拷貝時即發(fā)生深拷貝垦写⌒霍幔可以利用遞歸和淺拷貝來實現(xiàn)深拷貝沾谜，也可以利用jquery中的extend（）這個方法，第一個參數(shù)表示是否深拷貝

26.基本數(shù)據(jù)類型和復雜數(shù)據(jù)類型有什么區(qū)別？

基本數(shù)據(jù)類型把數(shù)據(jù)名和值直接存儲在棧當中

復雜類型在棧中存儲數(shù)據(jù)名和一個堆的地址，在堆中存儲屬性和值，訪問時先在棧中獲取地址颤练，在拿到堆中的值。

27.清除浮動的方法驱负？

1. 在最后一個浮動元素的后面添加一個空標簽嗦玖，加上clear：both這個屬性
2. 在父級元素上面加上overflow：hidden
3. 使用after偽元素來清除浮動
4. 使用before和after雙偽元素清除浮動

28.移動端適配問題？

彈性布局：利用display：flex布局來實現(xiàn)

自適應布局：頁面中的元素在不同的屏幕下元素的位置會變化而大小不會變化

流式布局：頁面元素的寬度按照屏幕進行適配調整

響應式布局：

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

通過媒體查詢跃脊，可以設置在不同的屏幕大小中設置不同的樣式宇挫，css3中引入了rem的單位，rem是相對于根標簽的字體大小

29.let,var,const的區(qū)別酪术？

1. var聲明的變量會掛載在window上器瘪，而let和const聲明的變量不會
2. var聲明變量存在變量提升，let和const不存在變量提升
3. let和const聲明形成塊作用域
4. 同一作用域下let和const不能聲明同名變量绘雁，而var可以
5. const聲明了必須賦值橡疼，聲明后不能修改

30.箭頭函數(shù)與普通函數(shù)的區(qū)別？

箭頭函數(shù)是匿名函數(shù)庐舟，不能作為構造函數(shù)欣除，不能使用new

箭頭函數(shù)不綁定arguments，取而代之用rest參數(shù)...解決

箭頭函數(shù)不綁定this挪略，會捕獲其所在的上下文的this值历帚，作為自己的this值

當只有一個參數(shù)時可以省略括號，當只有一條返回語句時杠娱，可以省略return和大括號

31.在地址欄里輸入一個URL,到這個頁面呈現(xiàn)出來,中間會發(fā)生什么挽牢？

輸入url后，首先需要找到這個url域名的服務器ip,為了尋找這個ip摊求，瀏覽器首先會尋找緩存禽拔，查看緩存中是否有記錄。

緩存的查找記錄為：瀏覽器緩存>系統(tǒng)緩存>路由器緩存睹簇，緩存中沒有則查找系統(tǒng)的hosts文件中是否有記錄奏赘，如果沒有則查詢DNS服務器寥闪。

得到服務器的ip地址后太惠，瀏覽器根據(jù)這個ip以及相應的端口號，構造一個http請求疲憋，這個請求報文會包括這次請求的信息凿渊，主要是請求方法，請求說明和請求附帶的數(shù)據(jù)，并將這個http請求封裝在一個tcp包中埃脏，這個tcp包會依次經過傳輸層搪锣，網絡層，數(shù)據(jù)鏈路層彩掐，物理層到達服務器构舟，服務器解析這個請求來作出響應。

返回相應的html給瀏覽器堵幽，因為html是一個樹形結構狗超，瀏覽器根據(jù)這個html來構建DOM樹，在dom樹的構建過程中如果遇到JS腳本和外部JS連接朴下，則會停止構建DOM樹來執(zhí)行和下載相應的代碼努咐，這會造成阻塞，這就是為什么推薦JS代碼應該放在html代碼的后面殴胧。

32.瀏覽器常見的兼容性問題渗稍？

塊屬性標簽float后，又有橫行的margin情況下团滥，在IE6顯示margin比設置的大

解決方法：在float的標簽樣式控制中加入 display:inline;將其轉化為行內屬性

b.當標簽的高度設置小于10px竿屹，在IE6、IE7中會超出自己設置的高度

解決方案：超出高度的標簽設置overflow:hidden,或者設置line-height的值小于你的設置高度

c.圖片默認有間距

解決方案：使用float 為img 布局

d.阻止事件冒泡灸姊，阻止事件默認行為

解決方案：冒泡 ev.stopPropagation() ev.cancelBubble = true

默認事件 e.preventDefault() ev.returnValue = false

33.判斷數(shù)據(jù)類型的方法羔沙？

typeof() Number，String厨钻，Boolean扼雏，F(xiàn)unction，undefined夯膀，如果想判斷這幾種類型诗充，那就可以使用typeof。其他數(shù)據(jù)類型不能使用這個方法

使用Object.prototype.toString.call()的方式來判斷一個變量的類型是最準確的方法

instanceof運算符需要指定一個構造函數(shù)诱建，或者說指定一個特定的類型蝴蜓，它用來判斷這個構造函數(shù)的原型是否在給定對象的原型鏈上。Number俺猿，String茎匠，Boolean沒有檢測出他們的類型，還需要注意null和undefined都返回了false押袍，這是因為它們的類型就是自己本身诵冒，并不是Object創(chuàng)建出來它們，所以返回了false谊惭。

34.什么是原型和原型鏈汽馋？

原型：每創(chuàng)建一個函數(shù)侮东，都會有一個prototype屬性，而這個屬性就是該函數(shù)的原型豹芯，而每當new一個對象的時候悄雅，該對象上面就會有一個proto這個屬性，這個屬性會指向該對象的原型上面

原型鏈：是一種查找機制铁蹈，訪問一個對象的屬性時宽闲，先在基本屬性中查找，如果沒有握牧，再沿著proto這條鏈向上找便锨，當查到 Object.prototype 就可以停止查找了

Object.prototype.proto 的值為 null 跟 Object.prototype 沒有原型，其實表達了一個意思

35.什么是BFC我碟？

BFC 全稱為 塊格式化上下文放案，它是一個獨立渲染區(qū)域，里面的元素不會影響外面的元素矫俺，

布局規(guī)則：

內部的Box會在垂直方向吱殉，一個接一個地放置。

Box垂直方向的距離由margin決定厘托。屬于同一個BFC的兩個相鄰Box的margin會發(fā)生重疊友雳。

每個盒子（塊盒與行盒）的margin box的左邊，與包含塊border box的左邊相接觸(對于從左往右的格式化铅匹，否則相反)押赊。即使存在浮動也是如此。

BFC的區(qū)域不會與float box重疊包斑。

BFC就是頁面上的一個隔離的獨立容器流礁，容器里面的子元素不會影響到外面的元素。反之也如此罗丰。

計算BFC的高度時神帅，浮動元素也參與計算。

如何創(chuàng)建BFC：

1萌抵、float的值不是none找御。

2、position的值不是static或者relative绍填。

3霎桅、display的值是inline-block、table-cell讨永、flex滔驶、table-caption或者inline-flex

4、overflow的值不是visible

作用：

1.可以解決外邊合并的問題

2.可以清楚浮動

3.自適應兩欄布局

36.如何使用git住闯？

先下載git瓜浸，然后安裝

三個區(qū)：

工作區(qū)(working diretory) 用于修改文件

緩存區(qū)(stage) 是用來暫時存放工作區(qū)中修改的內容

提交歷史（commit history） 提交代碼的歷史記錄

常用的命令：

1. 遠程倉庫相關命令

檢出倉庫：$ git clone git://github.com/jquery/jquery.git

查看遠程倉庫：$ git remote -v

添加遠程倉庫：$ git remote add [name] [url]

刪除遠程倉庫：$ git remote rm [name]

修改遠程倉庫：$ git remote set-url --push [name] [newUrl]

拉取遠程倉庫：$ git pull [remoteName] [localBranchName]

推送遠程倉庫：$ git push [remoteName] [localBranchName]

*如果想把本地的某個分支test提交到遠程倉庫澳淑，并作為遠程倉庫的master分支比原，或者作為另外一個名叫test的分支插佛，如下：

$git push origin test:master // 提交本地test分支作為遠程的master分支

$git push origin test:test // 提交本地test分支作為遠程的test分支

2）分支(branch)操作相關命令

查看本地分支：$ git branch

查看遠程分支：$ git branch -r

創(chuàng)建本地分支：$ git branch [name] ----注意新分支創(chuàng)建后不會自動切換為當前分支

切換分支：$ git checkout [name]

創(chuàng)建新分支并立即切換到新分支：$ git checkout -b [name]

刪除分支：$ git branch -d [name] ---- -d選項只能刪除已經參與了合并的分支，對于未有合并的分支是無法刪除的量窘。如果想強制刪除一個分支雇寇，可以使用-D選項

合并分支：$ git merge [name] ----將名稱為[name]的分支與當前分支合并

創(chuàng)建遠程分支(本地分支push到遠程)：$ git push origin [name]

刪除遠程分支： gitpush origin :[name]

*創(chuàng)建空的分支：(執(zhí)行命令之前記得先提交你當前分支的修改，否則會被強制刪干凈沒得后悔)

$git symbolic-ref HEAD refs/heads/[name]

$rm .git/index

$git clean -fdx

主要的幾個命令

git add # 將工作區(qū)的修改提交到暫存區(qū)

git commit # 將暫存區(qū)的修改提交到當前分支

git reset # 回退到某一個版本

git stash # 保存某次修改

git pull # 從遠程更新代碼

git push # 將本地代碼更新到遠程分支上

git reflog # 查看歷史命令

git status # 查看當前倉庫的狀態(tài)

git diff # 查看修改

git log # 查看提交歷史

git revert # 回退某個修改

37.Promise的實現(xiàn)原理蚌铜？

1. Promise本身是一個狀態(tài)機锨侯，每一個Promise實例只能有三個狀態(tài)，pending冬殃、fulfilled囚痴、reject，狀態(tài)之間可的轉化只能是pending->fulfilled审葬、pending->reject深滚，狀態(tài)變化不逆。
2. Promise有一個then方法涣觉，該方法可以被調用多次痴荐，并且返回一個Promise對象（返回新的Promise還是老的Promise對象，規(guī)范沒有提）官册。
3. 支持鏈式調用生兆。
4. 內部保存有一個value值，用來保存上次執(zhí)行的結果值膝宁，如果報錯鸦难，則保存的是異常信息。

38.為什么要使用vuex而不將數(shù)據(jù)存儲在本地存儲中员淫？

我們都知道在vuex中的數(shù)據(jù)明刷，頁面一刷新數(shù)據(jù)就會消失，所以我們要配合本地存儲來使用满粗。

localStorage可以代替vuex辈末，對于不變的數(shù)據(jù)確實可以，但是當兩個組件共同用以數(shù)據(jù)源映皆，如果其中一個組件中的數(shù)據(jù)源改變挤聘，希望另一個組件響應變化，這時候就要選擇用vuex捅彻。vuex是vue的狀態(tài)管理機制组去，是方便組件之間通信的。一個組件的數(shù)據(jù)變化是會映射到使用這個數(shù)據(jù)的其他組件步淹。而localStorage是本地存儲从隆，是將數(shù)據(jù)存儲到瀏覽器的方法诚撵，一般在跨頁面時使用。

39.什么是回流键闺，什么是重繪寿烟，有什么區(qū)別？

什么是回流

當render tree中的一部分(或全部)因為元素的規(guī)模尺寸辛燥，布局筛武，隱藏等改變而需要重新構建。這就稱為回流(reflow)挎塌。每個頁面至少需要一次回流徘六，就是在頁面第一次加載的時候，這時候是一定會發(fā)生回流的榴都，因為要構建render tree待锈。在回流的時候，瀏覽器會使渲染樹中受到影響的部分失效嘴高，并重新構造這部分渲染樹竿音，完成回流后，瀏覽器會重新繪制受影響的部分到屏幕中阳惹，該過程成為重繪谍失。

什么是重繪

當render tree中的一些元素需要更新屬性，而這些屬性只是影響元素的外觀莹汤，風格快鱼，而不會影響布局的，比如background-color纲岭。則就叫稱為重繪抹竹。

區(qū)別：

他們的區(qū)別很大：

回流必將引起重繪，而重繪不一定會引起回流止潮。比如：只有顏色改變的時候就只會發(fā)生重繪而不會引起回流

當頁面布局和幾何屬性改變時就需要回流

比如：添加或者刪除可見的DOM元素窃判，元素位置改變，元素尺寸改變——邊距喇闸、填充袄琳、邊框、寬度和高度燃乍，內容改變

40.vue單頁面應用怎么優(yōu)化唆樊？

• 提取公共方法，減少js代碼量 提取公共組件刻蟹，減少html代碼逗旁，較少每個頁面中重復的方法
• vue-router路由全部改成懶加載路由，該頁面被點開時才加載該頁面.vue組件舆瘪，提高首頁加載速度片效。
• 將所以v-show替換成v-if红伦，v-if如果不為真就不會加載這段代碼，而v-show還是會加載這些代碼淀衣，這樣加 快了頁面加載速度昙读。
• 對每個頁面vuex進行優(yōu)化，提到全局方法舌缤，減少大量重復代碼

41.ajax的請求的五個步驟箕戳？

1. 創(chuàng)建XMLHttpRequest異步對象

var xhr = new XMLHttpRequest()

2. 設置回調函數(shù)

xhr.onreadystatechange = callback

3. 使用open方法與服務器建立連接

// get 方式 xhr.open("get", "test.php", true) // post 方式發(fā)送數(shù)據(jù) 需要設置請求頭 xhr.open("post", "test.php", true) xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")

4. 向服務器發(fā)送數(shù)據(jù)

// get 不需要傳遞參數(shù) xhr.send(null) // post 需要傳遞參數(shù) xhr.send("name=jay&age=18")

5. 在回調函數(shù)中針對不同的響應狀態(tài)進行處理

function callback() { // 判斷異步對象的狀態(tài) if(xhr.readyState == 4) { // 判斷交互是否成功 if(xhr.status == 200) { // 獲取服務器響應的數(shù)據(jù) var res = xhr.responseText // 解析數(shù)據(jù) res = JSON.parse(res) } } }

(1)創(chuàng)建XMLHttpRequest對象,也就是創(chuàng)建一個異步調用對象. (2)創(chuàng)建一個新的HTTP請求,并指定該HTTP請求的方法某残、URL及驗證信息. (3)設置響應HTTP請求狀態(tài)變化的函數(shù). (4)發(fā)送HTTP請求. (5)獲取異步調用返回的數(shù)據(jù). (6)使用JavaScript和DOM實現(xiàn)局部刷新.

42.open中的參數(shù)有哪些国撵？

• method：請求的類型；GET 或 POST
• url：文件在服務器上的位置玻墅，相對位置或絕對位置
• async：true（異步）或 false（同步）

43.同步和異步介牙？

同步：可以理解為在執(zhí)行完一個函數(shù)或方法之后，一直等待系統(tǒng)返回值或消息澳厢，這時程序是出于阻塞的环础，只有接收到返回的值或消息 后才往下執(zhí)行其他的命令。

異步：執(zhí)行完函數(shù)或方法后剩拢，不必阻塞性地等待返回值或消息线得，只需要向系統(tǒng)委托一個異步過程，那么當系統(tǒng)接收到返回值或消息時徐伐，系統(tǒng)會自動觸發(fā)委托的異步過程贯钩，從而完成一個完整的流程。

44.什么是閉包办素，閉包的優(yōu)點和缺點角雷？

閉包：能訪問其他函數(shù)內部變量的函數(shù)。

優(yōu)點：避免全局變量的污染性穿，閉包所使用的變量不會被垃圾回收機制回收勺三，

缺點：會浪費內存，使用不當會造成內存泄露需曾。

45.jquery的好處吗坚？

輕量級，只有幾十k

強大的選擇器

出色的dom封裝

可靠的事件處理機制

完善的ajax

鏈式操作

豐富的插件支持

46.javascript的事件循環(huán)機制呆万？

JavaScript 引擎是單線程

JavaScript 引擎是單線程商源，也就是說每次只能執(zhí)行一項任務，其他任務都得按照順序排隊等待被執(zhí)行桑嘶，只有當前的任務執(zhí)行完成之后才會往下執(zhí)行下一個任務炊汹。

HTML5 中提出了 Web-Worker API，主要是為了解決頁面阻塞問題逃顶，但是并沒有改變 JavaScript 是單線程的本質讨便。了解 Web-Worker充甚。

JavaScript 事件循環(huán)機制

JavaScript 事件循環(huán)機制分為瀏覽器和 Node 事件循環(huán)機制，兩者的實現(xiàn)技術不一樣霸褒，瀏覽器 Event Loop 是 HTML 中定義的規(guī)范伴找，Node Event Loop 是由 libuv 庫實現(xiàn)。這里主要講的是瀏覽器部分废菱。

Javascript 有一個 main thread 主線程和 call-stack 調用棧(執(zhí)行棧)技矮，所有的任務都會被放到調用棧等待主線程執(zhí)行。

• JS 調用棧

JS 調用棧是一種后進先出的數(shù)據(jù)結構殊轴。當函數(shù)被調用時衰倦，會被添加到棧中的頂部，執(zhí)行完成之后就從棧頂部移出該函數(shù)旁理，直到棧內被清空樊零。

• 同步任務、異步任務

JavaScript 單線程中的任務分為同步任務和異步任務孽文。同步任務會在調用棧中按照順序排隊等待主線程執(zhí)行驻襟，異步任務則會在異步有了結果后將注冊的回調函數(shù)添加到任務隊列(消息隊列)中等待主線程空閑的時候，也就是棧內被清空的時候芋哭，被讀取到棧中等待主線程執(zhí)行沉衣。任務隊列是先進先出的數(shù)據(jù)結構。

• Event Loop

調用棧中的同步任務都執(zhí)行完畢减牺，棧內被清空了豌习，就代表主線程空閑了，這個時候就會去任務隊列中按照順序讀取一個任務放入到棧中執(zhí)行烹植。每次棧內被清空斑鸦，都會去讀取任務隊列有沒有任務，有就讀取執(zhí)行草雕，一直循環(huán)讀取-執(zhí)行的操作巷屿，就形成了事件循環(huán)。

• 定時器

定時器會開啟一條定時器觸發(fā)線程來觸發(fā)計時墩虹，定時器會在等待了指定的時間后將事件放入到任務隊列中等待讀取到主線程執(zhí)行嘱巾。

定時器指定的延時毫秒數(shù)其實并不準確，因為定時器只是在到了指定的時間時將事件放入到任務隊列中诫钓，必須要等到同步的任務和現(xiàn)有的任務隊列中的事件全部執(zhí)行完成之后旬昭，才會去讀取定時器的事件到主線程執(zhí)行，中間可能會存在耗時比較久的任務菌湃，那么就不可能保證在指定的時間執(zhí)行问拘。

• 宏任務(macro-task)、微任務(micro-task)

除了廣義的同步任務和異步任務，JavaScript 單線程中的任務可以細分為宏任務和微任務骤坐。

macro-task包括：script(整體代碼), setTimeout, setInterval, setImmediate, I/O, UI rendering绪杏。

micro-task包括：process.nextTick, Promises, Object.observe, MutationObserver。

第一次事件循環(huán)中纽绍，JavaScript 引擎會把整個 script 代碼當成一個宏任務執(zhí)行蕾久，執(zhí)行完成之后，再檢測本次循環(huán)中是否尋在微任務拌夏，存在的話就依次從微任務的任務隊列中讀取執(zhí)行完所有的微任務僧著，再讀取宏任務的任務隊列中的任務執(zhí)行，再執(zhí)行所有的微任務障簿，如此循環(huán)盹愚。JS 的執(zhí)行順序就是每次事件循環(huán)中的宏任務-微任務。

47.new關鍵字具體做了那些事卷谈？

創(chuàng)建了一個空對象

讓這個對象的proto指向函數(shù)的原型prototype

將對象作為函數(shù)的this傳進去杯拐，并默認return

48.bind,apply,call三者的異同?

相同點: 1:都是用來改變函數(shù)的this對象的指向的

2:第一個參數(shù)都是this要指向的對象

3:都可以利用后續(xù)參數(shù)傳參

不同點:

1:call()的第一個參數(shù)是this要指向的對象霞篡，后面?zhèn)魅氲氖菂?shù)列表世蔗，參數(shù)可以是任意類型，當?shù)谝粋€參數(shù)為null朗兵、undefined的時候污淋，默認指向window；

2:apply()：第一個參數(shù)是this要指向的對象余掖，第二個參數(shù)是數(shù)組

3:call()改過this的指向后寸爆，會再執(zhí)行函數(shù)，bind()改過this后盐欺，不執(zhí)行函數(shù)赁豆，會返回一個綁定新this的函數(shù)

bind與apply、call最大的區(qū)別就是：bind不會立即調用冗美，其他兩個會立即調用魔种，apply與call的區(qū)別是apply第二個是參數(shù)組，但是 在確定的參數(shù)下粉洼，還是最好用call节预，call的效果會更高，但是在函數(shù)的延展性上使用apply更好

49.localStorage和sessionStorage區(qū)別属韧？

1. localStorage和sessionStorage一樣都是用來存儲客戶端臨時信息的對象安拟。
2. 他們均只能存儲字符串類型的對象（雖然規(guī)范中可以存儲其他原生類型的對象，但是目前為止沒有瀏覽器對其進行實現(xiàn)）宵喂。
3. localStorage生命周期是永久糠赦，這意味著除非用戶顯示在瀏覽器提供的UI上清除localStorage信息，否則這些信息將永遠存在。
4. sessionStorage生命周期為當前窗口或標簽頁拙泽，一旦窗口或標簽頁被永久關閉了唆铐，那么所有通過sessionStorage存儲的數(shù)據(jù)也就被清空了。

50.vue.js中created()與activated()的個人使用理解奔滑？

created()：在創(chuàng)建vue對象時艾岂，當html渲染之前就觸發(fā)；但是注意朋其，全局vue.js不強制刷新或者重啟時只創(chuàng)建一次王浴，也就是說，created()只會觸發(fā)一次梅猿；

activated()：在vue對象存活的情況下氓辣，進入當前存在activated()函數(shù)的頁面時，一進入頁面就觸發(fā)袱蚓；可用于初始化頁面數(shù)據(jù)等