vue生命周期问题，为什么？

Question

Vue.prototype.appName = 'My App'

Then what would you expect to be logged below?

new Vue({
  data: {
    // Uh oh - appName is *also* the name of the
    // instance property we just defined!
    appName: 'The name of some other app'
  },
  beforeCreate() {
    console.log(this.appName)
  },
  created() {
    console.log(this.appName)
  }
})

It would be "The name of some other app", then "My App", because this.appName is overwritten ([sort of]

Answer 1

你确定不是先My App后 The name of some other app?
beforeCreate的时候没实例化，无appName属性，会去原型链上找(即Vue上)

Answer 2

问题错的，亲测先 "My App"然后"The name of some other app"；
chrome版本 55

Answer 3

the result in my test

Answer 4

生命周期钩子

beforeCreate:在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。

这个生命周期中，data内的数据还没有被观测，因此拿到的是你在Vue.prototype中的appName。

created:实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

这个生命周期中，data已经可以被观测，因此拿到的是data中的appName。