跳转到内容
mCourse

生命周期、侦听器与样式

你将学会什么

Section titled “你将学会什么”
  • 在正确的生命周期钩子里执行请求与清理
  • 用 watch 监听变化执行副作用，并知道它的边界
  • 处理类名冲突，理解样式作用域

正文

Section titled “正文”

如果你需要在组件创建或挂载后执行一次逻辑，优先先理解这几个最小生命周期：

  • onMounted：组件已经挂载到页面上，适合发起请求或读取 DOM
  • onUnmounted：组件即将销毁，适合清理定时器或监听器
  • onUpdated：响应式数据变化导致视图更新后执行

学生项目里，最常见的误用是“一上来就想在组件外部直接操作 DOM”。先记住：涉及页面元素，优先在组件内部处理。

watch 适合监听某个响应式变量的变化，并执行副作用，例如接口请求或路由跳转。最小可用的写法是：

watch(name, (newVal, oldVal) => {
  console.log('名字从', oldVal, '变成', newVal)
})

不建议把所有逻辑都写进 watch。很多学生为了“数据变了自动处理”，把大量逻辑塞进侦听器，导致调用链不可解释。更好的原则是：派生状态优先用 computed，用户行为优先用事件处理，只有副作用才放进 watch。

样式方面，Vue3 默认不会像某些框架那样自动样式隔离。如果你发现类名冲突，优先从这几个方向解决：给组件容器增加更具体的前缀类名，用 BEM 或模块化思路组织类名，必要时再用 CSS Modules 或 Scoped CSS。学生项目里，最常见的样式问题不是“不会隔离”，而是“组件结构太扁平，导致类名重复”。

动手练

Section titled “动手练”

知识检查

Section titled “知识检查”

先自己回答，再看答案：

  1. onMounted 适合做什么？
  2. 什么样的逻辑适合放进 watch？
  3. 发现类名冲突时，第一步应该做什么？
参考答案
  1. 组件挂载到页面后执行一次的逻辑，比如发起请求或读取 DOM。
  2. 只有副作用（接口请求、路由跳转等）适合放 watch，派生状态用 computed，用户行为用事件。
  3. 给组件容器增加更具体的前缀类名，或先检查组件结构是否太扁平导致类名重复。

本节小结

Section titled “本节小结”
  • 生命周期三件套：onMounted、onUnmounted、onUpdated，各管各的时机
  • watch 只放副作用，派生状态交给 computed，用户行为交给事件
  • 类名冲突优先靠前缀类名与合理结构解决，必要时再用 Scoped CSS
生命周期与侦听器小测
x
1 / 3

onMounted 适合做什么？