Introduction To Vue.js

What Is Vue.js

At it's most fundamental, Vue.js is a framework for building user interfaces. It handles the view layer which the user interacts with.

Since Vue is responsible for the user interface, it is useful for taking data and rendering it to the user. The data it receives can come in many forms such as from a web server, or an API. The data can be stored in our app, and also receive user input too.

For beginners, it can be relatively easy to get going with, only requiring a little HTML, CSS, & JavaScript knowledge.

And as you get more comfortable with Vue, and for more advanced users, you will also appreciate how fast and scalable Vue.js can be. Along with a mature ecosystem to extend the Vue.js core if needed, including:

• Vue Router.
• State Management.
• Testing.
• UI Components.
• State Management.
• Server side rendering
• And many more.

What Can It Do?

The Vue.js core is lightweight and can be used to control a single part of a website, through to handling a complex single page application. If you are not sure what a single page application is, there will be more on this soon.

At it's most simple, imagine we had an existing portfolio website that we built with HTML & CSS. Further down the line, we may want to add some new features or sections to this, such as our recent social media posts.

We could go the long way round and manually copy over our posts into our HTML file each time we make a new post. Or, we would probably want to use the an API to pull in our recent posts automatically.

For such a use case we could use Vue.js to control just a part of our site. Or even multiple parts if we wanted.

Requiring only a Vue.js CDN link, which is a link to the Vue.js library:

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.4.23/vue.cjs.js" referrerpolicy="no-referrer"></script>

This is inserted into our HTML file, and we can then access the Vue features in a JavaScript file. We will try this out soon.

Along with controlling a part of the user interface, Vue can also control our full page or application.

We will cover these kind of applications during this course. As mentioned before, we need a data source such as some products, and these are passed to Vue.js which will then display them to the user.

Along with handling any data changes & updates along the way too.

Vue.js 3

This course focuses on Vue.js version 3. This was a major re-write of Vue 2, and one which happened for multiple reasons.

The codebase for Vue 2 was fast, efficient and performant, but there is always room for improvement in the current design. Led by learning and discovering new things about the project, and also utilising new features that became available in modern browsers.

Performance

One of the big improvements in Vue 3 is performance.

This has been improved in multiple ways, one of the key things is by using an ES6 feature called Proxy, which results in a faster and more efficient change detection system.

Reactivity

This is a key part in the Vue 3 reactivity system, which is the process of Vue reacting to changes and updating where required.

For example, if a user updated the item quantity in a shopping cart, we would also want the total price to be updated. This is the process of reacting to a change.

In Vue 2, any data that we had when the app loads is automatically reactive. Meaning if it changes, and other parts of the app which uses it will update too. If a user changed their username, and it was also displayed in the header, it would update there automatically too.

However, there was a caveat of the Vue 2 reactivity system. Any new properties added after the application had loaded would not be reactive. This is something that Proxy has solved and we will look at these in more detail later.

Tree-Shaking

Reducing the amount of code can also help with performance. When we use a framework, we often don't need all the features available.

When we load an app, we may be downloading additional JavaScript or assets that we don’t need in our project. To help with this, Vue 3 is more modular. Modern tooling can remove any unnecessary code, reducing the overall size.

Virtual DOM

Another big improvement is a re-write of the Virtual DOM. Again, there is more information later once we get more comfortable with Vue. But for now, the Virtual DOM update means that Vue can now more efficiently check which element's have changed after an update.

TypeScript

The Vue 2 library was written in JavaScript. Over time, it was realised the a project of it’s size would benefit from introducing types, to help reduce errors and bugs.

Even though the Vue 3 core is written using TypeScript, developers can choose to write code in both TypeScript or JavaScript. TypeScript was available in Vue 2, but it's now more deepely integrated into Vue 3, requiring no additional tooling.

Composition API

The Composition API is probably the most talked about feature in Vue 3, and also the one that initially caused a misunderstanding. Many people believed that Vue 3 will force us to write apps in a new way. This was not true. The Composition API is purely additive, and does not replace anything used previously in Vue 2.

Instead the intention is to provide a way to make our project more maintainable and reusable.

The idea is to allow us to write our applications more closely to writing JavaScript. We can abstract parts of our app into functions. Meaning our related code such as state or data and methods is now grouped together. Making it more maintainable and re usable.

We will dive a lot deeper into this later, along with other new features to explore such as Portals, Fragments, and much more.