Vue 3 prepares Release. Scores on the updates are expected

Tram Ho

Hello everyone, I am back to my blog, this is me (although no one knows who I am).

After a period of not blogging and tingling, it was partly due to his busy work, and probably due to this Singvid Covid still has to work at home for 6 months and has not officially come back to work. the human world should be dull, the lifeless soul can’t think of anything nice to share with everyone.

Just woke up this morning to see the announcement that Vue 3 has entered the RC-stage (Release Candidate – subject to release). RC-stage is the final stage in the software development process before the official release. So the idea of ​​an elegant hobby is writing.

As a passionate VueJS enthusiast, I also wanted to write a share with everyone (those who do not know) about Vue 3 for a long time but wanted to go to RC-stage so everything was stable and similar to the last release.

In this article we review some of the major updates that will be available in Vue through the live trial run of Vue 3.

Prerequisites

(sounds like middle school students)

First of all clone demo Vue 3 here .

After you’ve finished running npm install or yarn install to install node_modules .

For those who do not know yarn: Yarn is a Facebook product, and when installing the libraries, it runs quite fast compared to npm so now I see people using yarn a lot.

After installing, we run npm run dev or yarn dev to run the project, open the browser at localhost:8080 see the following is a bright life, guys:

Note: currently if we open Chrome Devtool, there will be no Vue tab there, because Vue Devtool is still in the process of updating to integrate with Vue3.

Tree shaking

Open the project and see an overview as follows:

First try opening main.js see if there is anything special:

Here we see nothing very special, simply import the App component as the starting component (entrypoint) for our entire Vue app and mount (mount) it on the <div id="app" /> in the index.html file

Try returning to Vue 2 to see if the main.js file is any different:

As you can see above, the difference is that in Vue 3 instead of importing the whole Vue library, now we only import the createApp module to serve the current purpose of creating Vue app.

This is one of the major changes in Vue 3. This technique is called tree shaking – eliminating redundant code that is not used when building and optimizing the code . This leads to our app will be significantly smaller because there are many api like keep-alive or slot , … but sometimes we do not use:

Above is a comparison between Vue 2 and Vue 3 made by Evan You (creator VueJS), we can see that the build size has been reduced to half, and the time to execute JS code is also halved.

In Vue 3 almost all modules are designed to be tree-shake (v-model, nextTick, watch, …), using any module we just need to import that module (or Vue can detect and import itself). when building instead of me). As a result, our application will have a significant size reduction

Fragment

Next we open the App.vue file to see what is available:

Oh, just opened the VSCode to report a red error, why is this ??

“The template requires 1 component-filled tag” ??? !!!

Looking back, the box is right, there are 3 cards inside, but these 3 cards are not covered by any parent card, this should normally be like this:

So why is the code still running without error ??

The problem is that Vue 3 no longer requires you to include all component content in a single tag, thanks to Vue 3’s default support Fragment . Our code still runs despite seeing the red error because Vetur extension on VSCode does not support this syntax (syntax) (currently Vetur is also being updated to integrate with Vue 3).

Vue 3 Fragment is like React side with React.Fragment. Only template in Vue 3 by default supports and developers do not need to care about this.

Initially when using Vue and React I thought it was “really funny, making people have to include all the component content in one more tag, aren’t they already included in that single <template> tag”. Although later, I am familiar with and accept this, but I feel about the “developer experience” (the developer-library user experience), this problem should be supported in a “natural” way without us having to care about it. And finally Vue 3 did that

Next still in the App.vue file look down below the logical code in the script tag. We see the appearance of one more hook which is setup () – one of the most expected updates in Vue 3.

Composition API

In Vue 3, we see a new hook face, this hook is introduced under the Composition API name – sounds like “probably the api type synthesized by component api”

All the composition API is packed into the setup hook, the composition API is like an optional opt-in form, you can use it or code like Vue 2.

Using

First we modify the App.vue file as follows:

Explain:

  • setup is declared as normal hooks (created, mounted, etc.)
  • Inside we create object state , this object has 2 properties: count and double . We want the state ‘s value to be reactive – when the value changes, we can see the change directly on the screen (DOM re-render), so we pass the value of the state object into the reactive function imported from vue
  • In the double property, we want it to have twice the value of count, and almost naturally we think of computed immediately – something we are familiar with from Vue 2 when we want to have one variable with a value dependent on another. And to use computed in the composition API, we simply import it from the vue library
  • Along with that we have the function increment to increase the value of state.count to 1 unit
  • Finally, we return the state and increment . After returning, these components will be merged with the components of the components which are data and methods as we often use in Vue 2.
  • Finally, on the template we use the components returned from setup as we have done from the past

Then try reloading the browser and see the results

Important note : Everything about composition API can only be used in setup . Ie reactive or computed above we use it for setup . And by default Vue is still computed like Vue of yesterday. For example, we modified the code 1 bit as follows:

Try reloading the browser and let’s see:

You can see that the setup of the setup exist in a separate world, and only when returning will the return components be merged into the real world as our component with data , methods , props , ….

Oh, it looks like na na? Looks like there’s no breakthrough here, Vue 2 can do it. Continue reading this article and we will explain the great benefits of setup offline.

Next we try to watch the value of the count and print out the console every time the count changes.

The Vue composition API provides us with watchEffect to track the change of a variable immediately. We modified the code 1 bit as follows:

watchEffect code itself says what it did, right guys. It will watch whatever we define inside.

Try reloading the browser and see the results:

We can see from the very beginning that the count was watched and we saw a print of 0

We can also have multiple watchEffect , each of which will watch a specific number of variables:

Note: besides the watchEffect composition API there is also an api called watch , the operation is identical to the watch in the outside world that we still use in Vue 2.

Try adding the above code and reloading the browser. (remember to import the watch already)

Oh, oh my magic, Vue 2 already has a watch, it still looks nothing special. Keep reading to find out what’s good about it

The Composition API also provides us with a series of hooks that look like the outside world: onBeforeMount , onMounted , onBeforeUnmount , onUnmounted , …

The more I reintroduced the composition the API looked like a normal Vue 2. onMounted , Vue 2 is still mounted already, onUnmounted , onUnmounted , we still have destroyed in Vue 2. Is it different from the name?

What is the problem with Vue 2 currently?

In recent years, Vue has been quite popular in the frontend community, with more and more users. And there are many big projects using Vue. Now is the time when many problems arise:

  • Complex, long and difficult components are difficult to read, the feature is tangible continuously, but sometimes my code has to be very difficult to find. Secondly, the architecture of a component is organized in the type of options , just like an object. So we have props , data , methods , computed , … 1 case I meet often and I believe you meet a lot of that, we have a fairly long component and we want to learn how a function works function in that component: then read the data see what the variable name is, drag down to read the calculation method using this variable, then drag the pull down to read computed receive the results of the other method calculation, then continue pooooooooooooooo watch to see when the other computed changes, print something on the screen. So if our code is organized in a logic , not an option , it’s much easier to maintain
  • Logging and reusing logic for components is not good and clean when the number increases, for example:
    1. When we import multiple mixins into a component, there will be times when we don’t know the value of a variable is coming from the mixin.
    2. If the mixin we import has data and method match our existing component and obviously leads to errors. As for HOC (high order component) can lead to duplication of names in props
    3. If we use HOC, then that HOC must have both the template and all other components as a normal Vue component, leading to redundancy while we only want to reuse each of such methods.

Let’s consider a specific example. You see this component together . The logical code is all that is included with the <script> tag. This entire logic code is divided into several functions, each component related to the function will be colored in the same color, as the following image:

In the image above, we can see, for each function, their logic is scattered throughout the component. Encountered any long + complicated functions, but again because he had another code that he transferred to the company, he just called heaven

What does the Composition API bring us?

From the points above, the Composition API appears and rescues us:

  • The properties returned from setup can clearly know where they came from, what file they were imported from, what type they were, etc.
  • These attributes can have arbitrary names so we don’t have to worry about duplicate names as mentioned above
  • We also do not need to create a Vue component just for reusing the logic (as mentioned above with HOC).
  • We can organize the code in a coherent logic, group the components of each function into specific clusters, or split them into a separate file.
  • Composition API support is great for Typescript

Returning to the example in the previous section, with the composition API we can reorganize the code as follows :

Now the components of a function have been grouped, making it much easier to maintain code.

The Composition API will be used along with what is already available in Vue 2:

  • setup will be run and return the value first of all other hooks like beforeCreate , created , etc.

  • Everything in the setup exists in a separate world, and only those returned by setup can be accessed from the outside world

You absolutely can not use the composition API because this is only an option if you need it. But I firmly believe that when Vue 3 officially releases people will switch to the composition API a lot for its benefits

The content of the composition API is very much and I find it quite good, solving many problems in Vue 2. Encourage you to read more about the Composition API here.

In this article, I will stop at using some basic components of Composition API

New reactive treatment mechanism

Vue 2 and some problems

In Vue 2, the core for reactive handling is through the getter and setter of Object.defineProperty . The basic idea is as follows:

With this setup, every time we change an attribute of obj , we will immediately notify the components related to this variable for them to update. This will happen to the data declarations at the time the component was instantiated, and this is exactly how Vue.set works.

Using Object.defineProperty leads to the following:

  1. Update values ​​in array:

In the above code, although this.names is valid, we will not see the change on the screen, or in other words, the DOM does not re-render.

To overcome this situation, we must call this.$forceUpdate() or use Vue.set :

It would be great if the mind was reeling, we forgot about this, then a week later to see the error. God help

  1. Add an attribute to the object

This is probably a very common case when we add a new property and an object, and after this property changes, nothing is changed on the screen, because the other property is added outside the data . The workaround is to call this.$forceUpdate() or use Vue.set

And it would be great to have a quarrel with a mind-lover who is confused how to invite me to play at the weekend and still have to remember to call Vue.set

Proxy

In Vue 3, the reactive treatment mechanism has been completely replaced by Proxy .

Using Proxy for reactive processing will fix all of the above problems (whether any new problems appear or not, it is unknown).

I’ve been listening to commercials for a while now, so please show me. We reopen the App.vue file and correct the code as follows:

Then reopen the browser and see if the result is ok:

If in Vue 2 that we do the above, then we can wear the mouse button without seeing anything changed on the screen, although if console.log out, we see the user age . And we have to remember to use $forceUpdate or Vue.set

But as you can see, in Vue 3 we did not need to care about that, like adding any properties to the bed, and they will automatically react. Open up a bright future with zero $forceUpdate and Vue.set .

Typescript support

Over the past few years, I have noticed that people have gradually realized that pure JavaScript has many limitations, that is pure JavaScript has no mechanism to check the data type when we code, and this leads to many problems as follows:

  • Data errors are only detected when the project is live
  • Dev must use console.log e-pretend-where to check what this variable returns, what type is it, etc. Especially with non-written code.
  • After 1 year of reviewing the project, continue console.log everywhere again .
  • When a project has many people, it gets bigger, this problem becomes even more painful and I noticed, this is really small, but it takes a lt of time in the entire software development process.
  • Along with that, it leads to many inhibitions because somehow the data is not right

And Typescript appears to solve all of the above. Typescript (TS) understands plain JavaScript but has check type data when used. And I feel that using Typescript feels like having someone guide me when coding, because IDEs like VSCode are extremely powerful for TS (because TS and VSCode are Microsoft products).

If you have ever React code or React Native will see that side they have very strong and tight types system, Typescript code is very happy.

It’s started advertising again 

Returning to the main theme, Vue 3 has been 100% redesigned from scratch and written in Typescript entirely. So if you guys use Typescript for your VueJS project, you will benefit greatly, now Vue code we will have the teacher to guide each of the previous code, type checking, syntax checking, etc. . Definitely will greatly reduce debug time and increase productivity.

Those who do not use Typescript will still be supported enthusiastically because VSCode is now very smart, you write pure JS still have full suggestions (of course not equal to TS)

Using Vue 2 also has support typescript but I feel the support type is “half of the season”

Currently, in my opinion, almost the entire Vue ecosystem is being updated to integrate with Vue 3 and all are written in Typescript: vue-router, vuex, vue cli, …

Such a wonderful and progressive thing, even increasing the efficiency of your work, why not try it, good brothers

Suspense

A great idea from React side that we are about to experience in Vue 3 is the Suspense component.

Suspense is pausing to render our main component, displaying another content instead, and until our main component is downloaded if it is an async component (lazy load) or until it’s done. Some async job is in setup

For example, I want to get the entire list of users and display on the screen, but usually we do not want to display a blank screen because the load of users list may take a long time, but we often want to display something possible. currently the data is being downloaded (for example, loading icon).

Let’s look at an example, let’s go back to the code.

We create a new component named UserList.vue with the following content:

Here you can see our content is quite simple: get 5000 users information, this job is done in setup() , and finally the content is displayed by 1 table

Then we return to App.vue and edit the content as follows:

Explain:

  • Here you can see that we use a component named Suspense cover the content that we want to “wait”, this card is supported by default in Vue 3 like transition cards, we do not need to import it.
  • Inside, we have 2 parts marked template #default and #fallback respectively for the main component we want to display and the content displayed while waiting for the component to load.

Finally go back to the browser and see the results:

Vue 3 also provides a hook that is onErrorCaptured to catch errors if during the processing of async tasks in setup() occurs an error, you modify the code a bit as follows:

Then try reloading the browser and you will see the following:

Above I have used ref , ref here is similar to reactive . Read more about ref here

In summary, I see this is a “pretty good” component, taking advantage of will help us have a better UI, catch errors / exceptions, avoid the case when running error and display a blank screen. Sometimes I use v-if to do this, but even the condition in v-if gets an error

Teleport

Vue 3 also supports the Teleport component or commonly known as the Portal (you should use React for sure. ). The goal is to render content outside of the Vue application.

When we code Vue, everything will be rendered in the <div id="app"> tag. So what if we want to render content outside of the <div id="app" tag? ? At that time we had to write Javascript code createElement... then document.body.appendChild... , this is quite verbose, not intuitive, especially when the content we want to render a lot of content outward.

In Vue 3, we will have Teleport to “move” the content we write inside Vue outside its scope.

Back to the code, modify the App.vue file as follows:

Above, we use the Teleport card to wrap the content we want to “move” outside, using the to attribute to specify where we want to move our content.

Then we open the index.html file and edit the following:

Finally reload the browser and we will see the following:

Open Devtool and you can see our content has been rendered outside the <div id="app"> tag as our Vue application.

One of the specific examples that I find Teleport useful is the creation of a tooltip :

When our component is limited in size, rendering the tooltip within the scope of the component will result in the tooltip being obscured:

Therefore we will want to display it outside the Vue application and we will be able to customize the display position most appropriately.

Global Mounting

In Vue 2, when we want to install libraries, we often use Vue.use :

But in Vue 3 we will install the following:

Above we installed the libraries into the myApp object, only the name “I want to install these libraries for myApp “. Unlike in Vue 2, we install the global Vue object. This helps protect our Vue application from third-party libraries / plugins, preventing them from changing the Vue global object – especially when using mixins

Performance

Vue 3 has been redesigned from the ground up and perhaps so Evan has many opportunities to improve the unreasonable things from version 2. These include:

  • Ignore calculations during the DOM update if a node does not have any “children” (or simply 1 tag without any child tags)
  • Optimize the slot slot and update the contents related to that slot
  • Detect nodes that contain all the content and never change to be constant, do not perform calculations on it and re-render again.
  • … Along with some other improvements you can see here

And with the improvements on Vue 3, it’s 2 times faster than current Vue 2, and 3 times faster with server side rendering. Component initialization time, compile code time are significantly reduced. Along with that is also significantly reduced the size of the build file (as I said at the beginning of the article)

Vue-router, vuex, …

Other libraries in the Vue ecosystem are also being updated to integrate with Vue 3, along with a number of improvements, you can find here.

Hot line

Evan You (creator of VueJS) posted an announcement this morning detailing the first version of the RC-stage, you read here , many great ones.

Recently Evan also developed a new tool called Vite link here . This tool is similar to vue-cli to create and run the VueJS project, but one feature is that it loads extremely fast whenever we update the code.

And …………….. pung piuuu

We can view the document for Vue 3, you can access it here:

https://v3.vuejs.org/

(Beta is currently in progress so it should be updated a lot)

summary

Another article about Vue with an excited mood, because it has been a long time not to write anything, and eager to wait for the official day to use Vue 3 to see if there are any interesting things left.

Hopefully, through this article you can see what is waiting for us to use in the next version of Vue.

About this update, I see quite a lot of similarities with React: watchEffect , Teleport , Suspense , onErrorCaptured (similar to componentDidCatch). Evan you also share that many updates on Vue 3 are inspired by React, but I personally find them all good points, plus the cute nature of Vue, Vue 3 will be a very desirable thing. wait

I believe that with this new version, the VueJS community will increase even more because of what Vue brings: easy to learn, easy to read code and high performance.

If you have any questions, please comment below let me know. Good night everybody

Share the news now

Source : Viblo