Vue抽象组件——所涉及的知识点input框防抖抽象组件（vue、lodash(_.debounce)）涉及知识点：

input框防抖抽象组件（vue、lodash(_.debounce)）

    // main.js
    import _ from 'lodash'
    Vue.prototype._ = _
    
    //debounce.vue 抽象组件
      export default {
        name: 'debounce',
        abstract: true, //标记为抽象组件
        render() {
            let vnode = this.$slots.default[0]; // 子组件的vnode 这里只用与包裹一层input组件故取[0]
            if (vnode) {
                let event = _.get(vnode, `data.on.input`); // 子组件绑定的click事件
                if (typeof event === 'function') {
                    _.set(vnode, `data.on.input`, _.debounce(event, 1000));
                }
            }
            return vnode;
            }
        };

   //测试
       //引入 注册  也可以选择在main.js中全局注册
       import debounce from '../../uitils/debounce.vue'
       components:{debounce}
       
       //使用
       <debounce>
            <input type="text" @input="handleinput">
       </debounce>

涉及知识点：

抽象组件

render函数

slots 函数

抽象组件

vue开发中常用的抽象组件有<keep-alive>、<transition>、<transition-group>等，这些组件的实现是一个对象，它们有一个属性 abstract，属性值为 true时，表明是它一个抽象组件;

抽象组件自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。

在抽象组件的生命周期过程中，我们可以对包裹的子组件监听的事件进行拦截，也可以对子组件进行 Dom 操作，从而可以对我们需要的功能进行封装，而不需要关心子组件的具体实现;

debounce 组件，就是对子组件的 input 事件进行拦截.

render函数

介绍render函数之前，我们先通过两张图了解一下vue的工作流程：

上图中，render函数可以作为一道分割线，render函数的左边可以称之为编译期，将Vue的模板转换为渲染函数。render函数的右边是Vue的运行时，主要是基于渲染函数生成Virtual DOM树，Diff和Patch。

渲染函数：渲染函数是用来生成Virtual DOM的。Vue推荐使用模板来构建我们的应用界面，在底层实现中Vue会将模板编译成渲染函数，当然我们也可以不写模板，直接写渲染函数，以获得更好的控制。

实例：

    //eg01
    <h1>{{ blogTitle }}</h1>
    
    render: function (createElement) {
        return createElement('h1', this.blogTitle)
    }


    //eg02
    <ul v-if="items.length"> 
        <li v-for="item in items">{{ item.name }}</li> 
    </ul> <p v-else>No items found.</p>
    
    props: ['items'], 
    render: function (createElement) { 
        if (this.items.length) { 
            return createElement('ul',this.items.map(function (item) { 
                return createElement('li', item.name) 
           }))
        } 
        else { 
            return createElement('p', 'No items found.') 
        } 
    }
    
    //补充 vue项目中
    new Vue({
        render:h=>h(App)
    }).$mount('#app')
    h函数就是createElement方法的缩写,这个函数的作用就是生成一个 VNode节点，render 函数得到这个 VNode 
    节点之后，返回给mount函数，渲染成真实 DOM 节点，并挂载到根节点上。

小结：

独立构建：包含模板编译器，渲染过程HTML字符串 → render函数 → VNode → 真实DOM节点
运行时构建：不包含模板编译器，渲染过程render函数 → VNode → 真实DOM节点 使用模板构建应用与使用render函数，本质上是相同的；只是使用模板需要经过编译阶段转化为render函数；直接写渲染函数更加的快速，且可以获得更好的控制。

slots函数

在渲染函数中，可以通过this.$slots.default，获取其子节点数组。

详见：cn.vuejs.org/v2/api/#%E5…