NextTick API in Vue.js

<script>
import { nextTick } from 'vue'

export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    async increment() {
      this.count++

      // DOM not yet updated
      console.log(document.getElementById('counter').textContent) // 0
    }
  }
}
</script>

<template>
  <button id="counter" @click="increment">{{ count }}</button>
</template>

In the above program, we are changing the state of count by doing count++. But this will not update the DOM instantly rather the vue.js frameworks collects this information in the backend. After the whole execution of increment() method, It will update the DOM asynchronously.

But the problem is document.getElementById('counter').textContent) returns 0 in the increment() method. so if someone wants to use DOM element immediately, which is not possible in Vue.js directly. That’s where we have to use nextTick global API. nextTick allows you to execute code after you have changed some data and Vue.js has updated the virtual DOM based on your data change, but before the browser has rendered that change on the page.

We can pass the callback function to the nextTick(callback(){}) which can be triggered after the successful DOM update. You can either pass a callback as an argument, or await the returned Promise.

import { nextTick } from 'vue'

export default {
  methods: {
    increment() {
      this.count++
      nextTick(() => {
        // access updated DOM
      })
    }
  }
}

Why Not SetTimeout ?

Some people would think, why not setTimeOut!. We can also use setTimeOut But the problem is When you invoke setTimeout…

setTimeout(function() { 
    // access updated DOM
}, 100);

then the browser would have a chance to update the page, and then your callback would get called. So the UI will render the old record first and then the new record will come. It’s not look good right. But with the help of nextTick() we can change the DOM value before being render into the screen. That’s the beauty of this API in Vue.js

Summary

nextTick() can be used immediately after a state change to wait for the DOM updates to complete. We should not use setTimeOutto update the DOM rather should prefer nextTick()

The post When to use NextTick API in Vue.js appeared first on Program Easily.

Pinia is a library store for Vue.js. It will work with Vue.js 3 as well as Vue.js 2. Pinia holds the state and business logic which is not bounded with component object trees. In other words, I would say it creates a global state where everybody can read and write the data. Pinia has three area’s as follows,

1. State
2. Getters
3. Action

We can assume and compare these things with data, computed and methods in components.

Why Pinia (A Store)

Store will have the data that can be used everywhere in our application. Meanwhile we should avoid the local data in the store which can be added in the component instead. Pinia is a choice if your application needs to access the global state values.

Features of Pinia

• Hot module replacement
  • Modify your stores without reloading your page
  • Keep any existing state while developing
• Plugins: extend Pinia features with plugins
• Proper TypeScript support or autocompletion for JS users
• Server Side Rendering Support
• Devtools support
  • A timeline to track actions, mutations
  • Stores appear in components where they are used
  • Time travel and easier debugging

Full Tutorial

Installations

You can install pinia with the help of NPM or Yarn as follows,

npm install pinia
or
yarn add pinia

Inject Pinia with CreateApp

Here we are going to have only one store for the application. So we have to create its instance and inject the same in VUE createApp. You can call it a root store.

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const pinia = createPinia()
const app = createApp(App)

app.use(pinia)
app.mount('#app')

So what createPinia does here ?. It creates the entity which holds the state for our application. And It’s global state where one can read and write as well. It has three concepts or property’s

1. state
2. getters
3. actions

(You can assume this three components with data, computed and methods)

Create the Store

First we need to create the store template. We can create a store template using defineStore() and it requires a unique name. We may use this template across our application.

import { defineStore } from 'pinia'

// useStore could be anything like useUser, useCart
// the first argument is a unique id of the store across your application
export const useStore = defineStore('main', {
  // other options...
})

Second we need to use this store template inside the setup() function so that it will create the store. We have to call useStore() as follows,

import { useStore } from '@/stores/counter'

export default {
  setup() {
    const store = useStore()

    return {
      // you can return the whole store instance to use it in the template
      store,
    }
  },
}

Once the store is created you can access its properties like state, getters and actions.

State

The state is the heart of the system. It is a function that returns the initial state of the application.

import { defineStore } from 'pinia'

const useStore = defineStore('storeId', {
  // arrow function recommended for full type inference
  state: () => {
    return {
      // all these properties will have their type inferred automatically
      counter: 0,
      name: 'Eduardo',
      isAdmin: true,
    }
  },
})

We can access the store to read and write its data through store instance, and we can reset it to the initial state as well

const store = useStore()

store.counter++

store.$reset()

Getter

We can define the getters property in defineStore() template. I would say, it is a replacement for computed values.

export const useStore = defineStore('main', {
  state: () => ({
    counter: 0,
  }),
  getters: {
    // automatically infers the return type as a number
    doubleCount(state) {
      return state.counter * 2
    },
    // the return type **must** be explicitly set
    doublePlusOne(): number {
      // autocompletion and typings for the whole store 
      return this.doubleCount + 1
    },
  },
})

Then we can access and use the getters inside the template as follows,

<template>
  <p>Double count is {{ store.doubleCount }}</p>
</template>

<script>
export default {
  setup() {
    const store = useStore()

    return { store }
  },
}
</script>

Actions

Actions are the replacement for the methods. We can add our actions in the defineStore() template. Unlike getters, we can write asynchronous operations inside action. It will useful for creating API calls for our business logic

import { mande } from 'mande'

const api = mande('/api/users')

export const useUsers = defineStore('users', {
  state: () => ({
    userData: null,
    // ...
  }),

  actions: {
    async registerUser(login, password) {
      try {
        this.userData = await api.post({ login, password })
        showTooltip(`Welcome back ${this.userData.name}!`)
      } catch (error) {
        showTooltip(error)
        // let the form component display the error
        return error
      }
    },
  },
})

Summary

• Pinia is a store library for Vue, it allows you to share a state across components/pages.
• Compared to Vuex, Pinia provides a simpler API with less ceremony, offers Composition-API-style APIs, and most importantly, has solid type inference support when used with TypeScript.
• The formula is Create the template -> create the store with state, getters and actions and use across the application.

The post Pinia – The Vue Store Library appeared first on Program Easily.

• React
• Angular
• Vue.js

are the declarative and component based rich frameworks. These three are perfect and stand by their super features as well. But What you will choose ? That’s the question here. And the answer is, it all depends. Yes, it depends upon your use cases, projects and requirements. Still in struggle to pick one, then this article for you. Let’s take a deep dive into it.

Vue vs React vs Angular

What Should I Choose Between React, Angular and Vue.js

We can create and update dynamic web pages using JavaScript. Though JavaScript is good, it is really difficult sometimes to build a complex website. You have to work with DOM and manipulate Data. Oh!! It’s not the best way right. Even frameworks like jQuery couldn’t solve such problems. So these frameworks segregate the process into four modules,

1. Core Library
2. Virtual DOM
3. Data
4. Components

Virtual DOM acts as a shallow DOM of the web pages. I would say that the Virtual DOM will respond while we change the Data. It will maintain the old data and compare the same with new one while we refresh it. So it will update the actual DOM, whenever there is a difference in old and new data. We are calling this Reactive feature. You don’t have to worry about the traditional DOM update process, rather you can concentrate more on your business data. Design the UI as a component and pass the data dynamically into it. Core Library will have all common library files for the utilities. These are all the fundamental features of these modern frameworks. This really makes our work simple and helps to build responsive rich applications.

Vue vs React vs Angular – Survey

Survey of most popular web frameworks – Year 2021

LINK – https://insights.stackoverflow.com/survey/2021#section-most-popular-technologies-web-frameworks

React

React is the most popular and has more than 183k GitHub stars. React is not a new language; rather I would say it is just a JavaScript framework. Anyone who knows JavaScript, is able to adapt themselves over a short period. It was created by Facebook and made open source later. So it has a large DEV Community as well. It is really simple to approach people. You could clarify your questions and concepts easily.

When to prefer React Over Angular and VUE

• • React is simple to learn. Over a short period you can adapt to it. Whereas Angular is a type-script based language and will take time to learn about the inbuilt framework functionalities.
  • React follows one way data flow which helps to identify the state change easily. Whereas angular follows Bi-directional data flow. This makes it harder to control the data flow.
  • Angular uses traditional DOM. So it needs to rewrite the whole HTML tree when we change the data ( To compromise this they are using a change detection mechanism). React Virtual DOM is much faster than angular traditional DOM. It will not rewrite the entire HTML tree when we change the data.
  • Most people prefer React. Oh this is a really nice one right!
  • React has a larger DEV Community than Vue.js. You can clarify the doubts easily here.
  • If you love JSX templates over HTML templates you would prefer React. But most people won’t prefer JSX syntax.
  • You can use React with React native as well for mobile application development. This will help to write some common functionalities.
  • If you are going to depend on a lot of third party dependencies, then you can prefer React.

VUE

Vue.js is an open source JavaScript Framework. It was created by Evan You and maintained by active core team members along with him. Vue.js is used mainly to create rich single page applications and user interfaces. Believe me, Vue.js has 194k stars more than React in GitHub. It is one of the growing languages. And it is very simple to learn. Whoever knows JavaScript, then can easily adapt themselves to learn VUE in a very short time.

When to prefer VUE over React and Angular

• Vue.js is very simple and easier than React as well. The single file components contain HTML, CSS and Script in the same file which makes developer friendly component design.
• Size of the Vue.js runtime library is very small. Even lightweight than React.
• If you love HTML templates and CSS over JSX, then VUE is your language.
• In React when the component state changes, it will trigger the re-render for the entire component sub-tree, taking that component as root. But in VUE, a component’s dependencies are automatically tracked during its render, so the system knows precisely which components actually need to re-render when state changes.
• React also follows one way data flow like React. When you update the parent component, it will re-render all it’s children.
• Code readability is better compared to React and Angular.

Angular

Angular is a type script based open source front end framework. It was created and maintained by google. Angular is a choice for most large companies since it has been used to develop enterprise-grade applications. It is having 79.k stars by today. Angular uses traditional DOM. So it needs to rewrite the whole HTML tree when we change the data ( To compromise this they are using change detection mechanism).

When to prefer Angular Over React and VUE

• Angular has an in-built Material toolset which offers a lot of components. It makes it easier to design the rich design in a fast manner.
• Angular also has a large DEV community which makes solving the problem easier.
• It is well suited for enterprise level application development since it is a framework (Whereas React and VUE are libraries).
• Angular has a lot of inbuilt tools and modules which offers us not to depend on external libraries.
• Angular follows bi-directional data flow. It has both pros and cons. And this makes the development a little bit easier.
• Angular uses a change detection mechanism to detect the state change. So even if it updates the entire tree of real DOM, it effectively matches the performance of Virtual DOM operation.

Vue vs React vs Angular – Summary

I would say, all three frameworks are good. The matter is which one suites our requirement,

1. If you want to learn quickly, you are going to create a simple website UI, you don’t want any community support and want to use HTML and CSS to design then I will prefer VUE.
2. React can be preferred when you want to learn quickly, you are going to create a simple or medium UI with community support and third party dependencies .
3. If you going to create enterprise level application, then Angular is your choice.

The post Vue vs React vs Angular appeared first on Program Easily.

export default {
  props: ['foo'],
  created() {
    // props are exposed on `this`
    console.log(this.foo)
  }
}

Let’s take a deep dive into that with this post. If you are not familiar with Vue.js components, You should read Components in Vue 3  first.

One way data flow – Props in Vue 3

Props follows one way data flow with it’s child component property. As a result, when we update the value of parent props, it will flow down and update the child property as well. At the same time it will not do vice versa. If you want to update the component state, the flow should start from the parent and all props in the child component will be refreshed with the latest value. We are having event emit concept to reverse back from child to parent in Vue.js.

export default {
  props: ['foo'],
  created() {
    // ❌ warning, props are readonly!
    this.foo = 'bar'
  }
}

Suppose if you want to change the prop in the child component based on business scenario, you can transform the same using computed in Vue.js

export default {
  props: ['size'],
  computed: {
    // computed property that auto-updates when the prop changes
    normalizedSize() {
      return this.size.trim().toLowerCase()
    }
  }
}

Note

However, when passing arrays and objects as props, Vue.js will not prevent mutation of it’s nested properties. Because objects and arrays are passed by reference. Firstly, you should avoid such mutations as a best practice. Secondly, if you need this scenario in-deed, the child can emit an event and the parent listens to it and performs the mutation.

Static and Dynamic Props

The static props are nothing but just assign the static values like below,

<Blog title="I am a static prop example" />

You can also assign dynamic values to props with the help of  v-bind or its : like below

<!-- Dynamically assign the value of a variable -->
<Blog v-bind:title="post.title"></Blog>
// OR
<Blog :title="post.title" </Blog>

Passing other different values to prop

We can pass Numbers, Boolean, Arrays as well as Object to a props value.

// Number
<!-- Even though `42` is static, we need v-bind to tell Vue that -->
<!-- this is a JavaScript expression rather than a string.  -->
<Blog :likes="42" />

<!-- Dynamically assign to the value of a variable. -->
<Blog :likes="post.likes" />

// Boolean
<!-- Including the prop with no value will imply `true`. -->
<Blog is-published />

<!-- this is a JavaScript expression rather than a string. -->
<Blog :is-published="false" />

<!-- Dynamically assign to the value of a variable. -->
<Blog :is-published="post.isPublished" />

// Array
<!-- this is a JavaScript expression rather than a string. -->
<Blog :comment-ids="[234, 266, 273]" />

<!-- Dynamically assign to the value of a variable. -->
<Blog :comment-ids="post.commentIds" />

// Object
<!-- this is a JavaScript expression rather than a string. -->
<Blog
  :author="{
    name: 'Veronica',
    company: 'Veridian Dynamics'
  }"
 />

<!-- Dynamically assign to the value of a variable. -->
<Blog :author="post.author" />

Validation – Props in Vue 3

There are three ways of prop validations available in Vue.js. If the validation fails, then Vue.js will warn us in the browser’s JavaScript console. This is really needed to define the component and the application developers are aware of the intention of the component as well.

1. Type validation
2. Mandatory or not (Required)
3. Custom validator

export default {
  props: {
    // 1. Type Validation
    //  (`null` and `undefined` values will allow any type)
    propA: Number,
    // Multiple possible types
    propB: [String, Number],
    // 2. Mandatory validation with default value
    propC: {
      type: String,
      required: true,
      default: "Hello"
    },
    // 3. Custom validator
    propF: {
      validator(value) {
        // The value must match one of these strings
        return ['success', 'warning', 'danger'].includes(value)
      }
    }
  }
}

In setup Hook – Props in Vue 3

The setup function is the entry point of the Composition API in Vue.js. The first argument of the setup function is the props argument. Props inside the setup function are reactive by nature.

export default {
  props: {
    title: String
  },
  setup(props) {
    console.log(props.title)
  }
}

If you destructor the props object, it will lose the reactivity. So we should avoid changing the props object there. But if you really need to destructor the props, you can go for toRefs() and toRef() API.

import { toRefs } from 'vue'

export default {
  setup(props) {
    // turn `props` into an object of refs, then destructure
    const { title } = toRefs(props)
    // `title` is a ref that tracks `props.title`
    console.log(title.value)

    // OR, turn a single property on `props` into a ref
    const title = toRef(props, 'title')
  }
}

Special Feature – Boolean Casting

When we use Boolean props , it has a special casting rule. It is similar to the native Boolean attribute in any programming language. Let me show you with below example,

<!-- equivalent of passing :disabled="true" -->
<MyComponent disabled />

<!-- equivalent of passing :disabled="false" -->
<MyComponent />

// The casting rules for Boolean will apply regardless of type appearance order for below example as well
export default {
  props: {
    disabled: [Boolean, Number]
  }
}

Name Casing in Props

When we declare props in Vue.js we have to follow camelCase. It will avoid to use quotes when we dealing them as property keys, and makes as valid JavaScript identifiers.

export default {
  props: {
    greetingMessage: String
  }
}
// using the “Mustache” syntax (double curly braces)
<span>{{ greetingMessage }}</span>

So when we pass the props values to the child component , we can use camelCase. But Here the convention is kebab-case similar to the one below.

<MyComponent greeting-message="hello" />

Summary

In Conclusion,

• Firstly, we are having props as attributes for Components in Vue.js. Props provides additional information about the components.
• Secondly, props follows one way data flow with it’s child component property. When we update the value of parent props, it will flow down and update the child property as well. At the same time it will not vice versa.
• In Vue.js 3, The first argument of the setup function is the props argument. Props inside the setup function are reactive by nature.

The post Props in Vue 3 appeared first on Program Easily.

const focus = {
  mounted: (el) => el.focus()
}

export default {
  directives: {
    // enables v-focus in template
    focus
  }
}

We can use above directive in the template like below,

<input v-focus />

This is a simple example, we can do lot more with this directives. But, here it will focus the input element assuming you haven’t clicked elsewhere on the page. Let’s take the deep dive into it.

Global Directive Registration

In the above example, we are using local registration. In addition, similar to components, we can globally register custom directives in the application instance. So that we can use the directives through out the application in the templates.

const app = createApp({})

// make v-focus usable in all components
app.directive('focus', {
  /* ... */
})

However, we can prefer to use custom directives only when the desired functionality can only be achieved via direct DOM manipulation. Otherwise we could use v-bind because they are more efficient and server-rendering friendly.

Custom Directives in Vue 3 – Hooks

The directive object is providing lot of optional hook functions. For Instance, we would use this hooks to manipulate the DOM, read the old value, component instance and vnode representation as well.

const myDir = {
  // called before bound element's attributes
  // or event listeners are applied
  created(el, binding, vnode, prevVnode) {
    // see below for details on arguments
  },
  // called right before the element is inserted into the DOM.
  beforeMount() {},
  // called when the bound element's parent component
  // and all its children are mounted.
  mounted() {},
  // called before the parent component is updated
  beforeUpdate() {},
  // called after the parent component and
  // all of its children have updated
  updated() {},
  // called before the parent component is unmounted
  beforeUnmount() {},
  // called when the parent component is unmounted
  unmounted() {}
  }
}

Hook Arguments

• el – We can use el to manipulate the DOM
• binding – it is an object having lot of properties
  • value – the value of the directive. Example, v-my-directive=”VALUE”
  • oldValue – the old value of the directive. only available in beforeUpdate and updated
  • arg – the argument of the directive. Example, v-my-directive:foo
  • instance – the instance of the component
  • dir – the definition object of directive
  • modifiers – the modifier object. Example v-my-directive:foo:bar. Here  the modifiers object would be { foo: true, bar: true }
• vnode – The V Node representation of the element
• prevNode – The element of previous render. Only available in the beforeUpdate and updated hooks

Consider the below example,

<div v-example:foo.bar="baz">

// we can represent above directive as below object

{
  arg: 'foo',
  modifiers: { bar: true },
  value: /* value of `baz` */,
  oldValue: /* value of `baz` from previous update */
}

// binding value as JavaScript object literal

<div v-demo="{ color: 'white', text: 'hello!' }"></div>

app.directive('demo', (el, binding) => {
  console.log(binding.value.color) // => "white"
  console.log(binding.value.text) // => "hello!"
}

Dynamic Argument in Directives

We can also pass dynamic argument to the directives. This is one of the special feature of directive. For example,

<div v-example:[arg]="value"></div>

// Here the directive argument will be reactively updated 
   based on arg property in our component state.

Most important this here is , other than el, we should not modify other read-only properties. If you want so, you can follow this dataset

Function Shorthand

If we wants only mounted and updated behavior of custom directives, then we can use function shorthand there.

<div v-color="color"></div>

app.directive('color', (el, binding) => {
  // this will be called for both `mounted` and `updated`
  el.style.color = binding.value
})

Custom Directives in Vue 3 – on Component

As similar to DOM elements, we can use custom directives on component as well. Here It will apply to a component root element. Note that, sometimes the component may have more than one root node. If so, it will ignore the directives and a warning will be shown. Above all, it is not preferable to use custom directives on component.

<MyComponent v-demo="test" />

<!-- template of MyComponent -->

<div> <!-- v-demo directive will be applied here -->
  <span>My component content</span>
</div>

With Directives

In Addition, we can apply custom directives to v-node using withDirectives as follows,

import { h, withDirectives } from 'vue'

// a custom directive
const pin = {
  mounted() { /* ... */ },
  updated() { /* ... */ }
}

// <div v-pin:top.animate="200"></div>
const vnode = withDirectives(h('div'), [
  [pin, 200, 'top', { animate: true }]
])

Summary

In Conclusion,

• Firstly, the custom directive brings some execution on the elements. We can define custom directive as an object containing lifecycle hooks similar to those of a component.
• Use custom directives only when the desired functionality can only be achieved via direct DOM manipulation.
• You would pass dynamic argument to the directives. This is one of the special feature of directive.

References

• https://vuejs.org/guide/reusability/custom-directives.html#introduction
• https://vuejs.org/guide/extras/render-function.html#custom-directives

The post Custom Directives in Vue 3 appeared first on Program Easily.

Petite Vue.js is a JavaScript library which creates the DOM based mutates in places. This will deal with the HTML elements directly similar to Alpine.js. It uses Vue.js template and reactivity modules to update the DOM elements dynamically when the data changes. So here in this Petite Vue Introduction with Example article we are going to look at more details and use cases of petite vue.js in detail. Let’s take a deep dive into it.

Petite Vue Introduction with Example

Petite Vue.js available in CDN network. So we can take it from directly as follows,

<html>

<script src="https://unpkg.com/petite-vue" defer init></script>

<!--process only below element (v-scope specfied elements) -->
<div v-scope="{ count: 0 }">
  {{ count }}
  <button @click="count++">do increment</button>
</div>

</html>

In the above example, count is a reactive one. While you click the button, count changes( data changes ) and it updates the DOM. Reactivity achieved right !. Note that here we are using some more terms, that we described below,

• We are using defer to execute the script after the HTML parsing operations.
• init plays a major role here. init is a custom element that tells petite vue.js to automatically mount the application. You can find this logic from  https://github.com/vuejs/petite-vue/blob/main/src/index.ts#L9
• v-scope will be used to denote the area where the petite vue.js controls the page. Petite Vue.js processes only the v-scope specified element with its child elements.

Without Auto Init

In addition, if you don’t want the auto init , remove it from the script tag. But you have to do it manually to the end of the body as follows.

<script src="https://unpkg.com/petite-vue"></script>
<script>
  PetiteVue.createApp().mount()
</script>

Root Scope – Global Data Object

We can pass the optional data object to createApp()  function. This will act as a global data and available to all expressions.

<html>

<script src="https://unpkg.com/petite-vue"></script>

<!-- global data object passed to createApp available -->
<div v-scope>
  <p>{{ name }}</p>
  <p>{{ reverseName }}</p>
  <button @click="addNumber">Add Number to Name</button>
</div>

<script>
    PetiteVue.createApp({
    // available to all expressions and act as reactive data
    name: 'Program Easily',
    number: 0,
    // getters
    get reverseName() {
      return this.name.split("").reverse().join("");
    },
    // methods
    addNumber() {
      this.name = this.name + ' ' + this.number++
    }
  }).mount()

</script>

</html>

In the above example, we are using variables, getters and methods as global data to all expressions. We can use these values inside v-scope elements. It will maintain reactivity, when you change the data, it will update the DOM elements. You can check the full working example below,

Create Components – Petite Vue Introduction with Example

Creating components using Petite vue.js is a little bit different. We have to create a reusable function that will return the literal object. The returned object will be available as props inside the template. And you need to specify the template with the $template key in the return object. There are two ways to provide the template value.

1. Template String.
2. ID selector to template element.

<html>

<script src="https://unpkg.com/petite-vue"></script>

<template id="pe-btn">
    <div :style="{ margin: '8px'}">
        <button :style="{ padding: '8px', color: color, fontSize: size + 'px' }"> {{ label }} </button>
    </div>
</template>

<div v-scope :style="{ display: 'flex' , justifyContent: 'center'}">
<div v-scope="peBtn({label: 'Red Button', color : 'red', size: '20'})"></div>
<div v-scope="peBtn({label: 'Green Button', color : 'green', size: '20'})"></div>
<div v-scope="peBtn({label: 'Yellow Button', color : 'yellow', size: '20'})"></div>
</div>

<script>

// reusable function that will return the literal object
function peBtn(props){
    return {
        $template: "#pe-btn",
        label: props.label,
        color: props.color,
        size: props.size
    }
}

PetiteVue.createApp().mount()

</script>

</html>

In the above example, we are creating the button component. The button component has three props namely label, color and size. Likewise you can create your own components with n number of props. When you wish to use your component you have to give v-scope attribute to the parent element. So that Petite Vue.js listen and process those elements. You can check the full working example below,

Reactive Modules – Petite Vue Introduction with Example

Already we have seen the createApp() module which is used to mount the application. In addition Petite Vue.js provides a reactive module ( from @vue/reactivity ). Using a reactive module, we can create a global store. The data inside this store will act as reactive data and available throughout the application. Let us check with below example,

<html>
  <script src="https://unpkg.com/petite-vue"></script>
  <!-- local data object -->
  <div
    v-scope="{ 
      localName: 'Local PE', 
      localNumber: 0,
      get reverseName() {
        return this.localName.split('').reverse().join('')
      },
      addNumber() {
        this.localName = this.localName + ' ' + this.localNumber++;
      },
     }"
  >
    <h2>Global</h2>
    <!-- using global reactive data object -->
    <p>Name : {{ store.globalName }}</p>
    <p>Reverse Name : {{ store.reverseName }}</p>
    <button @click="store.addNumber">Add Number to Global Name</button>
    <h2>Local</h2>
    <!-- using local reactive data object -->
    <p>Name : {{ localName }}</p>
    <p>Reverse Name : {{ reverseName }}</p>
    <button @click="addNumber">Add Number to Local Name</button>
  </div>
  <script>
    // global reactive store
    const store = PetiteVue.reactive({
      globalName: "Global PE",
      globalNumber: 0,
      // getters
      get reverseName() {
        return this.globalName.split("").reverse().join("");
      },
      // methods
      addNumber() {
        this.globalName = this.globalName + " " + this.globalNumber++;
      },
    });
    // pass reactive object to createApp, so that it will act as global store
    PetiteVue.createApp({ store }).mount();
  </script>
</html>

In the above example, we are creating a global store using reactive objects. And we are creating local data objects using v-scope value. The global store data available throughout the application. At the same time, local data objects are accessible only inside the respective v-scope element. Here the state will maintain that Add number to Global Name  will change the global records. The same way Add number to Local Name will change the local records.  You can check the full working example,

Summary

• Petite Vue.js is a JavaScript library which creates the DOM based mutates in places.
• It uses Vue.js template and reactivity modules to update the DOM elements dynamically when the data changes.
• v-scope will be used to denote the area where the petite vue.js controls the page. Petite Vue.js processes the child elements only inside the v-scope specified element.
• Petite Vue.js provides a reactive module ( from @vue/reactivity). Using a reactive module, we can create a global store.
• And it’s a new one. So let’s wait and will see the full features of Petite vue.js

References

• https://github.com/vuejs/petite-vue
• https://www.npmjs.com/package/petite-vue

The post Petite Vue Introduction with Example appeared first on Program Easily.

While we create components, we will go step by step procedure to fulfill its requirements. In Vue.js we can derive this as follows,

1. Data observation
2. template compilation
3. mount the component instance to DOM
4. update the DOM based on data

Between the steps, Vue.js provides a predefined function called Life Cycle Hooks. We can add our own logics by calling these life cycle hooks in between the component creations. It will be very helpful to know about Components in Vue3 before moving to this session. Let’s take the deep dive!

Lifecycle hooks in Vue 3

For Example, As per the component creation flow, the created hook will be called after the component instance is created.

Vue.createApp({
  data() {
    return { state: "hello to lifecycle hooks" }
  },
  created() {
    // `this` points to the vm instance
    console.log(this.state) // => hello to lifecycle hooks
  }
})

As shown above, we can use other hooks which are used to be called at different stages of component creation.

Options API vs Composition API

Above all, we can access lifecycle hooks in both options API and composition API. We have to invoke life cycle methods inside the setup function in the Composition API. Option API is available in both Vue.js 2 and 3 whereas composition API is available from Vue.js 3.

Most importantly, beforeCreate and created are not available in composition API. However, we can write it’s logic directly in the setup function since setup is invoked around the created hook.

Note

In Optional API, all lifecycle hooks have this context bound to the instance. So we should not go for arrow functions (e.g. created: () => this.createdCallBack()) since arrow functions bind the parent context to this.

Lifecycle hooks – Options API

• beforeCreate – called after the component instance has been initialized but before data observation.
• created – called after the component instance has been created. Since instance is created we can set up data observation, computed properties, methods, watch/event callbacks. But we can not do DOM operation since the component is not mounted. The $el property is also not available yet.
• beforeMount – called just before the component mounting process.
• mounted – This is an important hook after created hook in the options API. mounted called after the component instance has been mounted. If the root component instance is mounted, then vm.$el will be there in the DOM. But it does not guarantee that all child components have also been mounted.
• beforeUpdate – called at run time when data changes before the DOM is updated. It is a good place to remove manually added event listeners.
• updated – called at runtime after the data changes and DOM patched.
• beforeUnMount – called before a component instance is unmounted.
• unmounted – called after a component instance has been unmounted.
• errorCaptured – called when an error occurs from any child component.
• renderTracked – called when virtual DOM rerender tracked.
• renderTriggered – called when virtual DOM rerender triggered.

Lifecycle hooks Vue 3 Example

Life cycle hooks provide the ways to add their logic at specific stages while creating the components. Moreover in Vue.js 3, they are tree-shakable modules. You can import and use them in your composable logics.

import { onMounted } from "vue";

As shown above, we can get the lifecycle hooks  and use them in our logics at different stages. The full example for all lifecycle hooks shown below,

<template>
  <div>
    <button v-on:click="addToCart">Add to cart</button>
    <p>Cart{{ state }}</p>
  </div>
</template>

<script>
import {
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  onErrorCaptured,
  onRenderTracked,
  onRenderTriggered,
  ref,
} from "vue";

export default {
  setup() {
    onBeforeMount(() => {
      console.log("Component is onBeforeMount!");
    });
    onMounted(() => {
      console.log("Component is mounted!");
    });
    onBeforeUpdate(() => {
      console.log("Component is onBeforeUpdate!");
    });
    onUpdated(() => {
      console.log("Component is Updated!");
    });
    onBeforeUnmount(() => {
      console.log("Component is onBeforeUnmount!");
    });
    onUnmounted(() => {
      console.log("Component is un mounted!");
    });
    onErrorCaptured(() => {});
    onRenderTracked(({ key, target, type }) => {
      console.log("onRenderTriggered!")
      console.log({ key, target, type });
      /* This will be logged when component is rendered for the first time:
    {
      key: "cart",
      target: {
        cart: 0
      },
      type: "get"
    }
    */
    });
    onRenderTriggered(({ key, target, type }) => {
      console.log("onRenderTriggered!")
      console.log({ key, target, type });
      /* This will be logged when component is rendered for the first time:
    {
      key: "cart",
      target: {
        cart: 0
      },
      type: "get"
    }
    */
    });

    let state = ref(0);
    const addToCart = () => {
      state.value += 1;
    };
    return {
      state,
      addToCart,
    };
  },
};
</script>

<style scoped></style>

GitHub Link :

• https://github.com/programeasily/vue-3-basics/blob/main/src/components/HooksExampleComponent.vue

References :

1. https://v3.vuejs.org/guide/instance.html#lifecycle-hooks
2. https://v3.vuejs.org/api/options-lifecycle-hooks.html#lifecycle-hooks
3. https://v3.vuejs.org/guide/composition-api-lifecycle-hooks.html

Summary

In conclusion,

• Firstly vue.js provides predefined function called Life Cycle Hooks.
• Secondly we can access lifecycle hooks in both options API and composition API.
• Life cycle hooks provide the way to add their logics at specific stages while creating the components.

The post Lifecycle hooks in Vue 3 appeared first on Program Easily.