关于前端:Vue3第6课Vue3中模块化介绍作一个时间更新模块

咱们晓得当程序有肯定的可重用性时，在 vue2 中咱们会应用 mixins, 然而在 vue3 中没有了。那咱们先 vue3 中怎么实现相似的性能了。

1. 明确需要，咱们心愿有提供一个工夫与调用工夫的办法给多个组件应用。咱们先新建一个 Time.vue 组件

   <template>
     <div class="time">
    <button @click="getNowTime"> 获取工夫 </button>
    <div>{{nowTime}}</div>
     </div>
   </template>
   
   <script lang="ts">
   import {defineComponent, reactive, ref, toRefs, watch} from "vue";
   
   export default defineComponent({
     name: "about",
     setup() {const nowTime = ref("00:00:00");
    const getNowTime = () => {const now = new Date();
      const hour = now.getHours() < 10 ? "0" + now.getHours() : now.getHours();
      const min =
        now.getMinutes() < 10 ? "0" + now.getMinutes() : now.getMinutes();
      const sec =
        now.getSeconds() < 10 ? "0" + now.getSeconds() : now.getSeconds();
      nowTime.value = hour + ":" + min + ":" + sec;
      setTimeout(getNowTime, 1000);
    };
    return {
      nowTime,
      getNowTime,
    };
     },
     components: {},});
   </script>
   <style lang="scss" scoped>
   .about {margin-top: 80px;}
   </style>
   
   

当咱们点击“获取工夫”按钮后

获取了以后工夫，并 1 秒钟刷新一次，曾经能够失常运行了。那咱们想在多个组件中应用这个工夫跟办法该如果实现了。

2. 模块化
   新建一个 hooks 文件夹并新建一个 time.ts 文件

   把相干代码写在 time.ts 中，并 export 进来

import {ref} from "vue";
const nowTime = ref("00:00:00");
const getNowTime = () => {const now = new Date();
  const hour = now.getHours() < 10 ? "0" + now.getHours() : now.getHours();
  const min =
    now.getMinutes() < 10 ? "0" + now.getMinutes() : now.getMinutes();
  const sec =
    now.getSeconds() < 10 ? "0" + now.getSeconds() : now.getSeconds();
  nowTime.value = hour + ":" + min + ":" + sec;
  setTimeout(getNowTime, 1000);
};
export {nowTime, getNowTime}

在须要应用的组件中援用

<template>
  <div class="time">
    <button @click="getNowTime"> 获取工夫 </button>
    <div>{{nowTime}}</div>
  </div>
</template>

<script lang="ts">
import {defineComponent} from "vue";
import {nowTime, getNowTime} from "@/hooks/time";

export default defineComponent({
  name: "about",
  setup() {
    return {
      // 这里还须要 return，切记不能遗记
      nowTime,
      getNowTime,
    };
  },
  components: {},});
</script>
<style lang="scss" scoped>
.about {margin-top: 80px;}
</style>

程序仍然失常运行