8.1 生命周期概述

先来聊聊什么是生命周期钩子。一个Vue组件从被创建到最终销毁，并不是一步到位的，它会经历好几个关键的生命周期阶段。而Vue呢，在每个阶段都会开放一些特定的函数接口——也就是传说中的“生命周期钩子”——让开发者有机会在恰当的时间点插入自己的逻辑。

说得更直白一点：这些钩子就是Vue在关键时刻对你说的一句话——“嘿，现在你可以干点什么了”。

• 先说说它们之间的规律：

• Vue2的生命周期钩子命名风格比较传统，比如beforeCreate、created

• Vue3则引入了组合式API风格的命名，比如onMounted、onUpdated

• 日常开发中，最常用的几个钩子莫过于：onMounted（挂载完毕）、onUpdated（更新完毕）、onBeforeUnmount（卸载之前）。这几个几乎是天天打交道的角色。

8.2 创建阶段

1、Vue2（beforeCreate、created）

在Vue2里，创建阶段有两个钩子：beforeCreate和created。一个在创建前执行，一个在创建完成后执行。它们之间最大的区别，说白了就是数据有没有初始化好。看个例子就清楚了：

 复制代码export default {
  data() {
    return {
      sum: 1
    }
  },
  beforeCreate() {
    console.log('创建前');
    console.log(this.sum);
  },
  created() {
    console.log('创建完毕');
    console.log(this.sum);
  }
}  

执行beforeCreate时，data、methods、watch、computed这些都还没初始化，所以此时拿不到任何数据，自然也调不了watch。

到了created阶段，data、methods、watch、computed都已经是就绪状态，数据已经可以正常访问了。

不过关于watch，需要多说一句：虽然它在created时已经初始化好了，但它的回调函数并不会自动执行，只是被准备好了，等着数据变化时才触发。默认情况（immediate: false）下，watch的回调不会在组件创建时执行，只有监听的数据发生变化后才出手。而如果设置了immediate: true，那watch的回调会在created钩子之后立即执行一次。

2、Vue3（setup）

Vue3的做法就更干脆了——它不再把创建前和创建完成分成两个钩子，而是统一用setup搞定。它不仅囊括了Vue2的beforeCreate和created的功能，而且所有业务逻辑（数据请求、事件监听、计算属性、副作用管理等等）都可以直接写在这个setup里。

关于setup，目前有两种写法：

(1) 普通setup()

 复制代码<script>
import { ref } from 'vue'export default {
  setup() {
    const count = ref(0)
    const increment = () => count.value++
    
    //  如果没有 return，模板就无法使用 count 和 increment
    return {
      count,
      increment
    }
  }
}
script>

(2)