2026.6.6

前端框架Vue 3入门

今日学习

今天开始学习Vue 3框架，为后续开发移动端页面做准备。学习掌握了Vue 3的核心新特性：Composition API、setup语法糖、Teleport、Suspense等。深入理解了响应式原理（Proxy代理）、组件生命周期、Props和Emit的用法，以及Pinia状态管理的使用。

代码实践

用Vue 3重写了应急演练系统的前端部分，实现了响应式的数据绑定和组件化开发。创建了可复用的演练计划卡片组件、任务状态标签组件、分页组件，并通过Pinia管理全局状态。

// Vue 3 Composition API
import { ref, computed, onMounted } from 'vue'
import { defineProps, defineEmits } from 'vue'
import { useDrillPlanStore } from '@/stores/drillPlan'

const props = defineProps({
  planId: { type: Number, required: true }
})
const emit = defineEmits(['update', 'delete'])

const planStore = useDrillPlanStore()
const plan = computed(() => planStore.getPlan(props.planId))

onMounted(() => {
  planStore.fetchPlan(props.planId)
})

今日代码量

• Vue组件开发：200行
• Pinia状态管理：80行
• 页面路由配置：50行
• 今日总代码：330行

学习总结

Vue 3的Composition API让代码组织更加清晰，组件化开发可以大幅提升代码复用率。