生命周期 = Vue 实例从创建 → 挂载 → 更新 → 销毁的全过程钩子函数computed = 基于依赖缓存的计算属性

一、先明确：computed 不属于生命周期！

生命周期 = Vue 实例从创建 → 挂载 → 更新 → 销毁的全过程钩子函数 computed = 基于依赖缓存的计算属性 两者是完全不同的概念 ，只是会一起按固定顺序执行。

---

二、Vue2 完整生命周期（8 个核心钩子）

按执行顺序：

1. beforeCreate：实例刚创建，data、methods 还不能用
2. created ：实例创建完成，data/methods/computed 已初始化可用（常用！发请求）
3. beforeMount：模板编译完成，还没渲染到页面
4. mounted ：DOM 渲染完成（常用！操作 DOM、定时器）
5. beforeUpdate：数据更新，视图更新前
6. updated：视图更新完成
7. beforeDestroy：实例销毁前（清理定时器 / 事件）
8. destroyed：实例销毁完成

---

三、computed 执行时机 + 和生命周期的顺序

1. 核心结论

• computed 会在 created 之后、beforeMount 之前完成初始化
• computed 不是钩子，不会自动执行，只有用到时才计算
• computed 有缓存：依赖不变，多次访问只算一次

2. 真实执行顺序（最关键）

plaintext

beforeCreate
↓
created （data 初始化完成，computed 可用）
↓
computed 首次计算（当模板中使用到它时）
↓
beforeMount
↓
mounted
↓
data 变化 → 触发 computed 重新计算 → beforeUpdate → updated

3. 一句话记忆

created 后有 computed，beforeMount 前算第一次，数据变了再重新算。

---

四、代码演示（一看就懂）

vue

export default {
  data() {
    return {
      num: 1
    }
  },
  computed: {
    doubleNum() {
      console.log("computed 执行")
      return this.num * 2
    }
  },
  beforeCreate() {
    console.log("beforeCreate")
  },
  created() {
    console.log("created")
  },
  beforeMount() {
    console.log("beforeMount")
  },
  mounted() {
    console.log("mounted")
  }
}

控制台输出顺序

plaintext

beforeCreate
created
computed 执行  （模板用到了它，所以这里执行）
beforeMount
mounted

---

五、computed 最重要 3 个特点

1. 依赖缓存：依赖不变，多次访问直接拿缓存，不重新计算
2. 必须有 return
3. 不能异步、不能修改 data（只读最佳）
4. 只有它依赖的数据变了，才会重新计算

---

六、生命周期 + computed 高频面试题

1. created 和 computed 谁先？

created 先，computed 后

2. computed 和 methods 区别？

• computed：有缓存，依赖不变不执行
• methods：每次调用都执行

3. 什么时候用 computed？

模板里需要复杂计算、过滤、拼接的时候用。

---

总结

1. computed 不属于生命周期钩子，只是和生命周期一起执行
2. 执行顺序：created → computed → beforeMount
3. computed 特点：依赖缓存、用到才计算、必须 return
4. 生命周期核心：created（拿数据）、mounted（操作 DOM）、beforeDestroy（清理）