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對(duì)象的觀察,且清空所有的MutationRecord對(duì)象
takeRecords
從MutationObserver的通知隊(duì)列中刪除所有待處理的通知,并將它們返回到MutationRecord對(duì)象的新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)建觀察者對(duì)象
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)聽的對(duì)象,那么其對(duì)象的屬性還是可響應(yīng)的
5.$parent、$childen、ref
6.vuex