JS Horror Story: Learning VueJS Episode #2
See previous chapters:
Episode 1
6 Hours into VueJS
Following my progress from Episode #1, I now have a few more Vue Concepts under my belt, some of them make more sense than others:
- Directives
- Data and Props
Directives — Basic Loops, ifs and
Loops are delegated to directives, which are little data-like attributes that tells the element how to behave.
Going through the documentation, it looks something like this
If you attempt to implement the first example, as is, you get this error:
error: Elements in iteration expect to have ‘v-bind:key’ directives
The documentation fails again, making it a bit frustrating to keep searching for errors and what they mean.
Like in React, keys are expected to be passed to a list to prevent needless re-renders which makes perfect sense. Why though is that not documented at the top example if it’s build-breaking?
I’m not crazy, this was opened as an issue back in 2017
Directives offer an interesting take on how to express simple logic, directives are no doubt a matter of personal taste, however some of their benefits are hard to ignore:
If you’ll try to implement this logic in React you’ll either need a switch case, or some strange conditions in the jsx, terniary operations or some convoluted way to write the code ‘differently’ to not need these conditions.
I must admit I re-wrote conditions in React to make it look more elegant, but sometimes the result is just Meh. Directives solve this specific problem very well.
Props and Data(State?) — The invalid props syndrom
Defining a ‘prop’ in Vue is (again) error prone.
You need to define the name of the prop in a few places:
- The ‘props’ key in the component object
- The template in the component
- You need to :bind the name of the prop in the parent component.
The end result looks something like this:
Possible issues:
- If you don’t :bind the data-attribute in the parent (:todos) — no error is thrown, but nothing works.
- If you miss-spell the data-attribute (:Todos) — Nothing works — No error is thrown
Data(which is actually state) is defined as a function returning an Object, Both Props and Data and accessed the same way, without the prefix props or data, so this.user in Vue can mean this.props.user or this.state.user in React.
I find it very unfortunate that it’s not possible to detect at a glance if something is a property or a dynamic State. While I understand the desire to make things simpler, I think they’ve cut too deep here.
Both Data and Props are wrapped in some magical Proxy created by Vue, specifically it looks like this:
This data structure models a ‘todo list’ with each todo having id, isDone, isPersisted and text.
Notice how Vue dynamically(and magically) creates getters and setters for all keys in the object, Vue then uses these to detect changes which might require re-render and also allows you to create ‘smart’ or computed values.
This is again somewhat problematic — you can easily(accidentally) change props instead of state, since they look and behave exactly the same.
Changing the props won’t throw any errors, but in fact will work for some cases.
If you change for example, the isDone boolean of an object, every component that uses that object will be updated, even places outside of your component.
This sounds chaotic, but maybe I’m not getting the ‘Vue Way’.
Imagine Component Parent has two children, A and B.
Parent passes a list of objects to both A and B.
B can perform a change that will be reflected to A without going through the Parent.
This is not exactly ‘common practice’ and props are not encouraged to be used this way, but the fact it works is really frightning!
In Vue, Any component can make application wide changes without any control from Parent components — All state is at least partially, global
6 Hour summary:
Vue lets you get things done fast, no doubt. In 6 hours I’ve covered a lot of ground which lets me quite easily create non-arbitrary stuff.
My previous worries of error handling and documentation still exist, but for now Vue solves more problems than it creates. Use with caution.
Until next time,
Patrick
I’d love to hear your thoughts, How do you handle the ‘everything is global’ state of mind Vue offers?
P.S
Claps are free, Just saying.
If you liked this article, you might also like this one:
7 Steps from Junior to Senior