Vue js lifecycle hooks for dummies

Safouene Turki — Mon, 21 Jun 2021 15:29:02 +0000

What are lifecycle hooks?

Every component in VueJS has a lifecycle which is being managed by Vue itself when it creates the component, mounts the component to the DOM, updates the component and destroy the components.

Just like Humans have a lifecycle (birth , growing up , death etc) We can tap into key moments in that lifecycle by implementing one or more lifecycle hooks giving us the opportunity to add our own code at specific stages of a component lifetime.

for the sake of this article, we will consider a Vue component as a package that will contain HTML / CSS / JS

- beforeCreate()

Our package is now being filled with events/watchers setups and data.

Explanation : Inside this hook, data is still not reactive and events that occur during the component’s lifecycle have not been set up yet.
we can not use any Data/ Methods from the Component, however you can access props.

- Created()

Our package is finally filled with reactive data , computed properties, methods, watch/event callbacks.

Explanation : Data is now reactive and events have been set up You cannot do any DOM manipulations because DOM has not been mounted yet. created() is called earlier in order to trigger actions like data fetching from API backend.

Created will not wait for all of the async operations to complete before moving on to the next stage when making API call.

- BeforeMount()

the package is on it's way to our depot "The Dom"
Explanation : the render function is being called for the first time , our template has been compiled and our virtual DOM updated by Vue.

This hook is not called during server-side rendering.

- Mounted()

the package is now stored in the depot "THE DOM" and have access inside the dom.

Explanation : with this hook you can access or modify the DOM of your component immediately before or after the initial render.
The Vue docs recommend using the mounted() hook over the created() hook for data fetching.
Vue does not block rendering until the mounted function is done running, so mounted() runs concurrently with axios .

This hook is not called during server-side rendering.

- beforeUpdate()

the package content is being changed, so it's back to our factory and not accessible to "the DOM" depot anymore.

Explanation : this hook is called when data changes, but the DOM hasn't changed yet.
The Vue Docs recommends using this hook to remove manually added event listeners.

This hook is not called during server-side rendering, because only the initial render is performed server-side.

- Updated()

the package content is back to "the DOM" depot after the changes.

Explanation : Updated() is called when there is some data changes that causes the DOM to be re-rendered and patched. This hook is mostly for changes related to the DOM. It is not recommended updating the state with this hook. It's better to use computed property or Watchers to react to state changes.

This hook is not called during server-side rendering, because only the initial render is performed server-side.

- unmounted()

we no longer need the package and it's going straight to the trash.

Explanation : all directives of the component instance have been destroyed. This is the last step in the component lifecycle, it is similar to death .

This hook is not called during server-side rendering

If you ever feel lost about Vue JS lifecycle hooks you can have a look at the lifecycle diagram

Why i prefer Tailwind CSS?

Safouene Turki — Wed, 09 Jun 2021 10:50:12 +0000

What is Tailwind CSS ?

According to the official documentation, Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces.
You can write inline styling and achieve an awesome looking website without writing a single css line !

Tailwind CSS in simple words :

We're able to do all our styling without leaving our HTML,
just by adding utility classes.
Incredible looking interfaces with only few lines of HTML !

What are Utility Classes ?

Utility classes are self-descriptive, single-purpose CSS classes.
they can describe :
Text sizes, colors, and weights
Border colors, widths, and positions
Background colors
Flexbox utilities
Padding and margin helpers

Utility classes serve as a single one-stop-shop for reusable pieces of code.

Key features of Tailwind :

No default theme
No built-in UI components
No opinion about how your site should look.

this means it is highly customizable !
for example almost every website made with Boostrap look almost the same, unless there is some heavy CSS code to change the default styling.
However, that's not the case with Tailwind.

Tailwind and HyperColor:

Tailwind comes in with a variety of predefined colors

which we can easily customize in the "tailwind.config.js"
Gradient Colors with Tailwind are also extremely easy to do.
for example :
bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500

They even have a whole website HyperColor dedicated to their Color Gradients if you ever got confused !

Tailwind and Hericons :

Tailwind comes in with Heroicons a Beautiful hand-crafted set of SVG icons (with both outline and Solid styles).

Optimized Production :

Tailwind purge removes all unused CSS and @keyframes .

Think of Tailwind like a giant box of LEGO — you dump it all out on the floor and build what you want to build, then when you’re done you put all the pieces you didn’t use back into the box.
Example of how to use tailwind purge :

// tailwind.config.js
module.exports = {
  purge: [
    './src/**/*.html',
    './src/**/*.vue',
    './src/**/*.jsx',
  ],
  theme: {},
  variants: {},
  plugins: [],
}

Provide an array of paths to all of your template files using the purge option as shown.
Read the documentation for more details.

Should you use Tailwind ?

Go with Tailwind if you need a sleek design, a user interface where building with components will be important (because tailwind strongly favors component-based UI).

Conclusion

Building Components with Tailwind focus on the design and the looks of small components and makes them super reusable.

if you want to build micro-components in a elegant way, TailwindCSS is the way to go.

DEV Community: Safouene Turki