3 ms·

It's not really fair to make a comparison between react with JSX and vue without webpack. In practice you use webpack for making components with separated js/ht

It's not really fair to make a comparison between react with JSX and vue without webpack. In practice you use webpack for making components with separated js/html/css, so Vue ends up looking a lot better than the above. That's actually the big draw for me, organization into single file components which can be parsed as simple html. The js component structure is just another piece of that. You're passing vue a template for creating components in an organized/standard way. You can define your own render function if you want the freedom, but you start out with something clean and well organized. Vue is definitely doing things behind the scenes, but it's nothing all that complicated. I wouldn't say it's hoisting. It uses the data function to create component instance objects which it then adds the template's computed props/methods/watchers etc on to, and links with the life cycle hooks. If you created the component object yourself instead of a definition for it, there would be less magic going on for sure, but things would be much less organized. (Minor: I don't use vue without webpack, but I assume data should be a function which returns a data instance, so what you've written won't work in Vue unless it's different for the top level component?)

caseymarquis 9y ago
Follow up, I was on my phone before, this is what working with Vue typically looks like: <template> <p v-text="message" class="some-class"> </p> <button v-on:click="reverseMessage"> </button> </template> <script> export default { data() { return { message: "Hello Vue.js!" }; }, methods: { reverseMessage(){ this.message = this.message.split('').reverse().join(''); }, }, } </script> <style> .some-class{ color: black; } </style> The thing to note is that there are other objects which can be added to the component definition which add a lot of utility and keeps things standardized: created, mounted, computed, watch, etc. There's a bit of magic behind the scenes to make it work, but it's worth it for the standardization/organization in my opinion.

caseymarquis 9y ago

Follow up, I was on my phone before, this is what working with Vue typically looks like: <template> <p v-text="message" class="some-class"> </p> <button v-on:click="reverseMessage"> </button> </template> <script> export default { data() { return { message: "Hello Vue.js!" }; }, methods: { reverseMessage(){ this.message = this.message.split('').reverse().join(''); }, }, } </script> <style> .some-class{ color: black; } </style> The thing to note is that there are other objects which can be added to the component definition which add a lot of utility and keeps things standardized: created, mounted, computed, watch, etc. There's a bit of magic behind the scenes to make it work, but it's worth it for the standardization/organization in my opinion.