Input Box Anti-shock Abstract Components (Vue, LoDash (_.debounce))

    // main.js
    import _ from 'lodash'
    Vue.prototype._ = _
    
    // debelas.vue abstract component
      export default {
        name: 'debounce'.abstract: true.// Mark as an abstract component
        render() {
            let vnode = this.$slots.default[0]; // The vnode of the child component is wrapped only with the input component.
            if (vnode) {
                let event = _.get(vnode, `data.on.input`); // The click event bound by the child component
                if (typeof event === 'function') {
                    _.set(vnode, `data.on.input`, _.debounce(event, 1000)); }}returnvnode; }};/ / test
       // Import registration can also be registered globally in main.js
       import debounce from '.. /.. /uitils/debounce.vue'
       components:{debounce}
       
       / / use
       <debounce>
            <input type="text" @input="handleinput">
       </debounce>
       

Copy the code

Knowledge points involved:

  1. Abstract component
  2. Render function
  3. Slots function

Abstract component

Abstract components commonly used in VUE development include

,
,
, etc. The implementation of these components is an object, and they have an attribute abstract. When the attribute value is true, it indicates that it is an abstract component.

The abstract component itself does not render a DOM element, nor does it appear in the parent component chain of the component.

In the process of life cycle of abstract component, we can intercept the events monitored by the wrapped sub-component, and Dom operation can be carried out on the sub-component, so that we can encapsulate the functions we need, without caring about the specific implementation of the sub-component;

The debounce component intercepts the input event of a child component.

Render function

Before introducing the Render function, let’s take a look at the workflow of Vue with two diagrams:

In the figure above, the render function can be used as a dividing line. The left side of the render function can be called compile time, which converts Vue’s template into a render function. To the right of the Render function is the Vue runtime, which generates Virtual DOM trees, Diff and patches based on the render function.

Render functions: Render functions are used to generate the Virtual DOM. Vue recommends using templates to build our application interface. In the underlying implementation, Vue compiles templates into rendering functions, but we can also write rendering functions instead of templates for better control.

Example:

    //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.')}}// Add vUE project
    new Vue({
        render:h= >h(App)
    }).$mount('#app'H is short for createElement, which generates a VNode that the render function gets, returns to mount, renders it as a real DOM node, and mounts it to the root node.Copy the code

Summary:

  • Independent build: contains the template compiler, rendering processHTML string → Render function → VNode → real DOM node
  • Runtime build: does not include the template compiler, rendering processRender function → VNode → real DOM node

Building an application using a template is essentially the same as using the Render function; However, using templates needs to go through the compile phase to render function; Writing rendering functions directly is faster and gives you better control.

Slots function

In the render function, we can get an array of children via this.$slot.default.

See: cn.vuejs.org/v2/api/#%E5…

recommended

Skeleton screen abstract component juejin.cn/post/694302…