09. Vue3中模块化介绍-实现一个时间更新模块

Vue3.x 版本最大的一个提升，就是有更好的重用机制，你可以把任何你想独立的模块独立出去。比如在 P08 节的基础上，加一个显示当前时间的功能(例如：15:07:20)。并且这个功能要在不同的页面进行反复调用。

使用 Vue2.x 的版本，一定会使用mixins进行代码的重用。当有Vue3.x

让程序变的人性化

为了方便学习，我们把程序中大部分代码删除掉，修改为下面的样子。

<template>
  <div>
  </div>
</template>
<script lang="ts">
import { ref } from "vue";
const app = {
  name: "App",
  setup() {

  },
};
export default app;
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

然后就可以编写代码了

先实现功能

先来看不重用的写法，也就是我们把程序直接写在App.vue这个组件里。这里你可以先顶一个ref变量nowTime，然后通过getNowTime的方法，让他可以显示并一直更新当前时间。最后在return里返回这个变量和方法。

//....
const app = {
  name: "App",
  setup() {
    //.....
    const nowTime = ref("00:00:00");
    const getNowTime = () => {
      const now = new Date();
      const hour = now.getHours() < 10 ? "0" + now.getHours() : now.getHours();
      const minu =now.getMinutes() < 10 ? "0" + now.getMinutes() : now.getMinutes();
      const sec =now.getSeconds() < 10 ? "0" + now.getSeconds() : now.getSeconds();
      nowTime.value = hour + ":" + minu + ":" + sec;
      setTimeout(getNowTime, 1000);   //每一秒执行一次这个方法
    };
    //...
    return {
      //....
      nowTime,
      getNowTime,
    };
  },
};
export default app;

然后你需要在template里使用他们，代码如下:

<div>{{ nowTime }}</div>
<div><button @click="getNowTime">显示时间</button></div>

这样就可以在浏览器里看到初始时间00:00:00，点击按钮后，开始显示当前时间，并一直更新。

独立模块化的使用

这个显示时间的方法，可能在其他页面中也会使用，所以现在的需求是把这个时间显示的功能进行模块和重用化。

可以在src目录下，新建一个文件夹hooks(所有抽离出来的功能模块都可以放到这个文件夹里)，然后再新建一个文件useNowTime.ts，这里使用use开头是一个使用习惯，代表是一个抽离出来的模块。

有了模块之后，我们就可以把写的代码复制到useNowTime.ts文件里了。然后进行必要的修改。

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 minu =
        now.getMinutes() < 10 ? "0" + now.getMinutes() : now.getMinutes();
    const sec =
        now.getSeconds() < 10 ? "0" + now.getSeconds() : now.getSeconds();
    nowTime.value = hour + ":" + minu + ":" + sec;

    setTimeout(getNowTime, 1000);
};

export { nowTime, getNowTime }

需要注意的是，你需要在代码的最前面用 import 进行引入 ref，在最后用 export 的方式，导出 nowTime 和 getNowTime。

引入并使用模块

模块写好了，回到App.vue页面，现在可以引入并使用模块了。

引入代码：

import { nowTime, getNowTime } from "./hooks/useNowTime";

然后记得，要用 return 进行导出哦

return {nowTime,getNowTime};

现在可以看出这种方式，比 vue2 中要好很多，不用再使用mixins(混入)要好很多。我觉的这个算是 Vue3.x 一个非常重要的改进。

为了方便大家学习，我这里把完整代码附上

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <h2>欢迎光北海九号主题餐厅</h2>
  <div>请选择一位美女服务员</div>
  <div>
    <button 
      v-for="(item,index) in girls"
      v-bind:key="index"
      @click="selectGirlFun(index)"
      >
      {{index}}:{{item}}
    </button>
  </div>
  <div>你选择【{{ selectGirl }}】服务员为你服务</div>
  <div><button @click="overAction">点餐完毕</button></div>
  <div>{{ overText }}</div>
  <div>{{ nowTime }}</div>
  <div><button @click="getNowTime">显示时间</button></div>
</template>

<script lang="ts">

// reactive()
import {
  ref,
  reactive,
  toRefs,
  watch
  } from 'vue';
import { nowTime, getNowTime } from "../src/hooks/useNowTime";

interface DataProps {
  girls: string[];
  selectGirl: string;
  selectGirlFun: (index: number) => void;
}

export default ({
  name: 'App',
  setup(){
    console.log("1.开始创建组件 -----setup()")
    const data: DataProps = reactive({
      girls: ["小红","小李","小张",],
      selectGirl: "",
      selectGirlFun: (index: number) => {
        data.selectGirl = data.girls[index];
      }
    });

    const refData = toRefs(data);

    const overText = ref("北海九号");
    const overAction = () => {
      overText.value = "点餐完成 | " + overText.value;
    }

    watch([overText,()=>data.selectGirl],(newValue,oldValue)=>{
      console.log(`newValue ----- + ${newValue}`);
      console.log(`oldValue ----- + ${oldValue}`);
      document.title = newValue[0];
    })
    return {
      ...refData,
      overText,
      overAction,
      nowTime,
      getNowTime
    };
  }
});
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

以上关于09. Vue3中模块化介绍-实现一个时间更新模块的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。