岗位实践报告附带工作日志（手写内容）

第 1 天：项目初始化与生态系统搭建

日 期 2025 年 9 月 15 日
工作内容与进度 今天我专注于项目的基础框架搭建和环境配置。我使用 Vue CLI 或 Vite 初始化了项目，并立即集成了 Vue 3 生态中的两个关键库：Vue Router 用于实现前端路由，以及 Pinia 用于集中式状态管理。在 main.js 中，我完成了这些库的应用级注册，确保了项目的模块化基础。此外，为了美化界面并加快开发速度，我引入并全局注册了 Element Plus UI 组件库。最后，我在 App.vue 中配置了基础的导航链接和 <router-view>。
完成度 10%

第 2 天：响应式核心与计算属性深入

日 期 2025 年 9 月 16 日
工作内容与进度 今天我的核心工作是实践 Vue 3 的 Composition API 响应式系统。在 HomeView.vue 中，我使用 ref 声明了基本类型数据（如 count），并用 reactive 声明了复杂的对象状态（如 product）。我深入学习并实现了 computed 属性。不仅实现了简单的商品总价格计算，我还进一步实现了一个带有 setter 的计算属性 (greeting)。这个 setter 允许我通过修改 greeting 的值来反向影响原始的响应式数据 (name)，这展示了计算属性的强大和灵活性。
完成度 20%

第 3 天：侦听器、模板引用与事件机制

日 期 2025 年 9 月 18 日
工作内容与进度 今天主要完成了数据监听和交互功能。我使用 watch 侦听器 实现了两个功能：一个用于监听 count 的变化并输出详细的变更消息；另一个用于监听 product.quantity，并在数量超过阈值时触发 Element Plus 的警告提示。在交互方面，我实践了 模板引用（Template Refs）。通过在 <input> 元素上设置 ref="inputRef"，并在 onMounted 钩子中确认引用可用，我编写了一个方法来调用 inputRef.value.focus()，成功实现了点击按钮聚焦输入框的功能。
完成度 30%

第 4 天：模板语法、条件渲染与列表渲染

日 期 2025 年 9 月 19 日
工作内容与进度 今天专注于完善 HomeView.vue 的 模板渲染能力。我实现了 条件渲染，使用了 v-if/v-else-if 来根据状态展示不同的内容，并使用 v-show 来演示基于 CSS 的切换方式。在 列表渲染 方面，我不仅用 v-for 循环渲染了数组，还演示了如何遍历对象的属性 (key 和 value)。最后，我详细实践了 类与样式绑定，通过 :class 绑定了动态的对象和数组，并用 :style 绑定了内联样式对象，实现了 UI 随数据变化的动态效果。
完成度 40%

第 5 天：Pinia Store 架构与异步 Action

日 期 2025 年 9 月 22 日
工作内容与进度 我开始构建 Pinia 状态管理模块 (counter.js)。我定义了 Store 的 state，用于存放全局数据（count、apiData、loading），并编写了 getters，如 doubleCount，以计算派生状态。最重要的部分是编写 actions。我创建了 fetchData 这个 异步 Action，它模拟了从服务器获取数据的过程。在这个 Action 内部，我管理了 loading 状态的切换，并在 try...catch...finally 结构中实现了请求的成功与失败处理，确保了数据流的健壮性。
完成度 50%

第 6 天：Pinia 与 UI 组件的结合

日 期 2025 年 9 月 23 日
工作内容与进度 今天我将 Pinia Store 的逻辑集成到 DataView.vue 视图中。我使用了 Vue 的 onMounted 生命周期钩子，在组件加载后立即调用 Pinia 的 fetchData Action 来启动异步数据获取。在模板中，我利用 v-loading 指令和 Element Plus 的加载组件，通过监听 Pinia Store 中的 loading 状态来自动展示加载动画，实现了优雅的数据加载提示。同时，我展示了如何直接在模板中调用 Pinia 的 Getter (doubleCount) 和 Action (increment)。
完成度 60%

第 7 天：组件 Props、Events 与 v-model 实践

日 期 2025 年 9 月 25 日
工作内容与进度 我开始深入组件间通信。创建了 MyChildComponent.vue 并实现了 Props 和 Events 的标准用法。我使用 defineProps 接收父组件数据 (title)，并使用 defineEmits 声明了自定义事件 (custom-click)。随后，我实践了 Vue 3 的组件 v-model 机制：子组件接收 modelValue prop，并在用户输入时派发 update:modelValue 事件。这使得父组件 ComponentDemo.vue 可以使用简洁的 v-model 语法实现父子双向绑定。
完成度 70%

第 8 天：插槽机制与透传 Attributes 演示

日 期 2025 年 9 月 26 日
工作内容与进度 今天我专注于 插槽（Slots）。在 MyChildComponent.vue 中，我定义了 匿名插槽、具名插槽 (#header)，以实现父组件内容填充的灵活性。最重要的是，我实现了作用域插槽：通过在 <slot> 标签上绑定 footMsg 数据，使得父组件在使用该插槽时可以访问子组件内部的数据。此外，我通过在父组件上添加一个未被 props 接收的 class 属性，验证了 透传 Attributes 会自动应用到子组件的根元素上。
完成度 80%

第 9 天：依赖注入与多级通信

日 期 2025 年 10 月 9 日
工作内容与进度 我实现了 依赖注入（Provide / Inject） 这一跨多级组件通信的强大工具。在 ComponentDemo.vue 父组件中，我使用 provide 注入了一个响应式的共享数据 (providedData)。随后，我创建了嵌套的 InjectDemo.vue 组件，使用 inject 成功接收到该数据。我通过在父组件中修改 providedData，观察到 InjectDemo.vue 中的数据也实时更新，验证了注入的响应性。这为解决深层组件树的 Prop 逐级传递问题提供了解决方案。
完成度 90%

第 10 天：异步组件、Suspense 与项目收尾

日 期 2025 年 10 月 10 日
工作内容与进度 我完成了最后一个高级特性：异步组件。我使用 defineAsyncComponent 模拟了一个需要延迟加载的组件，用于演示代码分割和性能优化的概念。在 ComponentDemo.vue 中，我使用了 <Suspense> 组件来处理异步组件的加载状态，并提供了 fallback 占位内容，避免了白屏。最后，我对项目进行了全面自查，确保所有 Vue 3 的特性（从响应式到路由、从 Pinia 到高级组件）都已正确实现并能够演示，标志着本次实训项目的主体功能开发完成。
完成度 100%