rou/front-end-example
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
front-end-example/08-vue3
History
charlie d0d8be443b feat: Add Vue3 exercises and interview plan 
- Introduced Vue3 exercises covering composable API, reactivity, lifecycle hooks, and built-in components.
- Added structured interview plan for frontend candidates focusing on HTML, CSS, JavaScript, TypeScript, and Vue.
- Included starter files for each exercise and detailed README documentation for guidance.
2026-03-24 23:02:58 +08:00
..
01-create-app-and-ref
feat: Add Vue3 exercises and interview plan
2026-03-24 23:02:58 +08:00
02-reactive-and-computed
feat: Add Vue3 exercises and interview plan
2026-03-24 23:02:58 +08:00
03-watch-and-watch-effect
feat: Add Vue3 exercises and interview plan
2026-03-24 23:02:58 +08:00
04-lifecycle-and-template-ref
feat: Add Vue3 exercises and interview plan
2026-03-24 23:02:58 +08:00
05-props-and-emits
feat: Add Vue3 exercises and interview plan
2026-03-24 23:02:58 +08:00
06-slots-and-provide-inject
feat: Add Vue3 exercises and interview plan
2026-03-24 23:02:58 +08:00
07-composable-and-async
feat: Add Vue3 exercises and interview plan
2026-03-24 23:02:58 +08:00
08-final-dashboard
feat: Add Vue3 exercises and interview plan
2026-03-24 23:02:58 +08:00
09-reactivity-helpers
feat: Add Vue3 exercises and interview plan
2026-03-24 23:02:58 +08:00
10-next-tick-and-component-v-model
feat: Add Vue3 exercises and interview plan
2026-03-24 23:02:58 +08:00
11-before-hooks-and-expose
feat: Add Vue3 exercises and interview plan
2026-03-24 23:02:58 +08:00
12-built-in-components
feat: Add Vue3 exercises and interview plan
2026-03-24 23:02:58 +08:00
13-script-setup-macros
feat: Add Vue3 exercises and interview plan
2026-03-24 23:02:58 +08:00
README.md
feat: Add Vue3 exercises and interview plan
2026-03-24 23:02:58 +08:00

README.md

Vue3（组合式 API + 响应式原理）

你的学习文档里这一章的定位是 Vue3（组合式API + 响应式原理）。这一章我按这个方向来拆，不再重复 Vue2 的 Options API 主线，而是重点转到 Vue3 的组合式写法和响应式思维。

学完后你应该掌握

  • Vue3 和 Vue2 的核心差异
  • createApp
  • setup()
  • ref
  • reactive
  • toRef
  • toRefs
  • readonly
  • computed
  • watch
  • watchEffect
  • nextTick
  • 组合式 API 生命周期
  • 模板 ref
  • props 和 emit
  • 组件 v-model
  • slot
  • provide / inject
  • expose
  • composable 的基本抽离方式
  • script setup
  • defineProps
  • defineEmits
  • defineExpose
  • Teleport
  • Suspense
  • Transition
  • 如何用 Vue3 写一个小型管理面板

这一章在解决什么

Vue2 更强调“选项式组织”。

Vue3 这一章要解决的是：

  • 逻辑如何按功能组织，而不是按选项分散
  • 响应式数据如何在 setup() 里组合
  • 一段可复用逻辑如何抽成 composable
  • 组件之间如何在组合式 API 下继续通信

全部知识点清单

基础入口

  • createApp
  • setup()
  • return

响应式核心

  • ref
  • reactive
  • toRef
  • toRefs
  • readonly
  • computed
  • watch
  • watchEffect
  • nextTick

生命周期与 DOM

  • onBeforeMount
  • onMounted
  • onBeforeUpdate
  • onUpdated
  • onBeforeUnmount
  • onUnmounted
  • 模板 ref
  • expose

组件通信

  • props
  • emit
  • 组件 v-model
  • slot
  • provide
  • inject

逻辑复用

  • composable
  • 异步状态管理
  • loading
  • error

工程化语法与内置组件

  • script setup
  • defineProps
  • defineEmits
  • defineExpose
  • Teleport
  • Suspense
  • Transition

学习顺序

  1. createApp、setup() 和 ref
  2. reactive 和 computed
  3. watch 和 watchEffect
  4. 生命周期和模板 ref
  5. props 和 emit
  6. slot 与 provide / inject
  7. composable 与异步状态
  8. toRefs、readonly 等响应式辅助工具
  9. nextTick 和组件 v-model
  10. before 系列生命周期与 expose
  11. Teleport、Suspense、Transition
  12. script setup 宏
  13. 综合小页面

练习目录

说明

  • 这一章只提供 starter，不提供 answer
  • 为了降低门槛，练习使用浏览器 CDN 版本的 Vue3
  • 13-script-setup-macros 是 SFC 语法练习，文件是 .vue starter，不是直接双击运行的 HTML
  • 如果后面你要把这一章升级成 Vite + Vue3，我可以再继续补工程化版本