keep-alive是什么

keep-alive是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中；使用keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。

props

export default {
      name:"keep-alive",
      abstract:true,
      
      props:{
        include:"patternTypes",
        exclude:"patternTypes",
        max:[String,Number]
 }
};

1. include缓存白名单，会缓存命中的组件
2. exclude缓存黑名单，被命中的组件不会缓存
3. max缓存组件上限

created

created () {
    this.cache = Object.created(null)
    this.keys=[]
}

create方法就是初始化了两个变量 cache用来缓存虚拟DOM keys用来缓存虚拟DOM的键合集

mounted

mounted () {
    this.#watch('include', val => {
        pruneCache(this, name => matches(val, name))
    })
    this.#watch('exclude', val => {
        pruneCache(this, name => !matches(val, name))
    })
}

在mounted这个钩子中对include和exclude参数进行监听，然后实时地更新和删除this.cache对象数据

nextTick 实现原理

将传入的回调函数包装成异步任务，异步任务又分微任务和宏任务，为了尽快执行所以优先选择微任务同时 nextTick也提供了四种异步方法 Promise.then、MutationObserver、setImmediate、setTimeout(fn,0)

nexTick 的作用

nextTick 接收一个回调函数作为参数，并将这个回调函数延迟到DOM更新后才执行