1.MutationObserver
觀察DOM樹結(jié)構(gòu)發(fā)生變化時(shí)，做出相應(yīng)處理的API
MutationObserver中有三個(gè)方法
observe
observe(target, config)：target：需要監(jiān)聽的元素 [element]config：需要監(jiān)聽的屬性 [Object] 例如 attributes \ childList等
disconnect
停止MutationObserver對象的觀察，且清空所有的MutationRecord對象
takeRecords
從MutationObserver的通知隊(duì)列中刪除所有待處理的通知，并將它們返回到MutationRecord對象的新Array中
實(shí)例
// Firefox和Chrome早期版本中帶有前綴
var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver
// 選擇目標(biāo)節(jié)點(diǎn)
var target = document.querySelector('#some-id');
// 創(chuàng)建觀察者對象
var observer = new MutationObserver(function(mutations) {?
? mutations.forEach(function(mutation) {
? ? console.log(mutation.type);
? });
});
// 配置觀察選項(xiàng):
var config = { attributes: true, childList: true, characterData: true }
// 傳入目標(biāo)節(jié)點(diǎn)和觀察選項(xiàng)
observer.observe(target, config);
// 隨后,你還可以停止觀察
observer.disconnect();
2.vue組件間通信
1.props、emit
2.$on、$emit
3.$attrs、$listeners
$attrs：包含了父作用域中不被 prop 所識(shí)別 (且獲取) 的特性綁定 (class 和 style 除外)。當(dāng)一個(gè)組件沒有聲明任何 prop 時(shí)，這里會(huì)包含所有父作用域的綁定 (class 和 style 除外)，并且可以通過 v-bind="$attrs" 傳入內(nèi)部組件。通常配合 inheritAttrs 選項(xiàng)一起使用。
inheritAttrs: false, // 可以關(guān)閉自動(dòng)掛載到組件根元素上的沒有在props聲明的屬性
$listeners：包含了父作用域中的 (不含 .native 修飾器的) v-on 事件監(jiān)聽器。它可以通過 v-on="$listeners" 傳入內(nèi)部組件
4.provide、inject
// A.vue
export default {
? provide: {
? ? name: '浪里行舟'
? }
}
// B.vue
export default {
? inject: ['name'],
? mounted () {
? ? console.log(this.name);? // 浪里行舟
? }
}
//provide 和 inject 綁定并不是可響應(yīng)的。這是刻意為之的。
//然而，如果你傳入了一個(gè)可監(jiān)聽的對象，那么其對象的屬性還是可響應(yīng)的
5.$parent、$childen、ref
6.vuex
3.路由守衛(wèi)
卒
4.keep-alive原理
https://juejin.cn/post/7043401297302650917
// src/core/vdom/patch.js
function createComponent (vnode, insertedVnodeQueue, parentElm, refElm) {
? let i = vnode.data
? if (isDef(i)) {
? ? const isReactivated = isDef(vnode.componentInstance) && i.keepAlive
? ? if (isDef(i = i.hook) && isDef(i = i.init)) {
? ? ? i(vnode, false /* hydrating */)
? ? }
? ? if (isDef(vnode.componentInstance)) {
? ? ? initComponent(vnode, insertedVnodeQueue)
? ? ? insert(parentElm, vnode.elm, refElm) // 將緩存的DOM（vnode.elm）插入父元素中
? ? ? if (isTrue(isReactivated)) {
? ? ? ? reactivateComponent(vnode, insertedVnodeQueue, parentElm, refElm)
? ? ? }
? ? ? return true
? ? }
? }
}
在第一次加載被包裹組件時(shí)，因?yàn)閗eep-alive的render先于包裹組件加載之前執(zhí)行，所以此時(shí)vnode.componentInstance的值是undefined，而keepAlive是true，則代碼走到i(vnode, false /* hydrating */)就不往下走了
再次訪問包裹組件時(shí)，vnode.componentInstance的值就是已經(jīng)緩存的組件實(shí)例，那么會(huì)執(zhí)行insert(parentElm, vnode.elm, refElm)邏輯，這樣就直接把上一次的DOM插入到了父元素中。
渲染
render：此函數(shù)會(huì)將組件轉(zhuǎn)成VNode
patch：此函數(shù)在初次渲染時(shí)會(huì)直接渲染根據(jù)拿到的VNode直接渲染成真實(shí)DOM，第二次渲染開始就會(huì)拿VNode會(huì)跟舊VNode對比，打補(bǔ)?。╠iff算法對比發(fā)生在此階段），然后渲染成真實(shí)DOM
4.組件話理解
組件化開發(fā)能大幅提高應(yīng)用開發(fā)效率、測試性、復(fù)用性等；
組件使用按分類有：頁面組件、業(yè)務(wù)組件、通用組件；
vue的組件是基于配置的，我們通常編寫的組件是組件配置而非組件，框架后續(xù)會(huì)生成其構(gòu)造函數(shù)，它們基于VueComponent，擴(kuò)展于Vue；
vue中常見組件化技術(shù)有：屬性prop，自定義事件，插槽等，它們主要用于組件通信、擴(kuò)展等；6.合理的劃分組件，有助于提升應(yīng)用性能；
組件應(yīng)該是高內(nèi)聚、低耦合的；
遵循單向數(shù)據(jù)流的原則。
