javascript - (Why) should I *always* use components in any vue.js app, however simple? - Stack Overflow

admin管理员组

文章数量:1024652

I am just getting started with vue.js, and already created most of the very small functionality I need from just the first getting started chapters of the documentation.

Now I want to add some tests to ensure my functionality always works after changes (normally I do TDD but this time I had to learn vue first and decide if i keep using it).

So looking for documentation I basically see that just about every documentation/howto on vue testing is about testing ponents. I really found none else.

This leads me to the question as stated in the subject:

Is it a necessary practice to use vue ponents, even for the most simple application, when I have definitely nothing that i want to reuse as a ponent? Besides the current case of only finding documentation on how to test a ponentized vue app, will I run in other problems?

I searched the web and the vue docs(at least there I'd hope for a sentence of explanation if and why I should always use ponents in the "essentials/Components basics" chapter, but dont find it...), and here, but I couldn't find a clue if and why it might be a generally bad idea not to use ponents.

Based on the questions I see in ments, it seems necessary to explain why I even ask such a question:

• I don't criticize ponents in general or say they are a bad idea - I see that basically abstraction and separation of concerns is often helpful, even important in many cases.
• At the same time, for any kind of abstraction, layering, and separation, there is a line below which introducing it brings more overhead in terms of additional files, glue code to put things together, and tools needed to use it (in the case of vue ponents special editors capable of properly displaying and syntax highlighting .vue files) than advantages.
• The vue documentation itself starts without ponents, which in my understanding suggests that not all users should use ponents in any case.
• It seemed to me that I am pretty close to this line, and I was looking for advice and reasons if I should consider my app being above the line so I should introduce ponents, or I can assume I am below. Answers I thought of would be like "even though you might not benefit a lot from ponents, and will have to add 3 more files to your 3 files app, doubling the number, it's highly remend to use them, because nearly all documentation, and most tooling for vue assumes ponents being used." - or "Just go ahead, introduce ponents when you think it fits". I got a helpful answer in the meantime that I marked as such.

I am just getting started with vue.js, and already created most of the very small functionality I need from just the first getting started chapters of the documentation.

Now I want to add some tests to ensure my functionality always works after changes (normally I do TDD but this time I had to learn vue first and decide if i keep using it).

So looking for documentation I basically see that just about every documentation/howto on vue testing is about testing ponents. I really found none else.

This leads me to the question as stated in the subject:

Is it a necessary practice to use vue ponents, even for the most simple application, when I have definitely nothing that i want to reuse as a ponent? Besides the current case of only finding documentation on how to test a ponentized vue app, will I run in other problems?

I searched the web and the vue docs(at least there I'd hope for a sentence of explanation if and why I should always use ponents in the "essentials/Components basics" chapter, but dont find it...), and here, but I couldn't find a clue if and why it might be a generally bad idea not to use ponents.

Based on the questions I see in ments, it seems necessary to explain why I even ask such a question:

• I don't criticize ponents in general or say they are a bad idea - I see that basically abstraction and separation of concerns is often helpful, even important in many cases.
• At the same time, for any kind of abstraction, layering, and separation, there is a line below which introducing it brings more overhead in terms of additional files, glue code to put things together, and tools needed to use it (in the case of vue ponents special editors capable of properly displaying and syntax highlighting .vue files) than advantages.
• The vue documentation itself starts without ponents, which in my understanding suggests that not all users should use ponents in any case.
• It seemed to me that I am pretty close to this line, and I was looking for advice and reasons if I should consider my app being above the line so I should introduce ponents, or I can assume I am below. Answers I thought of would be like "even though you might not benefit a lot from ponents, and will have to add 3 more files to your 3 files app, doubling the number, it's highly remend to use them, because nearly all documentation, and most tooling for vue assumes ponents being used." - or "Just go ahead, introduce ponents when you think it fits". I got a helpful answer in the meantime that I marked as such.

• javascript
• vue.js
• vuejs2
• vue-ponent

Share Improve this question Follow edited Oct 11, 2019 at 13:33 Henning asked Oct 4, 2019 at 19:55 HenningHenning 1,57411 gold badge1515 silver badges2626 bronze badges 6

• 2 If you have an app so simple, then why are you even using Vue? – VLAZ Commented Oct 4, 2019 at 19:59
• 2 Nobody is going to call the police on you if you don't create ponents. Similarly, you can toss all of the logic for your application into a single function. It's ultimately up to you. Sticking to best practices (like SRP in this case) will likely result in more maintainable software. – Tom Faltesek Commented Oct 4, 2019 at 20:06
• @TomFaltesek yes I know that good architecture is helpful. But as I wrote, I also know that too much abstraction and more layers than necessary is, well too much and not necessary. I'm not asking if someone will call the police, but hoped to hear from someone with more vue experience why it's strongly remended to always use ponents. – Henning Commented Oct 4, 2019 at 20:23
• @VLAZ (rephrasing previous ment) I like the data model and templating functions and my app seems plex enough to use vue for that.I just don't see how I benefit from ponents. The vue documentation itself does not start with ponents, but adds them later without explaining if/why they should always be used, that's why I ask here. From your ment I understand, you think everything plex enough to use vue is also always plex enough for ponents, is it that what you want to tell me? – Henning Commented Oct 4, 2019 at 20:38
• What do you have against using ponents? A ponent is just a simple abstraction over a piece of UI, there's nothing wrong with a ponent that is only used in one place. Perhaps you can explain why this is a problem for you. – Jake Holzinger Commented Oct 4, 2019 at 23:45

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 7

Firstly, I think I need to dwell a little on what a ponent is before considering whether you need to use them.

The early pages on the documentation use the term 'ponent' to describe a pre-defined set of options for creating a Vue instance. In that sense they can be thought of as 'classes', though technically they aren't JavaScript classes.

The term 'ponent', however, is frequently used to describe the instances too. In that sense you already are using ponents, albeit one big ponent.

Obviously the term can be used even more generally as it isn't a Vue-specific term.

It is worth noting that ponents do not need to be registered using Vue.ponent. It would not be unusual for an application to have many ponents without ever using Vue.ponent. The ponents can be imported locally instead.

Based on the question I assume you have a main JavaScript file, let's say main.js, that includes all your Vue-related JavaScript. The key section may look something like this:

new Vue({
  data () {
    return { /* some data */}
  },

  puted: { /* ... */ },
  methods: { /* ... */ }
}).mount('#app')

Loosely speaking, the Vue instance here could be described as a ponent. If we're being a little stricter, then only the configuration would be considered a ponent and even then only if it's 'pre-defined'. It's not entirely clear what that even means. For example, would just moving the configuration out be enough to make it 'pre-defined'?

const App = {
  data () {
    return { /* some data */ }
  },

  puted: { /* ... */ },
  methods: { /* ... */ }
}

new Vue(App).mount('#app')

Or does App need to be moved to a separate file for it to count as 'pre-defined'?

Moving on...

Components are the only way to split up your template into multiple pieces. They're also the main way to split up the JavaScript. The question 'do I have to use ponents?' is implicitly asking 'is it acceptable to have all my code in one file?'. That question applies to all programming, it isn't really a Vue question.

If you're happy that your application is so small and so simple that it doesn't need splitting up into smaller pieces then fine, don't introduce any more ponents.

However, the question mentions 'changes'. That implies that the application isn't plete, suggesting that it's premature to decide that it's small and simple. If there's going to be enough on-going work to justify the overhead of writing tests it seems unlikely that it really is as simple as you've suggested.

Reuse is definitely not the only reason to split an application into multiple ponents but it is worth further considering your belief that you don't want to reuse anything. Writing unit tests is reuse. The problem of unit testing a monolith is not a Vue-specific problem and the usual solution is to split the code up into small, testable pieces. You can't write unit tests without introducing suitable units. Of course other forms of testing are available.

Reuse via ponents is just the flip side of duplication. It's rare not to have any duplication, even in a simple application. Even something as simple as two buttons with matching classes could be considered enough duplication to justify introducing a ponent. You might prefer to avoid the mental overhead of the extra abstraction.

There are other benefits to ponents, but for a truly trivial application they're unlikely to matter.

For example, when the UI updates it will only re-render the Vue instances that need it. If everything is in one instance then it will have to re-render everything.

As another example, it's difficult to use puted properties in conjunction with a v-for as you can't pass arguments to a puted property. Instead you end up having to use a method:

<div v-for="item in items" :class="someMethod(item)">

If you introduce a ponent...

<some-ponent v-for="item in items" :item="item">

... then the ponent can use a puted property instead.

I am just getting started with vue.js, and already created most of the very small functionality I need from just the first getting started chapters of the documentation.

Now I want to add some tests to ensure my functionality always works after changes (normally I do TDD but this time I had to learn vue first and decide if i keep using it).

So looking for documentation I basically see that just about every documentation/howto on vue testing is about testing ponents. I really found none else.

This leads me to the question as stated in the subject:

Is it a necessary practice to use vue ponents, even for the most simple application, when I have definitely nothing that i want to reuse as a ponent? Besides the current case of only finding documentation on how to test a ponentized vue app, will I run in other problems?

I searched the web and the vue docs(at least there I'd hope for a sentence of explanation if and why I should always use ponents in the "essentials/Components basics" chapter, but dont find it...), and here, but I couldn't find a clue if and why it might be a generally bad idea not to use ponents.

Based on the questions I see in ments, it seems necessary to explain why I even ask such a question:

• I don't criticize ponents in general or say they are a bad idea - I see that basically abstraction and separation of concerns is often helpful, even important in many cases.
• At the same time, for any kind of abstraction, layering, and separation, there is a line below which introducing it brings more overhead in terms of additional files, glue code to put things together, and tools needed to use it (in the case of vue ponents special editors capable of properly displaying and syntax highlighting .vue files) than advantages.
• The vue documentation itself starts without ponents, which in my understanding suggests that not all users should use ponents in any case.
• It seemed to me that I am pretty close to this line, and I was looking for advice and reasons if I should consider my app being above the line so I should introduce ponents, or I can assume I am below. Answers I thought of would be like "even though you might not benefit a lot from ponents, and will have to add 3 more files to your 3 files app, doubling the number, it's highly remend to use them, because nearly all documentation, and most tooling for vue assumes ponents being used." - or "Just go ahead, introduce ponents when you think it fits". I got a helpful answer in the meantime that I marked as such.

I am just getting started with vue.js, and already created most of the very small functionality I need from just the first getting started chapters of the documentation.

Now I want to add some tests to ensure my functionality always works after changes (normally I do TDD but this time I had to learn vue first and decide if i keep using it).

So looking for documentation I basically see that just about every documentation/howto on vue testing is about testing ponents. I really found none else.

This leads me to the question as stated in the subject:

Is it a necessary practice to use vue ponents, even for the most simple application, when I have definitely nothing that i want to reuse as a ponent? Besides the current case of only finding documentation on how to test a ponentized vue app, will I run in other problems?

I searched the web and the vue docs(at least there I'd hope for a sentence of explanation if and why I should always use ponents in the "essentials/Components basics" chapter, but dont find it...), and here, but I couldn't find a clue if and why it might be a generally bad idea not to use ponents.

Based on the questions I see in ments, it seems necessary to explain why I even ask such a question:

• I don't criticize ponents in general or say they are a bad idea - I see that basically abstraction and separation of concerns is often helpful, even important in many cases.
• At the same time, for any kind of abstraction, layering, and separation, there is a line below which introducing it brings more overhead in terms of additional files, glue code to put things together, and tools needed to use it (in the case of vue ponents special editors capable of properly displaying and syntax highlighting .vue files) than advantages.
• The vue documentation itself starts without ponents, which in my understanding suggests that not all users should use ponents in any case.
• It seemed to me that I am pretty close to this line, and I was looking for advice and reasons if I should consider my app being above the line so I should introduce ponents, or I can assume I am below. Answers I thought of would be like "even though you might not benefit a lot from ponents, and will have to add 3 more files to your 3 files app, doubling the number, it's highly remend to use them, because nearly all documentation, and most tooling for vue assumes ponents being used." - or "Just go ahead, introduce ponents when you think it fits". I got a helpful answer in the meantime that I marked as such.

• javascript
• vue.js
• vuejs2
• vue-ponent

Share Improve this question Follow edited Oct 11, 2019 at 13:33 Henning asked Oct 4, 2019 at 19:55 HenningHenning 1,57411 gold badge1515 silver badges2626 bronze badges 6

• 2 If you have an app so simple, then why are you even using Vue? – VLAZ Commented Oct 4, 2019 at 19:59
• 2 Nobody is going to call the police on you if you don't create ponents. Similarly, you can toss all of the logic for your application into a single function. It's ultimately up to you. Sticking to best practices (like SRP in this case) will likely result in more maintainable software. – Tom Faltesek Commented Oct 4, 2019 at 20:06
• @TomFaltesek yes I know that good architecture is helpful. But as I wrote, I also know that too much abstraction and more layers than necessary is, well too much and not necessary. I'm not asking if someone will call the police, but hoped to hear from someone with more vue experience why it's strongly remended to always use ponents. – Henning Commented Oct 4, 2019 at 20:23
• @VLAZ (rephrasing previous ment) I like the data model and templating functions and my app seems plex enough to use vue for that.I just don't see how I benefit from ponents. The vue documentation itself does not start with ponents, but adds them later without explaining if/why they should always be used, that's why I ask here. From your ment I understand, you think everything plex enough to use vue is also always plex enough for ponents, is it that what you want to tell me? – Henning Commented Oct 4, 2019 at 20:38
• What do you have against using ponents? A ponent is just a simple abstraction over a piece of UI, there's nothing wrong with a ponent that is only used in one place. Perhaps you can explain why this is a problem for you. – Jake Holzinger Commented Oct 4, 2019 at 23:45

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 7

Firstly, I think I need to dwell a little on what a ponent is before considering whether you need to use them.

The early pages on the documentation use the term 'ponent' to describe a pre-defined set of options for creating a Vue instance. In that sense they can be thought of as 'classes', though technically they aren't JavaScript classes.

The term 'ponent', however, is frequently used to describe the instances too. In that sense you already are using ponents, albeit one big ponent.

Obviously the term can be used even more generally as it isn't a Vue-specific term.

It is worth noting that ponents do not need to be registered using Vue.ponent. It would not be unusual for an application to have many ponents without ever using Vue.ponent. The ponents can be imported locally instead.

Based on the question I assume you have a main JavaScript file, let's say main.js, that includes all your Vue-related JavaScript. The key section may look something like this:

new Vue({
  data () {
    return { /* some data */}
  },

  puted: { /* ... */ },
  methods: { /* ... */ }
}).mount('#app')

Loosely speaking, the Vue instance here could be described as a ponent. If we're being a little stricter, then only the configuration would be considered a ponent and even then only if it's 'pre-defined'. It's not entirely clear what that even means. For example, would just moving the configuration out be enough to make it 'pre-defined'?

const App = {
  data () {
    return { /* some data */ }
  },

  puted: { /* ... */ },
  methods: { /* ... */ }
}

new Vue(App).mount('#app')

Or does App need to be moved to a separate file for it to count as 'pre-defined'?

Moving on...

Components are the only way to split up your template into multiple pieces. They're also the main way to split up the JavaScript. The question 'do I have to use ponents?' is implicitly asking 'is it acceptable to have all my code in one file?'. That question applies to all programming, it isn't really a Vue question.

If you're happy that your application is so small and so simple that it doesn't need splitting up into smaller pieces then fine, don't introduce any more ponents.

However, the question mentions 'changes'. That implies that the application isn't plete, suggesting that it's premature to decide that it's small and simple. If there's going to be enough on-going work to justify the overhead of writing tests it seems unlikely that it really is as simple as you've suggested.

Reuse is definitely not the only reason to split an application into multiple ponents but it is worth further considering your belief that you don't want to reuse anything. Writing unit tests is reuse. The problem of unit testing a monolith is not a Vue-specific problem and the usual solution is to split the code up into small, testable pieces. You can't write unit tests without introducing suitable units. Of course other forms of testing are available.

Reuse via ponents is just the flip side of duplication. It's rare not to have any duplication, even in a simple application. Even something as simple as two buttons with matching classes could be considered enough duplication to justify introducing a ponent. You might prefer to avoid the mental overhead of the extra abstraction.

There are other benefits to ponents, but for a truly trivial application they're unlikely to matter.

For example, when the UI updates it will only re-render the Vue instances that need it. If everything is in one instance then it will have to re-render everything.

As another example, it's difficult to use puted properties in conjunction with a v-for as you can't pass arguments to a puted property. Instead you end up having to use a method:

<div v-for="item in items" :class="someMethod(item)">

If you introduce a ponent...

<some-ponent v-for="item in items" :item="item">

... then the ponent can use a puted property instead.

本文标签： javascript(Why) should I *always* use components in any vuejs apphowever simpleStack Overflow