Во-первых, я думаю, что мне нужно немного остановиться на том, что такое компонент, прежде чем подумать, нужно ли вам их использовать.
На ранних страницах документации используется термин «компонент» для описания пред. определенный набор параметров для создания экземпляра Vue. В этом смысле их можно рассматривать как «классы», хотя технически они не являются классами JavaScript.
Однако термин «компонент» часто используется и для описания экземпляров. В этом смысле вы уже используете компоненты, хотя и один большой компонент.
Очевидно, что термин можно использовать еще более широко, поскольку он не относится к термину Vue.
Стоит отметитьчто компоненты не нужно регистрировать, используя Vue.component. Для приложения нередко иметь много компонентов без использования Vue.component. Вместо этого компоненты можно импортировать локально.
Исходя из вопроса, я предполагаю, что у вас есть основной файл JavaScript, скажем, main.js, который включает в себя весь ваш связанный с Vue JavaScript. Ключевой раздел может выглядеть примерно так:
new Vue({
data () {
return { /* some data */}
},
computed: { /* ... */ },
methods: { /* ... */ }
}).mount('#app')
Говоря условно, экземпляр Vue здесь можно описать как компонент. Если мы будем немного строже, тогда только конфигурация будет считаться компонентом, и даже тогда, только если она «предопределена». Не совсем понятно, что это вообще значит. Например, достаточно ли просто перенести конфигурацию, чтобы сделать ее «предопределенной»?
const App = {
data () {
return { /* some data */ }
},
computed: { /* ... */ },
methods: { /* ... */ }
}
new Vue(App).mount('#app')
Или App необходимо переместить в отдельный файл, чтобы он считался «предварительноdefine '?
Двигаемся дальше ...
Компоненты - это единственный способ разбить ваш шаблон на несколько частей. Они также являются основным способом разделения JavaScript. Вопрос «Нужно ли использовать компоненты?» неявно задает вопрос «Допустимо ли хранить весь мой код в одном файле?» . Этот вопрос относится ко всему программированию, на самом деле это не вопрос Vue.
Если вы довольны тем, что ваше приложение настолько маленькое и такое простое, что его не нужно разбивать на более мелкие части, тогда хорошо,не вводите больше компонентов.
Однако в вопросе упоминаются «изменения». Это означает, что приложение не завершено, что говорит о том, что преждевременно решать, что оно маленькое и простое. Если будет достаточно постоянной работы, чтобы оправдать накладные расходы при написании тестов, маловероятно, что это действительно так просто, как вы предлагали.
Повторное использование, безусловно, не единственная причина разбить приложение нанесколько компонентов, но стоит подумать о том, что вы не хотите ничего использовать повторно. Написание юнит-тестов - это повторное использование. Проблема модульного тестирования монолита не является специфической для Vue проблемой, и обычное решение состоит в том, чтобы разбить код на маленькие тестируемые части. Вы не можете написать модульные тесты без введения подходящих модулей. Конечно, доступны и другие формы тестирования.
Повторное использование через компоненты - это только обратная сторона дублирования. Редко не иметь дублирования, даже в простом приложении. Даже такую простую вещь, как две кнопки с соответствующими классами, можно считать достаточным дублированием, чтобы оправдать введение компонента. Вы могли бы предпочесть избежать ментальных накладных расходов на дополнительную абстракцию.
Есть и другие преимущества для компонентов, но для действительно тривиального применения они вряд ли имеют значение.
Например, когдаОбновления пользовательского интерфейса будут перерисовывать только экземпляры Vue, которые в этом нуждаются. Если все находится в одном экземпляре, ему придется все заново визуализировать.
В качестве другого примера, трудно использовать вычисляемые свойства в сочетании с v-for, поскольку вы не можете передавать аргументы вычисляемому свойству,Вместо этого вам придется использовать метод:
<div v-for="item in items" :class="someMethod(item)">
Если вы введете компонент ...
<some-component v-for="item in items" :item="item">
..., тогда компонент может использовать вместо этого вычисляемое свойство.