В чем разница между «data:», «data: ()» и «data ()» в Vue.js

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

Функции стрелок являются сокращениями для возврата значения.Если вы напишите этот код:

() => "aaa"

Возвращает строку "aaa".Так что там есть скрытое возвращение.Сохранение этого в моем, если мы посмотрим:

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

Возвращает объект, который имеет свойство "defaultLayout".Давайте посмотрим на ваш первый пример кода.

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

равен:

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

Таким образом, второй и третий примеры кода практически равны.Есть только одно отличие, функции стрелок имеют лексическое «это».

Ваш первый пример - плохая практика. Вы можете прочитать об этом здесь.