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
3.路由守卫
卒
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
}
}
}
在第一次加载被包裹组件时，因为keep-alive的render先于包裹组件加载之前执行，所以此时vnode.componentInstance的值是undefined，而keepAlive是true，则代码走到i(vnode, false /* hydrating */)就不往下走了
再次访问包裹组件时，vnode.componentInstance的值就是已经缓存的组件实例，那么会执行insert(parentElm, vnode.elm, refElm)逻辑，这样就直接把上一次的DOM插入到了父元素中。
渲染
render：此函数会将组件转成VNode
patch：此函数在初次渲染时会直接渲染根据拿到的VNode直接渲染成真实DOM，第二次渲染开始就会拿VNode会跟旧VNode对比，打补丁（diff算法对比发生在此阶段），然后渲染成真实DOM
4.组件话理解
组件化开发能大幅提高应用开发效率、测试性、复用性等；
组件使用按分类有：页面组件、业务组件、通用组件；
vue的组件是基于配置的，我们通常编写的组件是组件配置而非组件，框架后续会生成其构造函数，它们基于VueComponent，扩展于Vue；
vue中常见组件化技术有：属性prop，自定义事件，插槽等，它们主要用于组件通信、扩展等；6.合理的划分组件，有助于提升应用性能；
组件应该是高内聚、低耦合的；
遵循单向数据流的原则。
网友评论