Vue 3 Setup标签的使用笔记,及一次Vue-ts的经历
本文最后更新于 116 天前,其中的信息可能已经有所发展或是发生改变。

最近想起来之前买的域名 huli.li 一直没有加内容,想至少要加一些内容,于是就去Codepen上面找灵感,碰巧就找到了一个白天黑夜切换的CSS小狐狸,就想到判断当前位置是否日落来切换小狐狸的白天黑夜状态,说干就干。

在网上搜了一些API,最终使用腾讯地图的API来通过IP获取经纬度位置(没有通过浏览器自带的Geolocation首先是支持度的问题,其次还需要用户同意和一段时间的定位,会比较麻烦),日出日落的API使用的是和风天气的API。项目使用的是Vite.js创建的Vue-ts项目。

以上为项目仓库,后面将不时引用一下,具体引用版本为v0.2.2

setup标签和setup()函数内容基本相同,一下就仅说setup标签了

Vue 3 Setup 标签的使用

官方文档

一般默认的Vue项目的script标签都是这样的:

<script>
export default{
// ...
}
</script>

Vue 3 的setup标签可以直接不适用export default,直接在script标签里写内容并暴露给组件,而且不像之前的写法,数据在data()里、方法在methods里、钩子在另外的地方,写一个功能就要改三个地方,setup标签就可以很好的解决这个问题。

setup标签就是简单的把script标签上加上setup属性<script setup></script>

在setup标签中定义组件props

普通情况下需要使用props: string[] | object来定义Props,在setup标签中只需要用defineProps

const props = defineProps({ foo: String });

const props = defineProps<{foo: string}>(); // TS专用写法,尖括号里是interface

在项目仓库里查看:/src/components/Fox.vue Line 44-49(带默认值的方法),/src/components/Clock.vue L19,L21(不带默认值的方法)

在setup标签中使用响应式变量

以前要想创建响应式变量,需要找到data然后去加或者修改,现在可以在setup标签的任意地方使用ref来添加响应式变量:

import { ref } from 'vue'

const num = ref(0) // 函数参数为默认值,不传递则为undefined
const weather = ref<IWeather>(); // TS写法,尖括号传入变量类型

在项目仓库中查看:/src/App.vue L13-L15

在setup标签中使用生命周期的钩子

以往使用生命周期钩子就是直接在对应的生命周期函数的地方进行重写,而现在则是使用组合式API生命周期函数,例如beforeUnmounted:

import { onMounted } from 'vue';

onMounted(() => console.log('Mounted'));

在项目仓库中查看案例:/src/App.vue L59-L63

值得一提的是,在setup标签中的内容将会在组件创建时运行,也就是说组合式API生命周期函数没有beforeCreate和created的对应API,因为在setup标签中的语句的执行时期和它们一样(setup围绕beforeCreated和created运行)。setup中生命周期钩子对应表请看:https://v3.cn.vuejs.org/guide/composition-api-lifecycle-hooks.html

使用TypeScript的原因

首先肯定TS是之后的趋势,多学习一下肯定是好的;然后就是……之前写项目TS用太多了导致面对返回体那么大的和风API不敢写了,就比如res.now.obsTime,如果不写好interface的话,写下一个”.”后面IDE是不会有提示和文档的,这样让我不太敢继续”点“下去,不知道对象到底会不会有这个属性,有了TS的话各种格式都非常的清晰,并且IDE也会有代码提示和文档,还有可能是空对象的报错,写起来也更放心。

项目中写的一个weather的interface:/src/data/interfaces/weather.ts,IDE效果:

IDE文档提示
鼠标移到上方的代码提示

使用Github Action自动构建并发布

之前就总想试试Github Action的自动构建,这次在网上查了一些资料,自己写了一个脚本,可以在仓库的这个文件看到。

不过还是遇到了一点问题,本地安装jQuery和和风天气图标的时候只给保存到了node_modules但是没保存到package.json里,导致在运行 npm install 之后总是缺少依赖导致构建失败,索性在安装依赖的时候同时执行安装命令一并安装了。/.github/workflows/main.yml L22-L24

 - name: Installing dependencies packages
        run: |
          npm install
          npm install jquery
          npm i qweather-icons
文章发布后半小时我解决了这个问题,因为在安装依赖时没有加-S,正确应该是 npm i jquery -S

最终成果

在一些小的版本迭代后,最终有了现在的版本,这个版本有以下特性

  • 获取当前的IP位置、天气和日出日落
  • 每小时更新一次天气
  • 小狐狸会在日出时醒来,日落后睡觉
  • 日出日落如果跨天会自动更新

还加了一些控制台信息,主要是一些版权,如下

如果想要体验的话可以直接访问:https://huli.li/,也可以顺手给咱的仓库点个Star~

文章首发于https://blog.orangii.cn/2022/vue-setup-and-vuets/,转载请注明出处。博客所有文章遵循CC BY-NC 4.0协议

评论

  1. Windows Firefox
    3月前
    2022-2-14 20:15:25

    这是正儿八经的大佬呀,Vue3,TypeScript确实比较香。

    • 博主
      林羽凡
      Windows Chrome
      3月前
      2022-2-14 21:58:27

      Vue开发小型应用很方便,TS也是以后的主流,还在努力学习,离大佬还远୧(๑•̀⌄•́๑)૭

  2. moozik
    Linux Chrome
    4月前
    2022-2-07 14:31:32

    感谢分享,正在搞vue

    • 博主
      moozik
      Windows Chrome
      4月前
      2022-2-07 17:36:53

      都是文档教的好

      • moozik
        橙梓
        Linux Chrome
        4月前
        2022-2-07 17:39:39

        我看文档都很费劲,又是vue3又是ts,搞得头很大

        • 博主
          moozik
          Windows Chrome
          4月前
          2022-2-07 18:19:54

          Vue的官方文档都是js为主的,ts很多就是特殊用法。不过ts以后肯定会流行一些,毕竟可以避免很多错误出现,ts也不难,和Java类似,他们官方教程写的也很清晰

  3. Windows Edge
    4月前
    2022-1-29 19:03:57

    哇塞,开源的。回来我也整一个!

  4. Windows Chrome
    4月前
    2022-1-20 1:21:39

    过来点赞,已经收藏了,等我把切里先折腾好,跟你学着整一个。

发送评论 编辑评论

|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
甘城猫猫
上一篇
下一篇