关于前端: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>

程序仍然失常运行