vue生命周期之beforeCreate--获取data中的数据/methods中的方法

vue生命周期之beforeCreate

  最近在项目开发过程中遇到了一个非常有意思的问题：
    在页面初始化前需要调用两个方法调用接口获取后续需要用到的数据去渲染页面。
  最初我的解决办法是在生命周期created中首先调用这两个方法，然后后续的方法都使用异步方法setTimeout来进行(亲测使用另一种异步方法this.$nextTick方法并未生效)，这样就能基本实现我的需求。但是这样总感觉很奇怪。于是我又回顾了一下vue生命周期相关的知识，才想起来在created之前还有个beforeCreate提供给我们添加代码逻辑的机会。于是我便进行了实验
  当我在beforeCreate中写入如下代码后：

beforeCreate() {
  this.test1()
  this.test2()
},
created() {},
methods: {
  test1() { console.log('this is test1') },
  test2() { console.log('this is test2') },
}

  运行代码后，控制台会报this.test1()和this.test2() is not a function的错误.

  原来，vue在beforeCreate时期是获取不到data及methods里面的数据及方法的，不过还是有办法可以去获取到的，我们可以采用异步的方式，使用this.$nextTick或setTimeout，代码如下：

beforeCreate() {
  this.$nextTick(() => {
    this.test1()
    this.test2()
  })
  // 或者
  /*
  setTimeout(() => {
	this.test1()
	this.test2()
  },0)
  */
},
created() {},
methods: {
  test1() { console.log('this is test1') },
  test2() { console.log('this is test2') },
}

  这样，我们就能在页面初始化前去调用这两个方法啦😁