textlize pricing account
Modern Vue.js Crash Course 2025 | with TypeScript + script setup + Composition API
Cover

00:42:21

2025 现代 Vue.js 速成教程：TypeScript + script setup + Composition API 实战

本教程通过构建完整任务管理应用，全面解析 Vue.js 2025 最新技术栈。你将掌握 TypeScript 类型安全开发、script setup 语法糖、Composition API 状态管理等核心技能，并学习动画效果、组件通信等实战技巧。

开发环境配置

工具链选择

  • 使用 Vite 创建项目：pnpm create vite@latest
  • 选择 Vue + TypeScript 模板
  • 官方 CLI 支持路由(Vue Router)、状态管理(Pinia)等集成

基础配置

  • 单文件组件(SFC)结构：template/script/style 三位一体
  • Pico CSS 快速样式方案
  • Vue Devtools 调试工具安装

核心概念实战

响应式状态管理

ref() 创建基础响应式数据：

const newTask = ref<string>('')

v-model 双向数据绑定：

<input v-model="newTask" />

组件通信模式

Props 向下传递

父组件通过属性传递数据：

<TaskList :tasks="filteredTasks" />

Emits 向上传递

子组件触发自定义事件：

emit('addTask', newTaskValue)

TypeScript 类型安全

使用 defineProps 和 defineEmits：

defineProps<{ tasks: Task[] }>()

高级功能实现

计算属性与状态派生

const totalDone = computed(() => {
  return tasks.value.reduce((total, task) => 
    task.done ? total + 1 : total, 0
  )
})

computed 自动追踪依赖，仅当相关状态变化时重新计算

动画与过渡效果

TransitionGroup 应用：

<TransitionGroup name="task-list" tag="div">
  <div v-for="task in tasks" :key="task.id">
    // 任务项
  </div>
</TransitionGroup>

CSS 动画定义：

.task-list-move {
  transition: transform 0.3s ease;
}

最佳实践总结

架构设计原则

  • 单一职责组件：表单/列表/过滤按钮独立封装
  • 状态提升：共享状态置于最近共同祖先组件
  • 单向数据流：通过 props 向下，事件向上传递

性能优化要点

  • v-for 始终使用 :key 属性
  • computed 替代复杂模板表达式
  • 组件拆分避免不必要的重新渲染

技术演进对比

特性 Options API Composition API + script setup
代码组织 按选项类型(data/methods)分组 按功能逻辑组织相关代码
TypeScript 支持 有限支持 完整类型推断
组件模板 需显式注册组件 自动组件推断
© 2025 textlize.com. all rights reserved. terms of services privacy policy