1.防抖和節(jié)流
防抖：在事件被觸發(fā)n秒后在執(zhí)行回調(diào)，如果在這n秒內(nèi)事件在此被調(diào)用則重新計時。（總的來說，適合多次事件一次響應(yīng)的情況）
實際舉例：在請求后臺數(shù)據(jù)時，由于網(wǎng)路慢的情況下，用戶多次點(diǎn)擊請求按鈕。
節(jié)流：規(guī)定一個時間，在這個時間內(nèi)，只能有一次觸發(fā)事件的回調(diào)函數(shù)執(zhí)行，如果在同一個時間內(nèi)某事件被多次觸發(fā)，只有一次能生效。（總的來說，適合大量事件按時間做平均分配觸發(fā)。）
實際舉例：當(dāng)實現(xiàn)dom拖拽功能時給拖拽元素綁定拖拽事件，每當(dāng)元素稍微移動一點(diǎn)就會觸發(fā)大量回調(diào)函數(shù)，導(dǎo)致瀏覽器卡死。
https://juejin.cn/post/6844903535125987335
2.js事件循環(huán)機(jī)制
- js是單線程執(zhí)行
- 宏任務(wù)：script( 整體代碼)、setTimeout、setInterval、I/O、UI 交互事件、setImmediate(Node.js 環(huán)境)
- 微任務(wù)：Promise、MutaionObserver、process.nextTick(Node.js 環(huán)境)
js分為同步執(zhí)行和異步執(zhí)行兩個隊列，當(dāng)同步執(zhí)行完畢，會執(zhí)行異步隊列。異步隊列中分為宏任務(wù)、微任務(wù)。優(yōu)先執(zhí)行微任務(wù)等微任務(wù)全部執(zhí)行完畢后再執(zhí)行宏任務(wù)。
console.log('1');
setTimeout(function() {
console.log('2');
}, 0);
Promise.resolve().then(function() {
console.log('3');
}).then(function() {
console.log('4');
});
console.log('5');
執(zhí)行結(jié)果 1、5、3、4、2
image.png
image.png
3.堆和棧
堆：隊列優(yōu)先，先出先進(jìn)；動態(tài)分配空間一般有程序員分配釋放，若程序員不釋放，程序結(jié)束時又瀏覽器的垃圾回收機(jī)制進(jìn)行回收。（動態(tài)分配的內(nèi)存，大小不定不會自動釋放；）
棧：先進(jìn)后出；由操作系統(tǒng)自動分配釋放，存放函數(shù)的參數(shù)，局部變量的值等。（自動分配的內(nèi)存空間，它由系統(tǒng)自動釋放；）
- 與前端相關(guān)的內(nèi)容：
前端數(shù)據(jù)類型分為：
1.復(fù)雜類型：對象，數(shù)組，函數(shù)等
2.簡單數(shù)據(jù)類型：undefined、null、 boolean、number、string - 簡單數(shù)據(jù)類型存放在棧中；復(fù)雜數(shù)據(jù)類型也存放在棧中，但是棧中存放的是指向堆中的地址值。因為復(fù)雜類型數(shù)據(jù)大小不定不能存放在棧中，地址值的大小是確定的。
image.png
4.new操作符具體干了什么
1.創(chuàng)建空對象；
2.空對象的原型指針指向構(gòu)造函數(shù)的原型對象；
3.利用函數(shù)的call方法改變this指向，在空對象上掛載屬性或方法；
4.返回對象。
5.difft算法以及key
6.數(shù)組的方法
- 增：push()
- 刪：splice(); delete
- 改：splice()； slice()
- 查：indexOf()、lastIndexOf()
- 循環(huán)：map，filter，find，forEach
7.felx布局的缺點(diǎn)
- felx布局是css3中的新特性。兼容性差，IE9及以上瀏覽器不支持。
8.vue的優(yōu)化
- 路由懶加載
- keep-alive緩存頁面
- 使用v-show復(fù)用DOM
- v-for遍歷避免同事使用v-if
- 事件的銷毀
- 圖片懶加載
- 第三方插件按需引入（像element-ui這樣的第三方組件庫可以按需引入避免體積太大）
9.vue中data為什么是function不是object
- 對象是引用類型，當(dāng)同一個組件被多次引用，它們的data都指向同一個內(nèi)存地址，換句話說，所有的組件共享一組data數(shù)據(jù)。
- 將data設(shè)置成一個函數(shù)，該函數(shù)會返回一個初始數(shù)據(jù)對象，用function return其實就相當(dāng)于申明了薪的變量，相當(dāng)于獨(dú)立。
10.vue的響應(yīng)式原理
- 當(dāng)你把一個普通的對象傳入Vue實力作為data選項，Vue將遍歷此對象所有的property，并使用Object.defineProperty把這些propert全部轉(zhuǎn)為getter/setter這些getter/setter對于用戶來說是不可見的，但是在內(nèi)部它們讓Vue能夠追蹤依賴，在property被訪問和修改時通知變更，每個組件實例都對應(yīng)一個watcher吃力，它會在組件渲染的過程中把“接觸”過的數(shù)據(jù)property記錄為依賴。之后當(dāng)依賴項的setter出發(fā)時，會通知watcher，從而使他關(guān)聯(lián)的組件重新渲染。
11.為什么vue檢測不到對象和數(shù)組的變化
- 因為vue無法檢測到propety增、刪，vue在初始化實例時會對propetty執(zhí)行g(shù)etter/setter，所以property必須在data對象上存在才能讓vue將它轉(zhuǎn)換為響應(yīng)式。
- 解決方法：this.$set()
12.new Vue（）實例中，data可以直接是一個對象，為什么在vue組建中，data必須是一個函數(shù)呢？
- 因為組件是可以復(fù)用的,JS 里對象是引用關(guān)系,如果組件 data 是一個對象,那么子組件中的 data 屬性值會互相污染,產(chǎn)生副作用。所以一個組件的 data 選項必須是一個函數(shù),因此每個實例可以維護(hù)一份被返回對象的獨(dú)立的拷貝。new Vue 的實例是不會被復(fù)用的,因此不存在以上問題。
13.computed 和 watch 有什么區(qū)別
- computed計算屬性：依賴其它屬性值，只有他依賴的屬性值發(fā)生改變，下一次獲取computed的值時才會重新計算computed的值，如果和上次計算結(jié)果不一致，重新渲染頁面。
- watch偵聽器：更多的是觀察的作用，無緩存性，類似于某些數(shù)據(jù)的監(jiān)聽回調(diào)，每當(dāng)監(jiān)聽的數(shù)據(jù)發(fā)生變化時都會執(zhí)行回調(diào)進(jìn)行后續(xù)操作。
computed和watch應(yīng)用場景
- computed：當(dāng)我們需要進(jìn)行數(shù)值計算，并且依賴于其它數(shù)據(jù)時，應(yīng)該使用computed，因為可以利用computed的緩存特性，避免每次獲取值時， 都要重新計算。
- watch：當(dāng)我們需要數(shù)據(jù)變化時執(zhí)行的操作時使用。
能使用箭頭函數(shù)定義computed和watch嗎？
- 不能使用箭頭函數(shù)來定義watcher函數(shù)，理由是箭頭函數(shù)綁定了父級作用域的上下文，所以this將不會按照期望指向Vue實例，為undefined。
14.v-if和v-for在同一個標(biāo)簽中的執(zhí)行順序
- 當(dāng)它們處于同一節(jié)點(diǎn)，v-for 的優(yōu)先級比 v-if 更高，這意味著 v-if 將分別重復(fù)運(yùn)行于每個 v-for 循環(huán)中。（官網(wǎng)文檔原話）
