P09: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>
1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » P09:Vue3中模块化介绍-实现一个时间更新模块

发表评论

提供最优质的资源集合

立即查看 了解详情