一帖蔓、HTML
1、什么是盒模型瞳脓，盒模型包括哪些塑娇？
盒模型就是把html里面的元素看做是矩形的框，類似于一個盒子的模型劫侧。
標準盒模型：width+padding+border+margin
怪異盒模型：width+margin
怪異盒模型就是把padding和border包括在width里面埋酬，平時經常使用的box-sizing:boder-box;就是把標準盒模型變成怪異盒模型。
2烧栋、怪異盒模型和普通盒模型有哪些區(qū)別写妥？
標準盒模型: content-box
怪異盒模型: border-box
二、CSS
1审姓、css的定位有哪幾種珍特，分別什么作用
static:靜態(tài)定位 relative相對元素本身的定位 absolute相對父元素的絕對定位，脫離文本流 fixed相對可視窗的固定定位魔吐。
2扎筒、垂直居中水平居中等有哪些解決方案（側面考驗對塊級元素莱找、行內元素、行內塊級元素的了解）
3砸琅、動畫和過度的熟練度
動畫：animation @keyframes
過度：transition
三宋距、JS（包括ES6）****（****函數遞歸****）
1、什么是基本數據類型和****引用****數據類型症脂？
基本數據類型：保存在棧中的大小確定的值
引用數據類型：就是堆中的一個對象谚赎，他的變量是保存在棧中的一個引用地址，通過引用地址可以快速找到堆中的對象诱篷。
2壶唤、賦值、淺拷貝棕所、深拷貝的區(qū)別闸盔，并且分別有哪些方法？
> **賦值：**基本類型數據直接在棧中簡單賦值琳省，兩個獨立不影響迎吵。引用類型直接拷貝內存地址。
> **淺拷貝: **遍歷引用類型中的每一個屬性针贬，并且將其基本類型的值的指針進行拷貝击费，如果遇到復雜類型的值，直接拷貝內存地址桦他。
** 深拷貝：**完全獨立的拷貝出新的一塊內存地址蔫巩，兩個變量互不干涉，互不影響快压。
深拷貝的方法：（循環(huán)遍歷圆仔，遞歸遍歷）
3、原型的理解
> **原型（原型對象）：**就是一個對象蔫劣，prototype就是一個原型對象坪郭，在每一個函數里面都存在的一個對象。
>** 對象原型：**每個對象都有一個原型_ _proto_ _,是這個對象的原型拦宣，他指向的是他的構造函數的原型對象prototype
** 構造函數（coustructor）:**原型對象（prototype）對象原型(_ proto _)里面都有這個屬性截粗，他指向的是構造函數的本身。
** 原型作用：**共享方法鸵隧。構造函數中所有的方法都可以定義在原型對象中绸罗，所有的實例都可以共享這個方法，實例化對象的時候就不需要單獨的開辟一塊內存空間了豆瘫，提高性能珊蟀，也節(jié)省了內存。
** 原型鏈：**當訪問一個對象屬性的時候，會先從這個對象本身屬性上去查找育灸，沒找到腻窒，則會去他的proto的原型上去查找，如果沒找到再在構造函數的Prototype的原型原型上去查找磅崭，知道查找到null為止儿子。這樣一層層上去就形成了一個鏈式結構。
> prototype是構造函數才有的屬性砸喻，_ _proto_ _每個對象都有的屬性
4柔逼、閉包
> **能獲取函數內部變量的函****數****（聲明在函數內部的函數）**
閉包優(yōu)點：1、防止外界變量污染 2割岛、讀取函數內部變量 3愉适、使變量一直保存在內存中。
閉包優(yōu)點：1癣漆、會造成內存溢出（內存泄漏）
let add = null
function a() {
let num =1;
add = () => { num+=1 }
//下面這個就是閉包
return () => {
console.log( num )
}
}
//執(zhí)行以下代碼輸出：
const res= a()
res() //1
add() //變量+1了维咸，并且一直保存在內存中
res() //2
5、本地存儲
localStorage: 一直存儲在本地惠爽，一直存在
sessionStorage:頁面關閉癌蓖，存儲消失
6、變量提升****（****js預加載技術****）
7婚肆、變量作用域****（****全局作用域费坊、局部作用域、塊級作用域****）
8旬痹、call、apply讨越、bind的作用和用法两残，利用call(),apply()實現繼承
call、apply把跨、bind作用是改變對象的執(zhí)行上下文（改變this的指向）人弓。
call,apply是立即執(zhí)行的，bind是返回一個函數着逐，在需要使用的時候再調用崔赌。
const student = {name:'lili',age:12}
function s(a,b) {
console.log(a+b)
}
//call直接執(zhí)行，參數用耸别，分隔健芭。并輸出結果3
s.call(student,1,2)
//apply直接執(zhí)行，參數以數組的形式傳遞秀姐。并輸出結果3
s.apply(student,[1,2])
//bind不執(zhí)行慈迈，作用只是改變this的指向
s.bind(student)
9、繼承
（1）原型繼承省有，實例共用原型鏈痒留，屬性為引用類型谴麦，則會互相影響。
Child.prototype= new Parsent()
（2）構造函數繼承伸头，無法繼承原型上的屬性和方法匾效。
Parsent.call(this)
（3）組合式繼承 結合
Parsent.call(this)
Child.prototype= new Parsent()
Child.prototype.constructor = Child
10、this的指向問題
當在全局作用于中恤磷，this指向window
普通函數作用域下：非嚴格模式面哼，指向window ，嚴格模式undefined
在構造函數中碗殷，this指向此構造實例對象精绎，
在對象方法中，this指向該對象
> 箭頭函數更改了this的指向锌妻，指向詞法作用域的外層代乃。
11、異步請求：promise\async await \callback
12仿粹、數組用typeof判斷出來的類型是什么搁吓，哪些方法可以判斷是數組?
undefined, boolean,string,number,object,function
Array.isArray(arr) / arr instanceof Array
13、setTimeOut / Promise.resolve().then的執(zhí)行順序吭历，宏任務和微任務知識點
/**
* 宏任務：setTimeOut, setInterval, setImmediate, I/O
* 微任務：Promise.resolve(), process.nextTick,promise.resolve().then()
* */
14堕仔、Boolean類型的強制轉換，
例：let a = [], b = {}, c = 0 ;
寫出輸出值： console.log(a && b) ; console.log(a && c); console.log(a && b && c) ; console.log(!a && c) ; console.log(a && !c)
15晌区、判斷是否為一個數組類型的方法（兩種法法）
例： let arr = [1,2,3,4]
利用原型判斷摩骨，判斷這個變量的原型鏈是否是數組對象： arr instanceof Array //true
Object.prototype.toString.call(arr) 準確判斷任何類型
3)利用es6新增的內置對象的方法：Array.isArray(arr) //true
16、什么是事件流朗若？事件流分哪幾個階段恼五？
> 事件流指的是：事件傳播的過程.(冒泡、捕獲)
（1）事件捕獲階段（2） 處于目標階段 （3）事件冒泡階段
**17哭懈、熟悉使用Element.addElementListener('事件'灾馒，‘函數’，true/false) **
最后的ture/false遣总，什么意思睬罗？有什么作用?
true 事件按照事件捕獲的方式執(zhí)行， false 事件按照事件冒泡的方式執(zhí)行
18旭斥、'use strict'嚴格模式容达，必須寫在第一行嗎？回答使用'use strict'的優(yōu)缺點垂券？
是的董饰、但是如果上面是注釋的代碼，也算是寫在最上面，如果沒寫在最上面卒暂，
那么'use strict'會失效啄栓。
19、async/await作用
1也祠、await作為求值關鍵字（后面可以跟promise或表達式）昙楚，可以直接獲取promise的值和表達式的值
2、將異步代碼操作變?yōu)橥酱a的寫法诈嘿。
20堪旧、window.onLoad 和$(document).ready()的區(qū)別
window.onLoad是數據資源全部加載完畢才執(zhí)行，ready是dom渲染完畢就執(zhí)行奖亚。
21淳梦、作用域和上下文：
作用域：可訪問的變量的范圍、區(qū)域昔字。
上下文：同一個作用域中的變量
22爆袍、jsonp的跨域原理：
瀏覽器是有同源策略限制的，但是src屬性不被同源策略限制作郭，所以利用動態(tài)插入script標簽并且設置src屬性陨囊，就解決了跨域問題。
23夹攒、instanceof原理
instanceof 是判斷右邊的變量原型prototype是不是在左邊的變量的原型鏈上蜘醋。
結果為true ：
Object instanceof Object / Function instanceof Object / Object instance Function
24、垃圾回收機制咏尝，和避免內存泄漏：
當執(zhí)行遇到函數的時候压语，會創(chuàng)建一個函數執(zhí)行上下文，并添加到調用堆棧的棧頂编检，函數的作用域中包含了函數中聲明的所有的變量无蜂，當函數執(zhí)行完畢，對應的執(zhí)行上下文從棧頂彈出蒙谓，函數的作用域隨之銷毀，函數中包含的所有聲明的變量統一釋放并自動回收训桶。
垃圾回收：就是不定期尋找不再使用的變量累驮，釋放并回收內存。
垃圾：就是不再使用的變量或者未被引用的對象舵揭。
怎么實現垃圾回收：利用標記-清除法谤专，進行垃圾回收。
1午绳、少創(chuàng)建全局變量
2置侍、手動清除定時器
3、少用閉包
4、清除dom的引用
25蜡坊、函數柯里化
定義：只傳遞給函數一部分參數來調用它杠输，讓它返回一個函數去處理剩下的參數
fun（1,2,4）===》 fun(1)(2)(4)
作用：延遲執(zhí)行、參數復用秕衙、提前確認（利用自執(zhí)行函數蠢甲，提前確認走那個方向。然后返回一個函數）据忘。
26鹦牛、new操作符的作用，并寫一個js方法實現new運算符
[圖片上傳失敗...(image-dc15e4-1631860993689)]
function ObjectNew() {
//創(chuàng)建一個實例對象對象
let obj = {}
//取得方法的第一個參數為構造函數
const Constructor = [].shift.apply(arguments)
//將該對象的原型指向構造函數的原型對象
obj.__proto__ = Constructor.prototype
//更改構造函數的this指向實例對象,并取得返回值
const res = Constructor.apply(obj, arguments)
//如果有返回對象勇吊，就返回對象曼追，沒有就返回實例對象
return typeof res === 'object' ? res : obj
}
27、js事件循環(huán)機制（Event Loop）
（單線程非阻塞汉规，主線程礼殊、執(zhí)行棧、事件隊列）
js是單線程非阻塞的鲫忍，js只有一個主線程來處理所有的任務膏燕，因為js是單線程的，js同一時間只能執(zhí)行一個方法悟民，這些方法依次排列在執(zhí)行棧中被依次執(zhí)行坝辫，當方法被執(zhí)行完畢的時候。js會退出執(zhí)行環(huán)境并且銷毀執(zhí)行環(huán)境射亏。當遇到異步事件時近忙，會將這個異步事件掛起，繼續(xù)執(zhí)行執(zhí)行棧中的其他任務及舍，異步事件返回結果后，會將事件添加到事件隊列中窟绷，等待執(zhí)行棧中的所有任務執(zhí)行完畢之后锯玛，主線程會去查找事件隊列中是否有任務，如果有兼蜈，主線程會將事件隊列中的回調放入執(zhí)行棧中并依次執(zhí)行攘残。這樣事件就形成了一個循環(huán)，叫做事件循環(huán)为狸。
28歼郭、前端跨頁面通信有哪些方法
同源下的頁面之間：
1、利用事件監(jiān)聽document.addElementListener(‘click’,fun,false)
2辐棒、window.postMessage()
3病曾、h5的本地存儲localStorage
非同源下的頁面之間
1牍蜂、JSONP
2、iframe
29泰涂、重排和重繪（盡量減少重排重繪）
重排（回流）：重新生成布局鲫竞，重新排列元素
重繪：某些元素的外觀被改變，比如color變化负敏。
重繪不一定導致重排贡茅，重排一定導致重繪。
30其做、前端性能優(yōu)化
（1）外部引入css,script,并且將script放在body的最后顶考。
（2）減少重排重繪
（3）減少去除多余代碼，減小代碼量
31妖泄、瀏覽器渲染頁面的流程：
（1）輸入網址驹沿，DNS查詢，將域名解析為ip
（2）瀏覽器和服務器建立tcp或者udp連接
（3）瀏覽器給服務器發(fā)送http請求
（4）服務器處理響應請求
（5）服務器返回一個html響應
（6）客戶端渲染html
32蹈胡、模塊化
什么是模塊化：
（1）將復雜的程序依據一定的規(guī)范封裝成幾個模塊渊季，并組合在一起。
（2）塊的內部數據與實現是私有的罚渐，只是簡單向外部暴露一些接口與外部其他模塊通信却汉。
模塊化方式：
（1）函數模塊
（2）對象模塊
（3）IIFE(閉包)
模塊化的優(yōu)點：
（1）避免變量命名沖突
（2）更好的分離荷并，按需引入加載
（3）更高的復用性
（4）更高的維護性
33合砂、promise原理
prmise有三種狀態(tài)：等待pending、成功fulfilled源织、拒絕rejected翩伪。promise一旦改變狀態(tài)就是不可逆的，當變成fulfilled狀態(tài)谈息，會立即執(zhí)行回調函數缘屹，回調函數返回的結果被當做參數闖入函數被使用。
四侠仇、VUE
1轻姿、vue全家桶，分別什么作用逻炊？
> vue-cli腳手架：快速搭建vue開發(fā)環(huán)境互亮，繼承資源加載，打包嗅骄、熱更新等一體的vue開發(fā)工具。
> vue -router： vue的路由插件饼疙，有兩種模式hash模式和history模式溺森。
> vuex：狀態(tài)管理模式慕爬，集中式存儲管理所有組件的狀態(tài)，并以相應的規(guī)則保證可預測的發(fā)生變化屏积。
> axios: 基于promise的http庫医窿，實現數據的交互。
>vue的第三方框架炊林，例如element-ui , mint-ui
2姥卢、vuex模塊
vuex是針對vue.js創(chuàng)建的狀態(tài)管理倉庫。分為state,getter,mutation,action,module五個模塊部分渣聚，
> state：存儲view視圖的公共數據
> getters: 計算變量独榴，跟vue中的computed數據相似，具有緩存功能奕枝，只有依賴的數據源發(fā)生變化棺榔，才被重新計算。
> mutations: 提交state數據源狀態(tài)的唯一方法隘道，只操作同步操作症歇。
> actions: 異步方法請求的地方，通過dispatch觸發(fā)谭梗。能通過commit觸發(fā)mutations方法忘晤。
> modules: store分割的子模塊
3、什么是MVVM模式激捏，怎么實現數據雙向綁定设塔，數據雙向綁定的原理？
model數據交互層邏輯缩幸， view視圖層展示頁面壹置， viewModel中間傳送帶，是model和view交互的中間鍵表谊。
采用數據劫持結合發(fā)布訂閱者模式來改變view層數據王暗。通過Object.defineProperty()中的get,set劫持數據的變化字柠，發(fā)布消息給訂閱者watcher，觸發(fā)響應的監(jiān)聽回調更新視圖。
通過監(jiān)聽input型宙、change事件賦值改變model層數據
> model變化view視圖更新：在vue創(chuàng)建實例的時候，會遍歷data中的屬性芜果，并通過Object.defineProperty（）方法蔽氨，設置屬性的setter/getter,聽屬性值的變化，當監(jiān)聽到屬性值的變化跨算，觸發(fā)dep.notify()通知訂通過observe監(jiān)閱者爆土，執(zhí)行watcher.update()方法，執(zhí)行compile中的回調诸蚕，改變DOM中的值步势。
> view視圖更新model數據變化：通過文本輸入框的change/input事件氧猬，獲取dom中value值，改變model層數據坏瘩。
vue2.x:利用object.defineproperty()劫持數據盅抚，但是object.defineproperty()不能監(jiān)聽數組的變化，數組中的push倔矾，shift等方法無法觸發(fā)set妄均，vue是通過重寫數組這些方法實現數據的劫持。并且要手動遞歸遍歷深層次的對象屬性
vue3.0:利用proxy劫持數據哪自，proxy針對的是整個對象丰包，所以對象里面的屬性變化，都可以劫持到提陶。能監(jiān)聽到數組的變化烫沙，不需要重寫數組的方法。嵌套對象需要遞歸調用proxy隙笆。
4锌蓄、vue中數組和對象是怎么渲染的？
> vue實例初始化之前就在data對象里面定義好的的屬性撑柔，類型可以是Object瘸爽、Array、String铅忿、Number等各種類型的數據剪决，這樣能監(jiān)聽到data里面屬性的變化，而重新渲染頁面數據檀训，沒在data中定義的屬性柑潦，無法堅監(jiān)聽到數據的變化，可以使用this.$set()方法為屬性添加監(jiān)聽事件峻凫。
其中Array類型直接改變數組長度 或 利用下標改變數組無法監(jiān)聽到變化渗鬼，所以頁面無法重新渲染。
Object類型：利用delete刪除對象某一屬性 或 為對象添加某一屬性荧琼，則無法監(jiān)聽到數據變化譬胎。
5、vue-router的兩種模式
> hash模式：vue默認使用hash模式命锄，并且如果瀏覽器不支持history模式的情況堰乔，會重新定向為使用hash模式。從#之后的一串數據都屬于hash值脐恩。改變hash值會觸發(fā)hashChange事件镐侯，然后通過hash值去查找相應的路由，改變視圖驶冒。使用以下兩種方法改變頁面內容和瀏覽器瀏覽記錄：
hashHistory.push() / hashHistory.replace()
history模式：是HTML5中的新增的兩個API history.pushState() / history.replaceSate(),能夠改變url地址且不會發(fā)送請求苟翻，可以改變?yōu)g覽器歷史記錄棧搭伤。需要后端配合使用。
history 致命的缺點就是當改變頁面地址后袜瞬，強制刷新瀏覽器時，（如果后端沒有做準備的話）會報錯身堡，因為刷新是拿當前地址去請求服務器的邓尤，如果服務器中沒有相應的響應，會出現 404 頁面贴谎。
6汞扎、vue2.0和vue3.0的不同，vue3.0有哪些優(yōu)化擅这？
vue2.x:頁面載入時澈魄，不管是不是可區(qū)域渲染的數據，都會創(chuàng)建監(jiān)聽觀察者仲翎，所以在頁面載入時的性能較低痹扇，較慢。
vue3.0：頁面是需要用到什么引入什么溯香，不會有冗余的和多余的數據鲫构，只有在可見區(qū)域中才會為數據創(chuàng)建觀察者，初始載入時性能好玫坛。
| vue2.x | vuee3.0 |
| 采用Object.defineProperty()進行數據劫持|采用proxy進行數據劫持|
|頁面載入時结笨，為data里面的所有數據創(chuàng)建觀察者，性能低|頁面載入時湿镀，只有可見區(qū)域的變量創(chuàng)建觀察者|
|利用vue.set()為對象添加屬性時炕吸，這個對象的所有watcher會重新運行|
利用vue.set()為對象添加屬性時，只有依賴那個屬性的watcher才會重新運行
|
|this指向當前組件|取消了this關鍵之勉痴，直接使用setup攜帶的參數|
7赫模、vue的生命周期鉤子
> beforeCreate 實例初始化之后，數據觀測（data observer)和event/watcher 事件配置可以調用
> created 實例創(chuàng)建完成后被立即調用蚀腿，但是實例還沒掛載嘴瓤，不可獲取dom
> beforeMount 實例掛載之前調用 ，相關的render函數首次被調用莉钙。 (服務器渲染期間不被調用)
> mounted 實例掛載后調用廓脆，但是不能保證能獲取子組件的dom。使用$nextTick()則能獲取整個視圖dom
> beforeUpdate 數據更新時調用磁玉，dom更新之前
> updated 發(fā)生在dom更新之后調用。
> activated 被keep-alive緩存組件激活時調用
> deactivated 被keep-alive緩存組件停用時調用
> beforeDestroy 實例銷毀之前調用蚊伞，仍然可以獲取到實例dom
> destroyed 實例銷毀之后調用
> errorCaptured 捕獲一個來自子孫組件的錯誤時被調用
8席赂、父子組件的生命周期的順序
> 父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted ->父mounted
->父beforeUpdate -> 子beforeUpdate ->子updated -> 父updated
-> 父beforeDestroy -> 子beforeDestroy -> 子destroyed -> 父destroyed
9吮铭、解釋vue的單頁面應用
單頁面應用指，在vue初始化頁面的時候只請求一次資源颅停，之后的頁面交互谓晌，數據交互都是通過router和ajax來完成，頁面并沒有刷新癞揉。
10纸肉、數據的響應式
> 數據分為普通數據類型和引用數據類型(數組、對象)喊熟，在實例data定義過的property 柏肪，都會將其轉化為 getter/setter,讓其響應數據變化。
(1)普通數據類型
改變數據芥牌，直接響應變化
(2)數組
響應式的：push(),split(),slice()等方法烦味、this.$set()方法
非響應式：利用數組下標（arr[0].name）、修改數組長度（ arr.length=2）
（3）對象
響應式的：直接賦值（this.obj = {}）壁拉、this.$set()方法谬俄、直接屬性賦值存在的屬（this.obj.name = '11'）
非響應式：對象不存在的屬性名賦值（obj.name ='a'）、刪除某一屬性（delete obj.name）
11弃理、vue-router有哪幾種導航鉤子
（1）全局導航鉤子
router.beforeEach(to,form,next)//路由跳轉前判斷
router.afterEach((to,from)=>{ });// 跳轉后判斷
（2）組件內的鉤子
beforeRouteEnter(to, from, next) {
// 在渲染該組件的對應路由被 confirm 前調用
},
beforeRouteUpdate(to, from, next) {
// 在當前路由改變凤瘦，但是依然渲染該組件是調用
},
beforeRouteLeave(to, from ,next) {
// 導航離開該組件的對應路由時被調用
}
（3）單獨路由獨享組件：是在路由配置上直接定義
const router = newVueRouter({
routes:[{
path:'/file',
component:File,
beforeEnter:(to,from,next)=>{/*路由鉤子*/}
}]
});
12、描述下虛擬DOM
虛擬dom就是一個js對象案铺，用來描述希望在屏幕上看到的內容蔬芥，能都實現高效更新真實dom。
13控汉、描述數據變化笔诵，dom怎么更新
在第一次渲染頁面時就創(chuàng)建一份虛擬dom，當數據變化姑子，利用diff算法對比兩個虛擬dom的不同乎婿，更新不同處。
14街佑、router和route的區(qū)別
route：是當前路由的信息谢翎，能獲取路由和參數
router：是全局路由（VueRouter）實例對象，可以進行路由跳轉
15沐旨、vue.use()原理
vue.use()是注冊使用全局組件森逮，首先回去判斷組件有無被注冊過，不會重復注冊組件磁携。并且可接受的參數類型為對象或者函數褒侧。如果是對象，則包含install方法，去調用install方法闷供，install方法的第一個參數為Vue.如果是函數烟央，則直接執(zhí)行函數，函數接收的第一個參數也是Vue歪脏。
16疑俭、vue-loader是什么，什么作用婿失？
處理特定語言塊怠硼。
vue-loader是一個webpack的loader能夠處理.vue結尾的單文件頁面。
17移怯、非父子組件之間的數據傳遞：
1、使用vuex數據管理倉庫
2这难、new一個新的vue實例舟误，作為中央事件總線，然后使用on進行數據的傳遞和接收姻乓。
18嵌溢、v-for為什么要添加key
vue 在更新渲染dom的時候是根據新舊dom進行對比，用key標識每一個節(jié)點蹋岩，使diff算法比較虛擬dom的時候更準確赖草。
19、computed原理：
內部通過dirty屬性判斷是否從新計算賦值剪个，初始化時dirty設置成true,會讀取data中的依賴變量值進行賦值操作秧骑。賦值完畢將dirty設置成false,只有當依賴的data變量發(fā)生變化時，才會將dirty賦值為true,重新計算值扣囊。
20乎折、vue.nextTick()原理
因為DOM更新是異步執(zhí)行的，DOM更新會加入到任務隊列中.先執(zhí)行完同步代碼侵歇，再進行DOM的異步更新骂澄，所以需要nextTick()的回調是在dom更新之后的任務隊列中執(zhí)行。nextTick的原理是使用promise惕虑、mutationObserver坟冲、setImmediate、setTimeout順序來使用溃蔫。
21健提、數組哪些方法能被監(jiān)聽到，怎么實現改變dom的伟叛？
vue 內部對數組的push矩桂、unshift、pop、shift侄榴、reverse雹锣、sort、splice等七個方法進行攔截癞蚕，如果數組變化蕊爵，就通知訂閱者更新視圖。
22桦山、keep-alive原理和使用
獲取keep-alive包裹的組件和組件名攒射，判斷組件名是否包含在include中，通過key值查找該組件是否被緩存過恒水，被緩存過会放，直接獲取cache中緩存的vnode，并且更新key值順序钉凌。沒被緩存過咧最，則直接返回組件實例，并添加緩存的key值御雕。之后檢查被緩存的組件實例是否超出max,超出了矢沿，直接刪除最原始的緩存數據。
23酸纲、為什么組件里面的data必須是函數捣鲸？
因為每一個vue組件就是一個vue實例，通過new Vue()來實例化闽坡，如果data定義為一個對象,就相當于原型中定義一個對象栽惶，實例化對象的時候，那么此對象指向同一地址疾嗅。那么組件復用的時候data都是指向同一個內存地址媒役，改變其一，牽動其二宪迟，組件相互影響酣衷。如果使用函數，復用組件的時候次泽，每個組件都有各自的data作用域穿仪，互相獨立。
24意荤、** vm.$set(target,key,val)方法的原理 **
使用這個方法可以給響應式數據添加和更改響應式數據啊片。
首先會判斷目標對象時數組還是對象，如果是數組使用splice()方法玖像，替換更改數組紫谷。如果是對象，并且添加的屬性已存在，則直接賦值笤昨，如果對象不存在此屬性祖驱，先判斷此對象是否是響應式變量，如果不是瞒窒，直接添加鍵值對捺僻，如果是響應式，通過defineReactive()方法進行響應式處理崇裁。
五匕坯、網絡請求
1、http和https的區(qū)別
http:安全性低
https:通過加密協議處理過拔稳，更安全
2葛峻、get和post請求
get：數據通過url傳遞，直接可見巴比，數據長度受限术奖。
post:數據通過params傳遞，安全性能更高匿辩，能接受的數據容量也更大。
3榛丢、http的狀態(tài)碼有哪些铲球，分別代表什么意思
200成功，401需要驗證身份晰赞，403服務器拒絕請求稼病，404找不到資源，500服務器出錯掖鱼，503服務器不可用然走。
六、vue3
** 1戏挡、vue3有哪些新特性 **
（1）framents(支持多個根節(jié)點)
(2)teleport（通過<teleport>標簽包裹的元素可插入到任意的元素中芍瑞，to中可以是id，也可以是class）
（3）composition Api （組合式api）更容易維護代碼褐墅。
** 2拆檬、vue3有哪些方面的提升**
（1）diff算法方面的提升，增加了靜態(tài)標記
一些非靜態(tài)的節(jié)點會增加一個flag標記妥凳，在發(fā)生變化的時候竟贯，有flag標記的地方才會進行diff算法進行比較。
（2）靜態(tài)提升
對不參與更新的DOM元素逝钥，做今天提升屑那，元素節(jié)點只會被創(chuàng)建一次，在渲染時直接復用，節(jié)省了在運行時的內存占用持际。也不會進行diff算法沃琅。
（3）體積減小了，采用組合式api选酗，按需引入阵难。
（4）使用proxy進行響應式數據xie
