乐趣区

关于vue.js:让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 更好用的装璜器

退出移动版