Luckily I was injected into a Vue project at the time I had a plan to learn it. So I have been learning from an existing codebase which provides a context where Vue is useful for and how to use it.
This is probably the first time I work with a JS framework. My early learning topic was Angular which was from a couple of years ago and I did not have much practice by then. Generally speaking, Vue.js is quite friendly to start with. The concepts and use cases are quite clear, and it is all about Javascript so I can understand the existing code and build on that.
And, after 8 months of practicing, here are the things I really like about Vue.
The reusable components
Single components can be imported into different views templates. This makes the view templates really clean and thus easy to read.
For example, a view template that shows a users list can be like this:
So, at the first glance, a front-end developer can understand that the current template has a form to create new users, a bar to search for existing users and finally a users list.
The components above can be imported in some other templates if the mechanism is the same, so the project is easier to maintain and scale at a later time.
The life cycles
Vue provides hooks / life cycles. This is somehow similar to WordPress hooks, that developers can interfere with the current workflows and execute custom functions.
- beforeCreate
- created
- beforeMount
- mounted
- beforeUpdate
- updated
- activated
- deactivated
- beforeDestroy
- destroyed
- errorCaptured
So far I have used created frequently, and destroyed a couple of times.
Once I used updated on a radio selection button to capture the change but then quickly found out that the hook fires on every component’s changes in the view, not just the selection component.
I haven’t had an idea how the other hooks might be useful for the cases, but hopefully I have chances to use them in the future.
Limited DOM access
Learning about the use of v-model or computed variables to get to the elements amazes me. For example in an user input case:
The name variable is two-way binded. When an user inputs a name, the name in the data section will be updated and reflects already in the field {{ name }}. So the user will see a live update to the name in the p tag as s/he types in the input field.
Not only that, I also can use this variable in the methods object, by addressing as this.name. Very convenient!
The state management
Because there would be many components around in an app, so the flow of data from parent to child components and vice-versa would be like traffic in Hanoi. So the use of VueX as a state management center is very much appreciated.
VueX acts as a data center so that all components can access the constants (states) and methods (actions) from a single source. To mutate the data, it needs to go through commits. VueX is also modular so it is quite maintainable.
Honestly, I think the commits are quite a long way to reach the data.
The Vue directives
The Vue directives (starting with v-) are really helpful to ease some boring tasks. For example, to use v-if / v-show to hide and show error messages, or to perform a loop with v-for:
The code above prints out each game genre in a line within a selection dropdown, and when user selects any value, it binds the value to selected_genre variable and then can be accessed later in the script section by using this.selected_genre.
Simple, clean and productive!
The scoped CSS
If there are CSS styles that only use in one template, I can include them in the template and mark as scoped so that it won’t apply to elements in other templates. So the components look more compacted.
The Vue Dev Tools
Sadly this does not work properly. Sometimes it disappears from the browser or crashes. But this really is a time-saver when it works.
The Vue dev tools shows the objects of components, including data, computed, methods, etc. in the browser console. Also, the values inside the devtool can be changed and reflected on the components.
Leave a Reply