javascript - Vue.js 中 'data:' 、 'data: ()' 和 'data()' 之间有什么区别

Question

在 Vue.js到目前为止，我已经找到了两种定义数据的方法:data: {} 和 data() { return; }.

data: {
    defaultLayout: 'default'
}

data() {
    return {
        defaultLayout: 'default'
    }
}

到目前为止，我对第三种方法没有任何线索:data: () => ({})。它与上面两个有何不同。

data: () => ({
    defaultLayout: 'default'
})

Answer 1

只有你的第二个例子是有效的。特别是避免对 data 使用箭头函数，它将 this 设置为全局，这样您将无法引用 vue 实例中的任何内容。

data: () => ({
    someValue = 'default',
    defaultLayout: this.someValue //!!undefined!!!
})

唯一有效的:

data() {
    return {
        defaultLayout: 'default'
    }
}