- vue中虛擬dom的key的作用？
（1）v-if不加key，切換input，但用戶輸入的數(shù)據(jù)不會(huì)被清除，除非設(shè)置key，用 key 管理可復(fù)用的元素
(2)v-for是否key，[1,2,3]-->[1,2]的過程
（3）提到diff算法，只有key是vdom的唯一標(biāo)識(shí)，告訴diff算法該節(jié)點(diǎn)，修改前后他們是否是同一個(gè)節(jié)點(diǎn)，只有是相同，才會(huì)對(duì)其子節(jié)點(diǎn)、text文本、class等屬性進(jìn)行精細(xì)化的比較，否則刪除舊的，插入新的
- nextTick 的原理
(1)js的事件執(zhí)行機(jī)制
(2)當(dāng)設(shè)置data.a =2時(shí)，視圖不會(huì)立刻被更新，因?yàn)関ue的dom刷新機(jī)制是異步的，
Vue 在更新 DOM 時(shí)是異步執(zhí)行的。只要偵聽到數(shù)據(jù)變化，Vue 將開啟一個(gè)隊(duì)列，并緩沖在同一事件循環(huán)中發(fā)生的所有數(shù)據(jù)變更。如果同一個(gè) watcher 被多次觸發(fā)，只會(huì)被推入到隊(duì)列中一次。這種在緩沖時(shí)去除重復(fù)數(shù)據(jù)對(duì)于避免不必要的計(jì)算和 DOM 操作是非常重要的
vue 在內(nèi)部對(duì)異步隊(duì)列嘗試使用原生的 Promise.then、MutationObserver 和 setImmediate，如果執(zhí)行環(huán)境不支持，則會(huì)采用 setTimeout(fn, 0) 代替
- Vue 組件 data 為什么必須是函數(shù) ?
new Vue()實(shí)例中,data 可以直接是一個(gè)對(duì)象,為什么在 vue 組件中,data 必須是一個(gè)函數(shù)呢?
因?yàn)榻M件是可以復(fù)用的,JS 里對(duì)象是引用關(guān)系,如果組件 data 是一個(gè)對(duì)象,那么子組件中的 data 屬性值會(huì)互相污染,產(chǎn)生副作用。
所以一個(gè)組件的 data 選項(xiàng)必須是一個(gè)函數(shù),因此每個(gè)實(shí)例可以維護(hù)一份被返回對(duì)象的獨(dú)立的拷貝。new Vue 的實(shí)例是不會(huì)被復(fù)用的,因此不存在以上問題。
5.優(yōu)化：
（1）首頁(yè)加載優(yōu)化，緩存，兩幀
（2）大圖分塊加載技術(shù)
（3）10周年慶典，動(dòng)畫，backgroundImage,替換URL 會(huì)閃動(dòng)，通過雪碧圖，控制background-position
（4）測(cè)試環(huán)境，登錄態(tài)問題，登錄頁(yè)---》 中臺(tái)cas登錄平臺(tái) ---》返回前端登錄頁(yè)，并通過cookie帶回登錄態(tài) ---》前端請(qǐng)求數(shù)據(jù)成功
但cookie不支持待會(huì)localhost調(diào)試頁(yè)，之前服務(wù)端在測(cè)試環(huán)境不需要登錄，但接入米盾后，測(cè)試環(huán)境也需要登錄
6.IntersectionObserver監(jiān)聽視口
var io = new IntersectionObserver(callback, option);
// 開始觀察
io.observe(document.getElementById('example'));
// 停止觀察
io.unobserve(element);
// 關(guān)閉觀察器
io.disconnect();
- requestAnimationFrame http://www.itdecent.cn/p/fa5512dfb4f5
vue @transitionend
dom addEventListener('webkitTransitionEnd transitionend webkitAnimationEnd animationend')
vue3 虛擬dom：重寫了 Vdom ，突破了 Vdom 的性能瓶頸
（1）patch flag 優(yōu)化靜態(tài)屬性
Vdom 除了模擬出來它的基本信息之外，還給它加了一個(gè)標(biāo)記： 1 /* TEXT */
這個(gè)標(biāo)記就叫做 patch flag（補(bǔ)丁標(biāo)記）
patch flag 的強(qiáng)大之處在于，當(dāng)你的 diff 算法走到 _createBlock 函數(shù)的時(shí)候，會(huì)忽略所有的靜態(tài)節(jié)點(diǎn)，只對(duì)有標(biāo)記的動(dòng)態(tài)節(jié)點(diǎn)進(jìn)行對(duì)比，而且在多層的嵌套下依然有效。
盡管 JavaScript 做 Vdom 的對(duì)比已經(jīng)非常的快，但是 patch flag 的出現(xiàn)還是讓 Vue3 的 Vdom 的性能得到了很大的提升，尤其是在針對(duì)大組件的時(shí)候。
（2）事件偵聽器緩存
onclick: _cache[1] || (_cache[1] = () => {})
我們發(fā)現(xiàn) onClick 函數(shù)的儲(chǔ)存位置變成了緩存的形式。也就是說 當(dāng)你的頁(yè)面在不斷的更新的時(shí)候，你的事件偵聽器并不會(huì)重復(fù)地銷毀再創(chuàng)建，而是以緩存的形式存在，這使 Vue3 在性能方面又有了一個(gè)出彩的地方
- []不響應(yīng)，因?yàn)闆]有重寫[index] = ddd
{}不響應(yīng)，是因?yàn)楹蠹拥膶傩詻]有setter
10.computed屬性的原理：computed的觀察者也被收集到data的依賴收集器中
頁(yè)面初始渲染時(shí)，讀取 computed 屬性值，觸發(fā)重定義后的 getter 函數(shù)。由于觀察者的 dirty 值為 true，將會(huì)調(diào)用 get 方法，執(zhí)行原始 getter 函數(shù)。getter 函數(shù)中會(huì)讀取 data（響應(yīng)式）數(shù)據(jù)，讀取數(shù)據(jù)時(shí)會(huì)觸發(fā) data 的 getter 方法，會(huì)將 computed 屬性對(duì)應(yīng)的觀察者添加到 data 的依賴收集器中（用于 data 變更時(shí)通知更新）。觀察者的 get 方法執(zhí)行完成后，更新觀察者的 value 值，并將 dirty 設(shè)置為 false，表示 value 值已更新，之后在執(zhí)行觀察者的 depend 方法，將上層觀察者（該觀察者包含頁(yè)面更新的方法，方法中讀取了 computed 屬性值）也添加到 getter 函數(shù)中 data 的依賴收集器中（getter 中的 data 的依賴器收集器包含 computed 對(duì)應(yīng)的觀察者，以及包含頁(yè)面更新方法（調(diào)用了 computed 屬性）的觀察者），最后返回 computed 觀察者的 value 值。
