2022-05-08

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