让Vue组件变成Powerful的组件

powerful-componet

觉得好用的话，兄弟们帮忙点个star。
仓库地址

是一个包装Vue对象的工具函数。
支持Vue2 和Vue3

在Vue3下支持Typescript.

其实Vue2 也可以支持Typescript。但是没有必要。

npm install --save powerful-component

仅仅需要你遵循很少的规范，便可以使你的Vue组件得到增强。

获得以下功能.

页面是否加载完成的变量

pageIsReady。

默认为false，当mounted和created都执行完成时会，pageIsReady变为true

约定

需要保证mounted和created是async/await风格写法。以保证pageIsReady变量能得知异步请求执行完成了。

例子

<script lang="ts">
import powerfulDefineComponent from "powerful-component";
export default powerfulDefineComponent({
  methods: {
    //onClick执行完成之前，不会执行下一次
    async onClick() {
      await new Promise((done) => setTimeout(done, 1000));
    },
  },
});
</script>

<template>
    // 这个按钮在onClick执行期间会获得loading样式
  <button type="button" @click="onClick"></button>
</template>

点击事件防抖，并增加loading样式

以on开头的方法都会被增加防抖功能，并能对被点击的按钮增加loading样式

约定

1. 方法名以on开头
2. async/await风格写法。这样powerful-componet才会知道方法是不是执行完成了
3. 方法参数列表最后一个是点击事件的event，这样才能得到dom元素，添加样式。

例子

<script lang="ts">
import powerfulDefineComponent from "powerful-component";
export default powerfulDefineComponent({
    async created() {
      await new Promise((done) => setTimeout(done, 1000));
    },
    async mounted() {
      await new Promise((done) => setTimeout(done, 2000));
    },
});
</script>

<template>
    //created和mounted都执行完成后，pageIsReady为true
  <h1>页面加载完成：{{ pageIsReady }}</h1>
</template>

尾声

这个库的核心思想来源于这篇文章活用async/await，实现一些让Vue更好用的装饰器