Lesson 03 · Vue 3

Vue 3 速成，只学用得上的

你已经会 TypeScript。缺的不是语法，是「界面该怎么描述」这套思路。 全程用项目里的真实文件当教材。

先复习

先说人话：Vue 和 Laya 的根本区别

在 LayaBox 里，你是这样做界面的：

// 你亲手把界面搭出来，也亲手把它改掉
const label = new Laya.Label()
label.text = "血量：" + hp
this.addChild(label)

// hp 变了？你得记得自己去更新
function onHpChange(newHp) {
  label.text = "血量：" + newHp
}

你负责「怎么变」。数据变了，你要亲自找到对应的显示对象、 亲自改它的属性。忘了改，界面就跟数据对不上。

Vue 反过来：

<template>
  <div>血量：{{ hp }}</div>
</template>

<script setup>
const hp = ref(100)
// 以后只要改 hp.value，那个 div 自己会更新
</script>

你只负责「是什么」。你描述「这个 div 里显示 hp」， 然后只管改 hp.value。谁去更新 DOM、什么时候更新，Vue 管。

一、单文件组件（SFC）：三段结构

.vue 文件就是三块拼起来的。看项目里最短的一个真实文件， src/views/GameEditor/cosDownload/index.vue， 一共 51 行，去掉样板后是这样：

<template>
  <!-- 界面长什么样 -->
  <ElButton @click="clickDownloadCosResources()">查找服务器已有文件</ElButton>
</template>

<script lang="ts" setup>
  // 数据和逻辑
  import { ElMessage } from 'element-plus'
  import Fs from 'node:fs'

  const clickDownloadCosResources = async () => {
    // …下载并写文件
    ElMessage({ type: 'success', message: '下载成功' })
  }
</script>

<style lang="less" scoped>
  /* 样式，scoped 表示只作用于本组件 */
</style>

<script setup> 是 Vue 3 的语法糖： 这个块里定义的所有顶层变量和函数，模板里可以直接用， 不需要 return，不需要 this。

二、响应式：ref 和那个烦人的 .value

Vue 需要知道「哪些数据变了要重画界面」。JS 没法监听一个普通变量的赋值， 所以 Vue 把值包进一个对象里，通过这个对象的 getter/setter 做拦截。 这个包装就是 ref。

import { ref } from 'vue'

const delList = ref([])        // 包起来

delList.value = jsonData.data  // 在 script 里必须写 .value

<!-- 但在模板里不用写 .value，Vue 自动拆包 -->
<el-table :data="delList">

ref vs reactive

建议：统一用 ref。多写几个 .value 换来一致性，比记两套规则划算。这也是 Vue 官方文档的倾向。

computed：派生数据

「由别的数据算出来的值」用 computed，它会缓存， 依赖不变就不重算。src/components/PropEditor/Components/Select.vue 里有个现成的：

const getLabel = computed(() => Props.config?.meta?.label || Props.config.summary)

「标签文字优先用 meta.label，没有就用 summary」—— 这种逻辑放 computed 里，模板保持干净。

watch：数据变了要做副作用

同一个文件的下半段：

watch(
  () => Props.row[Props.prop],   // 监听什么
  (val: any) => {                // 变了做什么
    currentData.value = val
  },
  { immediate: true }            // 立即先跑一次
)

immediate: true 表示不等它变，挂载时先执行一次。 在这里是为了让控件初始就显示出当前值。这个选项在项目里出现频率很高。

三、模板语法：五个符号

现在精读一个完整文件。src/views/GameEditor/DelData/index.vue， 91 行，是项目里结构最清晰的页面之一。它的模板：

<template>
  <div class="p-20px w-full">
    <el-table :data="delList">
      <el-table-column prop="excelName" label="表名" />
      <el-table-column prop="id" label="删除ID" />
      <el-table-column prop="data" label="删除数据" show-overflow-tooltip />
      <el-table-column label="操作" fixed="right">
        <template #default="{ row }">
          <el-button type="primary" size="small" @click="revert(row)">恢复</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

v-for 要带 key

src/views/GameEditor/Npc/index.vue 里的例子：

<ElOption
  v-for="item in NpcListData"
  :key="item.id"
  :label="`${item.npcName}(${item.id})`"
  :value="item.id"
/>

:key 让 Vue 知道列表更新时哪一项是哪一项。 用数据本身的唯一 id，不要用数组下标 —— 用下标的话，列表中间插入一项会导致后面全部错位重渲染， 带输入框的列表还会串值。

插槽（slot）：把一段模板传给子组件

上面 DelData 那段里的 <template #default="{ row }"> 就是插槽。 意思是：「el-table-column 你负责画表格列， 但每个单元格里面画什么，我来告诉你 —— 而且请你把当前行的数据 row 递给我」。

这是 Element Plus 组件的常规用法，也是本项目 PropEditor 能做到通用的关键机制。

四、组件之间怎么传东西

看 src/components/PropEditor/Components/Select.vue， 它是被反复复用的叶子组件：

interface PropsType extends ParmasType {
  config: SelectType
}

const Props = defineProps<PropsType>()

defineProps<T>() 是 <script setup> 里声明「我接收哪些参数」的写法，直接用 TS 类型声明，不用写运行时对象。 这对你应该很自然。

父组件传参就是普通的属性绑定（NpcEdit.vue:32-37）：

<PropEditor
  prop="npc"
  :row="ViewData.NPC.currentData"
  :config="NpcConfig.get('npc') || {}"
  :change="modifyData"
/>

子组件怎么往回传

Vue 的标准答案是 emit：子组件声明自己会发出哪些事件， 父组件用 @事件名 接。

// 标准做法（本项目没这么写）
const emit = defineEmits<{ (e: 'change', value: any): void }>()
emit('change', val)

本项目用的是另一种：把回调函数当 prop 传下去。

// src/components/PropEditor/type.ts
export interface ParmasType {
  prop: string
  row: any
  config: ExtendType
  /* 改变事件 - 用于接收改变后的值 */
  change: (value: any, prop?: string) => void   // ← 回调当 prop
}

// src/components/PropEditor/Components/Select.vue
function modify(val: any) {
  Props.change && Props.change(val)
}

五、生命周期

你只需要三个：

六、这个项目里你会看到的坏味道

不是为了批判，是为了让你看到时不困惑、也不模仿。

:class="`label ${
  config?.meta?.class && config?.meta?.class.indexOf('flex-col') > -1
    ? 'w-full'
    : 'w-[calc(38%)]'
} m-1 flex items-center …`"

七、Element Plus：204 个文件在用

界面组件全部来自 Element Plus。你不需要学完，只要知道遇到不认识的 El* 标签就去官网搜组件名，那里的 API 表就是全部答案。

项目里最高频的几个：

真机验证

光看不动手，这一课等于没上。下面每一步都在真实文件上做，做完记得改回来。