1.MutationObserver
观察DOM树结构发生变化时,做出相应处理的API
MutationObserver中有三个方法
observe
observe(target, config):
target:需要监听的元素 [element]
config:需要监听的属性 [Object] 例如 attributes \ childList等
disconnect
停止MutationObserver对象的观察,且清空所有的MutationRecord对象
takeRecords
从MutationObserver的通知队列中删除所有待处理的通知,并将它们返回到MutationRecord对象的新Array中
实例
// Firefox和Chrome早期版本中带有前缀
var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver
// 选择目标节点
var target = document.querySelector('#some-id');
// 创建观察者对象
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
console.log(mutation.type);
});
});
// 配置观察选项:
var config = { attributes: true, childList: true, characterData: true }
// 传入目标节点和观察选项
observer.observe(target, config);
// 随后,你还可以停止观察
observer.disconnect();
2.vue组件间通信
1.props、emit
2.$on、$emit
3.$attrs、$listeners
$attrs:包含了父作用域中不被 prop 所识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 (class 和 style 除外),并且可以通过 v-bind="$attrs" 传入内部组件。通常配合 inheritAttrs 选项一起使用。
inheritAttrs: false, // 可以关闭自动挂载到组件根元素上的没有在props声明的属性
$listeners:包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件
4.provide、inject
// A.vue
export default {
provide: {
name: '浪里行舟'
}
}
// B.vue
export default {
inject: ['name'],
mounted () {
console.log(this.name); // 浪里行舟
}
}
//provide 和 inject 绑定并不是可响应的。这是刻意为之的。
//然而,如果你传入了一个可监听的对象,那么其对象的属性还是可响应的
5.$parent、$childen、ref
6.vuex