Vue生命周期钩子函数

下面先附上官网的一张图示,附有注释讲解。随着你的不断学习和使用,它的参考价值会越来越高。


所有的生命周期钩子自动绑定 this 上下文到实例中,因此你可以访问数据,对属性和方法进行运算。这意味着 你不能使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos())。这是因为箭头函数绑定了父上下文,因此 this与你期待的 Vue 实例不同。
  • beforeCreate

在实例创建之前,data中的数据,methods、watch、computed里的方法都还不能访问 打印出来全都是undefined。那么问题来了:如何在这个生命周期获取data中的数据呢?

异步方式获取data:this.$nextTick或者setTimeout都行。相当于在初始化前告诉容器,等整个视图都渲染完毕再跑里面的代码。这种方式别说拿data了,拿渲染完DOM都OK~

同步方式获取data:  在beforeCreate前,所有的options都会先存到vm.$options中, 就是直接从this.$options.data里去拿。比如this.$options.data()[key]就好。如下:

export default {
  name: 'App',
  data () {
    return {
      b: {
        name: 'clearlove'
      }
    }
  },
  beforeCreate () {
    console.log(this.$options.data()['b'], '实例创建之前')    //{ name: 'clearlove'} '实例创建之前'
  }
} 
// this.$options.data就是上方的data函数复制代码

但是实际情况中,从来没遇到过需要在组件还没初始化就去拿data的……

  • created

实例已经创建,可以直接使用实例中的数据和方法,但是还不能对DOM节点进行访问。即$el属性不可见。该阶段允许进行异步请求




                    
                    

你可能感兴趣的:(Vue生命周期钩子函数)