- vue中虛擬dom的key的作用？
（1）v-if不加key，切換input武学，但用戶輸入的數(shù)據(jù)不會被清除绳泉，除非設(shè)置key逊抡，用 key 管理可復用的元素
(2)v-for是否key，[1,2,3]-->[1,2]的過程
（3）提到diff算法零酪，只有key是vdom的唯一標識冒嫡，告訴diff算法該節(jié)點，修改前后他們是否是同一個節(jié)點四苇，只有是相同孝凌，才會對其子節(jié)點、text文本月腋、class等屬性進行精細化的比較蟀架，否則刪除舊的瓣赂，插入新的
- nextTick 的原理
(1)js的事件執(zhí)行機制
(2)當設(shè)置data.a =2時，視圖不會立刻被更新片拍，因為vue的dom刷新機制是異步的钩述，
Vue 在更新 DOM 時是異步執(zhí)行的。只要偵聽到數(shù)據(jù)變化穆碎，Vue 將開啟一個隊列牙勘，并緩沖在同一事件循環(huán)中發(fā)生的所有數(shù)據(jù)變更。如果同一個 watcher 被多次觸發(fā)所禀，只會被推入到隊列中一次方面。這種在緩沖時去除重復數(shù)據(jù)對于避免不必要的計算和 DOM 操作是非常重要的
vue 在內(nèi)部對異步隊列嘗試使用原生的 Promise.then、MutationObserver 和 setImmediate色徘，如果執(zhí)行環(huán)境不支持恭金，則會采用 setTimeout(fn, 0) 代替
- Vue 組件 data 為什么必須是函數(shù) ?
new Vue()實例中,data 可以直接是一個對象,為什么在 vue 組件中,data 必須是一個函數(shù)呢?
因為組件是可以復用的,JS 里對象是引用關(guān)系,如果組件 data 是一個對象,那么子組件中的 data 屬性值會互相污染,產(chǎn)生副作用。
所以一個組件的 data 選項必須是一個函數(shù),因此每個實例可以維護一份被返回對象的獨立的拷貝褂策。new Vue 的實例是不會被復用的,因此不存在以上問題横腿。
5.優(yōu)化：
（1）首頁加載優(yōu)化，緩存斤寂，兩幀
（2）大圖分塊加載技術(shù)
（3）10周年慶典耿焊，動畫，backgroundImage,替換URL 會閃動遍搞，通過雪碧圖罗侯，控制background-position
（4）測試環(huán)境，登錄態(tài)問題溪猿，登錄頁---》 中臺cas登錄平臺 ---》返回前端登錄頁钩杰，并通過cookie帶回登錄態(tài) ---》前端請求數(shù)據(jù)成功
但cookie不支持待會localhost調(diào)試頁，之前服務端在測試環(huán)境不需要登錄诊县，但接入米盾后讲弄，測試環(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.reibang.com/p/fa5512dfb4f5
vue @transitionend
dom addEventListener('webkitTransitionEnd transitionend webkitAnimationEnd animationend')
vue3 虛擬dom：重寫了 Vdom ，突破了 Vdom 的性能瓶頸
（1）patch flag 優(yōu)化靜態(tài)屬性
Vdom 除了模擬出來它的基本信息之外依痊，還給它加了一個標記： 1 /* TEXT */
這個標記就叫做 patch flag（補丁標記）
patch flag 的強大之處在于避除，當你的 diff 算法走到 _createBlock 函數(shù)的時候，會忽略所有的靜態(tài)節(jié)點抗悍，只對有標記的動態(tài)節(jié)點進行對比驹饺，而且在多層的嵌套下依然有效。
盡管 JavaScript 做 Vdom 的對比已經(jīng)非常的快缴渊，但是 patch flag 的出現(xiàn)還是讓 Vue3 的 Vdom 的性能得到了很大的提升赏壹，尤其是在針對大組件的時候。
（2）事件偵聽器緩存
onclick: _cache[1] || (_cache[1] = () => {})
我們發(fā)現(xiàn) onClick 函數(shù)的儲存位置變成了緩存的形式衔沼。也就是說 當你的頁面在不斷的更新的時候蝌借，你的事件偵聽器并不會重復地銷毀再創(chuàng)建昔瞧，而是以緩存的形式存在，這使 Vue3 在性能方面又有了一個出彩的地方
- []不響應菩佑，因為沒有重寫[index] = ddd
{}不響應自晰，是因為后加的屬性沒有setter
10.computed屬性的原理：computed的觀察者也被收集到data的依賴收集器中
頁面初始渲染時，讀取 computed 屬性值稍坯，觸發(fā)重定義后的 getter 函數(shù)酬荞。由于觀察者的 dirty 值為 true，將會調(diào)用 get 方法瞧哟，執(zhí)行原始 getter 函數(shù)混巧。getter 函數(shù)中會讀取 data（響應式）數(shù)據(jù)，讀取數(shù)據(jù)時會觸發(fā) data 的 getter 方法勤揩，會將 computed 屬性對應的觀察者添加到 data 的依賴收集器中（用于 data 變更時通知更新）咧党。觀察者的 get 方法執(zhí)行完成后，更新觀察者的 value 值陨亡，并將 dirty 設(shè)置為 false傍衡，表示 value 值已更新，之后在執(zhí)行觀察者的 depend 方法负蠕，將上層觀察者（該觀察者包含頁面更新的方法蛙埂，方法中讀取了 computed 屬性值）也添加到 getter 函數(shù)中 data 的依賴收集器中（getter 中的 data 的依賴器收集器包含 computed 對應的觀察者，以及包含頁面更新方法（調(diào)用了 computed 屬性）的觀察者）虐急，最后返回 computed 觀察者的 value 值箱残。
