Vue / Nuxt - 已安装:()=>已安装vs:function()

时间:2017-09-24 10:05:44

标签: vue.js vuejs2 nuxt.js

为什么在() =>中使用function()mounted的结果有所不同:

export default {
  mounted: () => {
    this.socket = 'something'
    console.log('mounted')
  },
  methods: {
    submitMessage() {
      console.log(this.socket) // undefined
    }
  }
}

使用function()

export default {
  mounted: function() {
    this.socket = 'something'
    console.log('mounted')
  },
  methods: {
    submitMessage() {
      console.log(this.socket) // something
    }
  }
}

有什么想法吗?

1 个答案:

答案 0 :(得分:5)

您不应该使用箭头函数来定义生命周期钩子,方法......(例如mounted: () => this.socket++)。原因是箭头函数绑定了父上下文,因此这不是您期望的Vue实例,并且this.socket将是未定义的。