Update our knowledge, where to start?
How to study Vue 3 new features
My students often ask me how to keep their knowledge up to date after they completed the Boolean Careers course.
This article aims to be a simple example of how to study new arguments.
First, it is necessary to read technical articles daily, and also to write code. Be careful, however, it is essential not to fall into the tutorial hell!
In general, tutorials show us how to do a specific task and not the theory behind it, so if we want to understand the real mechanism, we have to create something ourselves.
Let’s start! Study Vue 3 Composition API
Assuming you are familiar with Vue 2 — the most important new feature of Vue 3 is the Composition API.
While the Options API works similarly to Vue 2, the Composition API works by importing API functions into the logic of the component.
When using Composition API?
From Vuejs Doc
The Composition API is centered around declaring reactive state variables directly in a function scope, and **composing state from multiple functions together to handle complexity**. It is more free-form, and requires understanding of how reactivity works in Vue to be used effectively. In return, its flexibility enables more powerful patterns for organizing and reusing logic.
For production use:
- Go with Options API if you are not using build tools, or plan to use Vue primarily in low-complexity scenarios, e.g. progressive enhancement.
- Go with Composition API + Single-File Components if you plan to build full applications with Vue.
Jump into Reactivity Fundamentals
Now we have an overview of the Composition API and we know when to use it, but we don’t know yet how to use the Vue primary functionality:
Reactivity
Start always from the documentation Reactivity Fundamentals Reference
With the Composition API we have to import the function we want to use in the script, in this case reactive, then we’ll use it to create a reactive state. This function accepts an object and returns a Proxy object.
From the documentation:
Reactive objects are JavaScript Proxies and behave just like normal objects. The difference is that Vue is able to track the property access and mutations of a reactive object.
What is a Proxy object?
In the previous version of Vue, instead, the reactivity was based on Getter and Setter. Reactivity Vuejs 2
When you pass a plain JavaScript object to a Vue instance as its data option, Vue will walk through all of its properties and convert them to getter/setters using Object.defineProperty
What is Object.defineProperty?
Object.defineProperty MDN Reference
Go back to Vuejs Documentation
Now that we know we need to import the reactive function into our script, what should we do next?
To declare a state in a component’s template, we can use the `setup()` function.
We can also declare functions in the same scope and expose them alongside the state.
Because expose state and methods via the `setup()` function can be verbose, we can use in single file components the `<script setup>`
Top-level imports and variables declared in `<script setup>` are automatically usable in the template of the same component.
We are ready to: a bunch of bubbles!
Now we’ll have to imagine a real situation to use Vuejs reactivity.
You need to be creative in this phase, don’t use a typical example. Instead, use an argument you like.
As everyone knows, I love colors, so for this example, I have imagined a bunch of colored random sized bubbles and a set of baskets of the same color.
Our script will allow us to move the colored bubbles within the relative basket with a click, and with another click, we can send the bubble from the basket to the top of the bunch.
Finally, we can change the color of bubbles by dragging and dropping a colored tab on a bubble.
Where to start?
In this situation, we’ll use a reactive state with 3 properties bubbles, baskets, availableColors.
Then we’ll create the necessary methods.
We’ll use the reactive() function in the <script setup>.
First step: the State
Second Step: Template
Create a basic layout, we have:
* header, with instructions,
* .palette that contains the available colors tabs,
* .container that contains our bubbles and relative baskets.
We pass some custom properties to CSS through the style attribute in order to handle the color and diameter of the bubble.
Now use Vuejs Devtools and select the App component to see the setup content, it reflects our state (Reactive) and its array properties.
Try now to change the property color of one bubbles element, the color will change also in the browser: this is the reactivity at work!
Third Step: methods
toBasket(index)
Clicking on a bubble we have to remove it from the state.bubbles and add it to the relative state.basket.
In the .stack-list>li add @click handler
Ok, now if we click on a bubble it disappears from the left and appears in the relative basket on the right.
Let’s see Vue Dev Tools
Now the state.bubbles array have 18 elements and the state.baskests[0].bubbles have 1 element.
Add toTopStack() function
toTopStack() will have to remove the bubble from a basket and add it on the stack’s top when we click on a bubble.
Click event is very simple, add a little pepper! Drag and Drop API
What is HTML 5 drag and drop API?
These are good places to start:
HTML Drag and Drop API
Using the HTML5 Drag and Drop API
Go on, put the attribute draggable=”true” to the .palette>li and the handler @dragstart which calls our method setColor($event, color), we pass it the event and the color object itself.
With these attributes, .palette>li will become draggable and when we start to drag the setColor method will be called.
On the .stack-list>li put
We prevent the default behaviors dragover and dragenter end call on drop event our method changeColor($event, indexBubble).
These methods accept the event and the index of bubble, that we use to search the right element in the state.bubbles array.
Now we use the dataTransfer object to set the drop effect and the allowed effect, as well as the data to be transferred by choosing its name.
Why do we use JSON.stringify?
We can transfer different types of data, including plain text, URLs, HTML code, files, etc.
In this case, we want to transfer an object literal, so we can use JSON object to Stringify, transform the object in a JSON formatted string, and then Parse, transform the string back into an object.
References:
Recommended Drag Types
JSON.stringify()
JSON.parse()
In the Vue Dev Tools we can see setup (others)
Here we find all the functions we have used in setup script, including the reactive function.
Conclusions:
What we have learned?
Updating our knowledge may not be easy, but we have to fix in mind what is our goal.
In my opinion, we learn effectively in two situations:
when we have a specific task to execute or when we create something for us.
In either case, we have a project in mind, we study the specification step by step and have real problems to solve.
Roadmap to study
1. Decide first what argument to study
2. Use Documentation, in this case, we have used Vuejs framework, then use other resources like MDN or w3school to learn more
3. Image a real-life situation end test your new knowledge
4. Read again documentation, explore and examine in-depth
5. Finally try to explain everything to someone.
