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更好用的装璜器