“这篇文章不是在"第1天"写的，是在一个连续的、无分心的、自我挣扎的思考时段(Session)中完成的。我的一天可能有3个Session，也可能没有。我不想假装这是按部就班的日记。”

        实话实说，我干了很长一段时间的“AI拼接师”，我感觉每天的工作就是重复无意义的“项目经理告诉我需求->把需求丢给AI->复制AI代码->其他地方出现问题->返工"，非常混论也非常痛苦，完全没有大学时候主动学习然后看着输出成果的那种喜悦。所以我想借助这个项目让我重新找到写代码的快乐（不过工作本身就是痛苦且反人类的，只能算苦中作乐），或者说起码不那么混乱。

        刚开始参照别的牧场网站大概建了这么一个模板：

因为需要轮播图，所以我想”以前都是直接复制AI，这次我自己写行不行？”，于是开始学习，注意到其抽象模型实质上接近一个状态机（大学学的是Unity，虽然没学会什么，但是状态机天天听到耳朵都要起茧子了），然后开始写。。。

轮播图（状态机）-CSDN博客

中间突然发现自己完全不懂v-for指令，然后花了3h去搞懂v-for是干什么的。。。

v-for是干什么的-CSDN博客

这是我写的组件：

<template>
  <div class="carousel">
    <div class="carousel-inner" :style="innerStyle">
      <img v-for="item in list"
       :key="item.id" 
       :src="item.src" 
       class="carousel-item" />
    </div>
    <button class="arrow left" @click="go(-1)">‹</button>
    <button class="arrow right" @click="go(1)">›</button>
    <div class="dots">
      <span
        v-for="(src,i) in list"
        :key="i"
        :class="{active:i===current}"
        @click="current=i"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'

const list = [
  {id :1,src: '/img/farm1.jpg'},
  {id :2,src: '/img/farm2.jpg'},
  {id :3,src: '/img/farm3.jpg'},
  {id :4,src: '/img/farm4.jpg'},
]
const current = ref(0)
const isPlaying = ref(false)
const duration = 3000
let timer = null

const innerStyle = computed(() => ({
  transform: `translateX(-${current.value * 100}%)`,
  transition: 'transform .5s ease'
}))

function go(step) {
  const len = list.length
  current.value = (current.value + step + len) % len
}

function startTimer() {
  stopTimer()
  timer = setInterval(() => go(1), duration)
  isPlaying.value = true
}
function stopTimer() {
  if (timer) {
    clearInterval(timer)
    timer = null
  }
  isPlaying.value = false
}

onMounted(() => startTimer())
onUnmounted(() => stopTimer())
</script>

然后一共花了8+3h，等到做完的一瞬间，我突然问自己”我在干什么？”，花8h去写一个可以直接复用可能一辈子都不需要搞清楚原理的组件？为什么不花30min去找个轮播图组件然后读读文档直接用吗？

我发现自己还是没有摆脱“学生思维”，一定要全部弄懂才去做，事必躬亲，完美主义等等，但是实际上可能一边做一边改才是最好的，可是这样的话那和之前又有什么区别呢？直接让ai帮我写不就行了吗？可是全部给ai的话越写越混乱，维护成本随时间指数级上升，那该怎么办呢？

于是我跳了出来，“大框架和项目基础逻辑一定手写，但是所有可复用的现成的功能全部交给ai，”把ai关在“框架”的轮子里，不能让他污染我的项目，他应该是我最得力的助手。

于是乎，3h去写明白一个v-for似乎就变得非常有意义了，这是vue的基石。

不过写都写了，这个时候再去换现成的轮播图组件让我感觉自己更蠢。。。。

那么现在有了新的问题，原来我写的轮播图是写死了的，也就是只能放牧场图片，现在我想放点其他图片，怎么办呢。

我想到的方法就是非常简单粗暴，再定义几个数组，再写几个v-for或者加上条件判断，也许有用，但是问题是再加多少个数组和多少个v-for那都是一次性的，难道每用一次加一个吗？那也太蠢了。。。

于是我求助了deepseek学长,他告诉我要去

定义props接口——告诉外界“我接受这些参数”

好吧又是一个无比熟悉又无比陌生的概念，熟悉是因为天天见面，陌生是因为我“知其然不知其所以然”，而且这又是个无比重要的基础概念（原来我的基本功已经差劲到这种程度了。。。）

于是有了大概如下代码：

const props = defineProps({
  images: {
    type: Array,      // 必须传入数组
    required: true,   // 必须传！不能为空
    default: () => [] // 默认值（如果没传）
  },
  autoPlay: {
    type: Boolean,
    default: true
  }
})

与此同时我又想起kimi学姐之前说的“ts是你始终绕不过去的必修课”，我想到“也许这就是一个引入和学习ts的绝佳时机”

不过等等，现在暂停手上的工作再去学ts岂不是又犯了老毛病？

不如先跑起来再说？