console 命令行工具 X clear

console

 /**
  * 一个简单的累计高级插件。（高级组件）即一个函数接受一个组件为参数，返回一个包装后的组件
  */

// 简单的计数高级组件包裹函数
 const HocWraper = (wrapped) => {
  return {
    data() { 
        return {
            timer: null,
            maxCount: 10, // 10次后计时结束
            current: 0 // 当前计数
        }
     },
    mounted() { 
        this.timer = setInterval(() => {
            if(this.current < this.maxCount){
                this.current++
            }else{
                clearInterval(this.timer)
                this.timer = null
            }
        }, 1000)
    },
    render(h) {
      return h('div', {}, [
        '简单计数：',
        h(wrapped, {
            props: {
                current: this.current
            },
        })
      ])
    }
  };
};

const view = {
    template: `<span>{{current}}<div>`,
    props: ['current']
}

const hoc = HocWraper(view)

var app = new Vue({
    el: '#app',
    components: { hoc }
})

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
    <div id="app">
        <hoc></hoc>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
</body>