V018-watch的原理

export default {  
    name: "keep-alive", 
     abstract: true, // 抽象组件属性 ,它在组件实例建立父子关系的时候会被忽略,发生在 initLifecycle 的过程中  
    props: {    
        include: patternTypes, // 被缓存组件    
        exclude: patternTypes, // 不被缓存组件    
        max: [String, Number] // 指定缓存大小  
    }, 
    created() {   
          this.cache = Object.create(null); // 缓存 
          this.keys = []; // 缓存的VNode的键  
    },  
    destroyed() {    
        for (const key in this.cache) {      
             // 删除所有缓存     
             pruneCacheEntry(this.cache, key, this.keys);   
        }  
    }, 
    mounted() {    
        // 监听缓存/不缓存组件   
        this.$watch("include", val => {      
            pruneCache(this, name => matches(val, name));    
        });    
        this.$watch("exclude", val => {      
            pruneCache(this, name => !matches(val, name));    
        });
    }, 
    render() {   
        // 获取第一个子元素的 vnode   
        const slot = this.$slots.default;    
        const vnode: VNode = getFirstComponentChild(slot);    
        const componentOptions: ?VNodeComponentOptions = vnode && vnode.componentOptions;    
        if (componentOptions) {      
            // name不在inlcude中或者在exlude中 直接返回vnode      // check pattern      
            const name: ?string = getComponentName(componentOptions);      
            const { include, exclude } = this;     
            if (        
            // not included       
             (include && (!name || !matches(include, name))) ||        
            // excluded        
             (exclude && name && matches(exclude, name))      ) {      
                  return vnode;      
            }      
            const { cache, keys } = this;      // 获取键，优先获取组件的name字段，否则是组件的tag     
            const key: ?string =        
            vnode.key == null 
            ? componentOptions.Ctor.cid + (componentOptions.tag ? `::${componentOptions.tag}` : "")          
            : vnode.key;      
            // 命中缓存,直接从缓存拿vnode 的组件实例,并且重新调整了 key 的顺序放在了最后一个      
            if (cache[key]) {        
                vnode.componentInstance = cache[key].componentInstance;        
                // make current key freshest       
                remove(keys, key);        
                keys.push(key);      
            }     
            // 不命中缓存,把 vnode 设置进缓存      
            else { 
                cache[key] = vnode;        
                keys.push(key);        
            // prune oldest entry        
            // 如果配置了 max 并且缓存的长度超过了 this.max，还要从缓存中删除第一个        
            if (this.max && keys.length > parseInt(this.max)) {        
                  pruneCacheEntry(cache, keys[0], keys, this._vnode);        
            }      
        }      
        // keepAlive标记位      
        vnode.data.keepAlive = true;   
    }   
    return vnode || (slot && slot[0]);  
}};