Question

到目前为止，在Vue.js文档中，我发现了两种定义数据的方式：data: {}和data() { return; }。

data: {
    defaultLayout: 'default'
}

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

到目前为止，我对第三种方法还没有任何线索：data: () => ({})。它的制作方式不同于上述两者。

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

Answer 1

在对象文字内部，

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

是

的简写

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

您可以使用箭头功能编写它：

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

Answer 2

只有第二个示例是有效的。尤其要避免为>>> qty_of_nuls = 2 >>> df.iloc[df[(df.isnull().sum(axis=1) >=qty_of_nuls)].index] 0 1 2 3 1 0.0 NaN 0.0 NaN 4 NaN 0.0 NaN NaN使用箭头功能，它会将data设置为全局，因此您将无法引用vue实例中的任何内容。

this

唯一有效的一个：

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

Answer 3

箭头函数是返回值的简写形式。如果您编写此代码：

export default {                                                                                                                                                                                                                                             
    props: ['NumStars', 'RecipeName'],                                                                                                                                                                                                                       
    data() {                                                                                                                                                                                                                                                 
        return{                                                                                                                                                                                                                                              
            stars: null,                                                                                                                                                                                                                            
            recipe: null,                                                                                                                                                                                                                         
        }                                                                                                                                                                                                                                                    
    },
    created () {
        this.stars = this.NumStars   
        this.recipe = this.RecipeName
    },                                                                                                                                                                                                                                                       
}

它返回“ aaa”字符串。因此，那里有一个隐藏的return语句。如果我们查看以下内容，请保留在我的手中：

() => "aaa"

返回一个具有“ defaultLayout”属性的对象。让我们看一下您的第一个代码示例。

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

等于：

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

因此第二和第三代码样本几乎相等。仅有一个区别，箭头函数具有词法“ this”。

您的第一个样本是不好的做法。 You can read it about it here.

Vue.js中'data：'，'data：（）'和'data（）'有什么区别

3 个答案: