构建类似 Vue 类的业务模块代码

如题，我们在初次接触 vue 时，总会看到这样的代码

new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this` 指向 vm 实例
    console.log('a is: ' + this.a)
  }
})
// => "a is: 1"

这个无不证明了 Vue 是一个构造函数，但是神奇就神奇在它支持我们给它传参数，而且不是普通的参数，而是函数，而且不是普通的函数，而是构建时必须执行的函数，在查看了 React 的 HOOK 的概念后，我觉得这个写法和 HOOK 的定义极为相似，网上查看 HOOK 的概念大致如下：

钩子机制也叫hook机制，或者你可以把它理解成一种匹配机制，就是我们在代码中设置一些钩子，然后程序执行时自动去匹配这些钩子；这样做的好处就是提高了程序的执行效率，减少了if else 的使用同事优化代码结构。由于js是单线程的编程语言，所以程序的运行效率在前端开发是比较重要的，在开发中我们秉承如果能用switch case 的地方就不要用if else 可以用hook实现的尽量使用hook机制去实现。hook机制也就是钩子机制，由表驱动实现，常用来处理多种特殊情况的处理。我们预定义了一些钩子，在常用的代码逻辑中去适配一些特殊的事件，这样可以让我们少些很多if else语句。

目前几经思索，想出了一套类似的构造函数的实现

// Axios.js
export class Axios {
    constructor(obj) {
        Object.assign(this, obj)
        return this.run()
    }
    async run() {
        await this.run1()
        await this.run2()
        return {
            'type': 'success'
        }
    }
    run1() {
        return new Promise(resolve => {
            setTimeout(() => {
                resolve()
                console.log(123)
            }, 3000)
        })
    }
    run2() {
        return new Promise(resolve => {
            setTimeout(() => {
                resolve()
                console.log(456)
            }, 5000)
        })
    }
}

// App.vue
export default {
  ...
  async mounted() {
    new Axios({
      run: (e) => {
        console.log(this);
        console.log(e);
      },
    });
    let res = await new Axios()
    console.log(res)
  },
  ...
}

因为没有考虑到 vue 中 this 的处理机制，目前想要 this 指向当前 vue 实例，必须用箭头函数的方式定义。后续有更新会继续更新哈🚴...