beforeCreate在Vue2生命周期里处于啥位置？

terry 7小时前阅读数 12 #Vue

文章标签 Vue2 生命周期

不少刚学Vue2的同学，对生命周期里的beforeCreate阶段总是犯迷糊——这阶段能干啥？啥时候用？和其他阶段有啥区别？今天就把beforeCreate的门道掰开揉碎讲清楚，不管是理解原理还是实际开发踩坑,都能有收获。

得先理清Vue2实例从“出生”到“能干活”的步骤，当你写`new Vue({...})`时，Vue内部会启动一系列初始化流程：先给实例分配基础的生命周期属性（$parent`、`$children`这些，对应源码里的`initLifecycle`），接着处理父组件传过来的事件（`initEvents`），然后准备好渲染相关的工具（$createElement`，对应`initRender`）。

做完这三步，就会触发beforeCreate钩子函数。注意哦，这时候“数据观测”和“事件/监听器配置”还没开始呢——说白点，组件里的data、methods、computed这些核心内容，此时连初始化都没做，所以你在beforeCreate里想访问this.msg（假设data里有msg），得到的肯定是undefined。

beforeCreate阶段能拿到、拿不到哪些东西？

先看能拿到的：Vue实例本身的一些“基础配置”能访问到，比如this.$options。$options里存着你写的组件配置，像data函数、methods对象、自定义的props或者插件注入的属性，都能在$options里找到痕迹，举个例子，如果你在组件里写了customOption: 'test'，那在beforeCreate里打印this.$options.customOption，就能拿到'test'。

再看拿不到的：这阶段最容易踩坑的点就在这。data里的响应式数据？拿不到，因为数据观测（把data变成响应式）还没做；methods里的方法？也拿不到，因为方法绑定到实例上是在后续步骤；甚至连页面的DOM元素（$el）都没影，毕竟渲染流程还没开始呢，打个比方，你在beforeCreate里写console.log(this.msg)（假设data里有msg: 'hello'），控制台只会输出undefined，因为data还没被“激活”成响应式数据。

实际开发中beforeCreate能用来做什么？

虽说beforeCreate阶段“能拿到的资源不多”，但特定场景下它特别好用，举几个常见例子：

场景1：全局资源的提前初始化

如果有一些不依赖组件内数据的全局操作，比如建立WebSocket长连接、初始化全局事件总线（像Vuex的store其实也可以在更早阶段准备，但一般项目里会在入口文件处理），举个实际代码：

new Vue({
  beforeCreate() {
    // 建立WebSocket连接，不需要组件内数据
    this.socket = new WebSocket('ws://your-server-url');
    this.socket.onopen = () => {
      console.log('WebSocket连接成功');
    };
  },
  created() {
    // 后续如果要发消息，依赖data里的用户信息，就放created（此时data已初始化）
    this.socket.send(JSON.stringify(this.userInfo)); 
  }
})

这里beforeCreate负责“搭好通信管道”，后续需要数据时，created阶段已经能拿到data，分工很明确。

场景2：解析$options里的自定义配置

有些组件库或业务组件，会通过$options传递自定义参数，beforeCreate是解析这些参数的好时机，比如做一个权限控制组件，通过$options配置权限标识：

Vue.component('AuthButton', {
  beforeCreate() {
    const { auth } = this.$options; // 假设使用时写了auth: 'admin'
    if (!checkPermission(auth)) { // 自定义权限检查函数
      this.$options.render = () => null; // 没有权限就渲染空内容
    }
  },
  // ...其他配置
})

因为beforeCreate能拿到$options，所以可以提前根据配置调整组件行为，不用等数据初始化完再处理。

场景3：无状态的初始化逻辑

比如给实例绑定一些不依赖响应式数据的工具方法，假设你有个全局错误处理函数，想挂载到Vue实例上，又不需要组件内的数据支持，就可以放在beforeCreate：

new Vue({
  beforeCreate() {
    this.handleError = (err) => {
      console.error('全局错误捕获：', err);
      // 这里不需要组件数据，纯逻辑处理
    };
  },
  mounted() {
    // 模拟异步错误
    setTimeout(() => {
      try {
        throw new Error('测试错误');
      } catch (err) {
        this.handleError(err); // mounted时能访问到beforeCreate定义的方法
      }
    }, 1000);
  }
})

这种“先把工具备好，后续随时用”的场景，beforeCreate很合适，因为不需要等data这些资源就位。

beforeCreate和created有啥本质区别？

很多同学会把这两个钩子搞混，核心区别在“数据是否准备好”和“能做的事”上：

生命周期阶段不同

beforeCreate在initState（初始化data、methods、computed等）之前触发；而created在initState之后触发，这意味着，created阶段已经完成了数据观测和方法绑定，所以能访问到响应式数据和方法。

可访问的资源不同

在beforeCreate里，this.data、this.methods这些都是undefined；但到了created，this.msg（data里的属性）能正常访问，this.methodA（methods里的方法）也能调用，举个对比代码：

new Vue({
  data() { return { msg: 'hello' } },
  methods: { sayHi() { console.log(this.msg) } },
  beforeCreate() {
    console.log(this.msg); // undefined
    this.sayHi(); // 报错：this.sayHi is not a function
  },
  created() {
    console.log(this.msg); // 'hello'
    this.sayHi(); // 正常输出'hello'
  }
})

使用场景不同

beforeCreate适合做“无依赖的初始化”，比如全局连接、解析配置；created适合做“依赖数据的逻辑”，比如根据data里的用户信息发请求、初始化第三方库（需要传数据配置的情况）。

用beforeCreate时容易踩哪些坑？

知道了beforeCreate的特点，还要避开这些常见“雷区”：

坑1：误以为能访问data/methods

新手常犯的错：在beforeCreate里写this.msg = '修改数据'或者调用methods里的方法，但此时data还没变成响应式，methods也没绑定到实例，这么写要么没效果，要么直接报错，操作数据、调用方法，至少要等到created阶段。

坑2：在beforeCreate里操作DOM

DOM渲染是在mount阶段才开始的（触发mounted钩子时，$el才会挂载到页面）。beforeCreate阶段连虚拟DOM都没生成，更别说真实DOM了，要是在这阶段写document.getElementById('xxx')，拿到的肯定是null，完全白忙活。

坑3：和其他生命周期的执行顺序搞混

比如有同学想在beforeCreate里用inject拿到父组件的数据，但Vue2里inject的处理是在beforeCreate之后（initInjections是在beforeCreate之后执行的），所以beforeCreate里根本拿不到inject，逻辑就会失效，得清楚每个生命周期的前后步骤，再决定代码放哪。

从Vue源码角度看beforeCreate的执行时机（进阶理解）

如果想更深入，得扒一扒Vue2的源码逻辑，当执行new Vue()时，会调用实例的_init方法（这是Vue实例初始化的核心），在_init里，步骤大概是这样：

调用initLifecycle(vm)：给实例设置$parent、$children、$root等生命周期属性。
调用initEvents(vm)：处理父组件通过v-on传入的事件，给实例绑定事件。
调用initRender(vm)：创建$slots、$scopedSlots，还有用来创建VNode的$createElement方法。
调用callHook(vm, 'beforeCreate')：触发beforeCreate钩子，这就是我们写的beforeCreate函数执行的时机。
之后才会执行initInjections(vm)（处理inject选项，从父组件拿注入的数据）、initState(vm)（处理data、methods、computed、watch）、initProvide(vm)（处理provide选项，给子组件提供数据）。