自驾 / 写一个 Vue 3 组件

2023-01-23

下午去了横琴的湿地公园,是我阿姨借我车自驾过去的。到这边基本上就是随便走走 + 拍照,珠海还是没啥好玩的地方。

差不多四点半左右,我们几个人相约前往拱北的粤海酒店顶层旋转餐厅吃自助餐,抖音上买 78 一个人,我上一次来这里吃还是小时候了。菜色整体还行,都合胃口,有家常菜、薯条、肉扒、沙拉、凉菜、炒饭甚至有老火汤。牛排排队一人一份,只要你吃不腻还可以再来一块。我阿姨说主要还是感觉这里的环境好,可以在高空眺望,无论是落日还是夜景都挺好看的。

晚上又是大人们的麻将牌局,这次我感觉有些许疲惫就没过去了。回到家继续和老王开黑,之后小改了部分新版小窝前台的功能,主要是不太熟悉 Vue 3 的组件编写方式,官方文档给的代码实例也不全(我用的是 JSX,而不是官方写的 Template),期间看到了这篇 Issue,发现我误打误撞用了 Vue 3 的纯函数组件,它仅适用于无状态的组件。最后还是无脑直接参考了 @Innei 的 MX 后台项目,写了一个带状态的截图切换组件,简单总结下差异吧:

  • React 直接写函数组件,Vue 3 这边需要用 defineComponent 方法传入一个对象
  • defineComponent 函数主要有 propssetup 两个参数
  • setup 只能返回一个匿名函数,只能在这个函数里面写判断逻辑,不能像 React 那样直接判断条件返回 JSX

    • 打日志后会发现,重新渲染只会执行返回的匿名函数,setup 函数本身并不会反复执行。如果是 React,每次重新渲染都会执行
IMG_4330 湿地公园湖边 IMG_4343 远眺洪鹤大桥 IMG_4352 观光塔 IMG_4356 湿地走廊 旋转餐厅城市景色 自助 煎牛扒猪扒 旋转餐厅城市夜景 餐厅环境 IMG_4404
开心
概览页 时间轴
奇趣音乐盒 技术源于 Kico Player
Emmm,这里是歌词君