Vue 3.0

 

VueJS is an open-source progressive JavaScript framework used to develop interactive web interfaces. It is one of the famous frameworks used to simplify web development. VueJS focuses on the view layer. It can be easily integrated into big projects for front-end development without any issues.

 The installation for VueJS is very easy to start with. Any developer can easily understand and build interactive web interfaces in a matter of time. VueJS is created by Evan You, an ex-employee from Google. He later summed up his thought process: "I figured, what if I could just extract the part that I really liked about Angular and build something really lightweight". The first source code commit to the project was dated July 2013, and Vue was first released the following February, in 2014.

 Till now a various version of VUE has been released the detail of the same is given as below

Version	Release date	Title
3	September 18, 2020	One Piece
2.6	February 4, 2019	Macross
2.5	October 13, 2017	Level E
2.4	July 13, 2017	Kill la Kill
2.3	April 27, 2017	JoJo's Bizarre Adventure
2.2	February 26, 2017	Initial D
2.1	November 22, 2016	Hunter X Hunter
2	September 30, 2016	Ghost in the Shell
1	October 27, 2015	Evangelion
0.12	June 12, 2015	Dragon Ball
0.11	November 7, 2014	Cowboy Bebop
0.1	March 23, 2014	Blade Runner
0.9	February 25, 2014	Animatrix
0.8	January 27, 2014	N/A
0.7	December 24, 2013	N/A
0.6	December 8, 2013	VueJS

 

 

Setup

We’ll use the WebPack-based setup.

To do this, clone this repository:

git clone https://github.com/vuejs/vue-next-webpack-preview.git vue-next

cd vue-next

Now install the packages:

npm install

That’s it. We have a working Vue 3 project set up now.

To spin up the application, just run the following:

npm run dev

Open localhost:8080 in your browser, and you can see a simple counter application.

Open the package.json file, you can see the Vue version here. At the time of writing this article, the version is 3.0.0-alpha.8.

Open App.vue and you’ll see the setup() method, i.e. the Composition API already being used here. We might see some lint errors from Vue’s official plugin, eslint-plugin-vue, because the linters are not yet updated to understand the new syntax.

Some of the new features in Vue 3 is as under

 Vue 3 is faster, smaller in file size, and equipped with better TypeScript support. Some of the new features that we can discuss and learn to implement in this article include:

1. Composition API (Now built-in)
2. Multiple root elements (Template syntax )
3. Suspense
4. Multiple V-models
5. Better Reactivity
6. Portals

Composition API was launched as a plugin a few months back, so there is nothing new there, but in Vue 3 we don’t have to install it like a plugin anymore. Now, it’s built into the package and can be used out of the box without any additional setup.

There are two main advantages to using the Composition API:

• Better organization
• Sharing/reusing the code

Vue 3 will still support Options API, so if you think you don’t need composition API you can always use the traditional methods used in Vue 2

As the component grows in size, organizing code becomes an important factor. Any new developer can easily understand the code without spending too much time analyzing all the lines of code.

Before, we could use Mixins to share the code. However, it was hard to keep track of states and methods in different components, and Mixins had the potential to overwrite the existing state or methods in our components if we weren’t careful.

Using the Composition API makes sharing the code much easier. We can factor out the code for a particular feature and use it in multiple places

 

Multiple root elements (template syntax )

In Vue 2,  the template tag can only take one root element. Even if we had just two <p> tags, we had to enclose them within a <div> tag to get it working. Because of this, we had to change the CSS code as well in the parent component so that it looked as expected.

In Vue 3, this restriction is lifted. There is no need for a root element anymore.

We can use any number of tags directly inside the <template></template> section:

<template>

  <p> Count: {{ count }} </p>

  <button @click="increment"> Increment </button>

  <button @click="decrement"> Decrement</button>

</template>

 

Suspense

Suspense is a new feature that renders a default/fallback component until the main component fetches the data.

Sometimes we use async operations to fetch data from the server. Instead of handing the template with v-if and then setting it back when we return the data, Suspense does it for us.

Suspense can be used for both parts of the template, or the whole template.

Multiple v-models

We all know that v-model is used for two-way binding. We mostly use it with form elements. Sometimes, we even use it with custom components.

Vue-2 allowed the use of only one v-model on a component. In Vue-3, we can bind any number of v-models to our custom components.

<template>

      <survey-form v-model:name="name" v-model:age="age"> </survey-form>

    </template>

 

 

 

    //SurveyForm.vue

    <template>

      <div>

        <label>Name: </label>

        <input :value="name" @input="updateName($event.target.value)" />

        <label>Age: </label>

        <input :value="age" @input="updateAge($event.target.value)" />

      </div>

    </template>

    <script>

    export default {

      props: {

        name: String,

        age: Number

      },

      setup(props, { emit }) {

        const updateName = value => {

          emit('update:name', value)

        }

        const updateAge = value => {

          emit('update:age', +value)

        }

        return { updateName, updateAge }

      }

    }

    </script>

 

Better reactivity

Vue 2 already had great reactivity, and you might not have come across any cases where you found that reactivity was lacking. However, there were a few cases where Vue 2 fell short.

Let’s revisit Vue 2 and see what those limitations were.

To demonstrate reactivity, we’ll use watchers to listen to one of the state variables and then modify it to see if the watchers are triggered:

<template>

  <div class="hello" @click="test">test {{list }} {{ myObj }}</div>

</template>

<script>

export default {

  name: "HelloWorld",

  data() {

    return {

      list: [1, 2],

      myObj: { name: "Preetish" }

    };

  },

  watch: {

    list: {

      handler: () => {

        console.log("watcher triggered");

      },

      deep: true

    }

  },

  methods: {

    test() {

      this.list[2] = 4;

      this.myObj.last = "HS";

      delete this.myObj.name;

    }

  }

};

</script>

None of the above three modifications — such as adding a new item to an array based on the index, adding a new item to an object, or deleting an item from the object — is reactive in Vue-2. Hence watchers won’t be triggered, or the DOM would be updated. We had to use the vue.set() or vue.delete() methods.

In Vue-3, these work directly without any helper functions:

export default {

  setup() {

    let list = ref([1, 2])

    let a = ref(0)

    let myObj = ref({ name: 'Preetish' })

    function myFun() {

      list.value[3] = 3

      myObj.value.last = 'HS'

      delete myObj.value.name

    }

    return { myFun, list, myObj }

  }

}

We can see that watcher was triggered all four times in the Vue 3 setup.

Global mounting

When you open main.js in the about project, you’ll notice something different. We no longer use the Global Vue instance to install plugins and other libraries.

Instead, you can see createApp method:

import { createApp } from 'vue'

import App from './App.vue'

const myApp = createApp(App)

myApp.use(/* plugin name */)

myApp.use(/* plugin name */)

myApp.use(/* plugin name */)

myApp.mount('#app')

The advantage of this feature is that it protects the Vue application from third party libraries/plugins we use which might override or make changes to the global instance — mostly by using Mixins.

Now with the createApp method, we install those plugins on a particular instance and not the global object.

Portals

Portal is a feature where we can render a part of the code which is present in one component into a different component in a different DOM tree. There was a third-party plugin called portal-vue that achieved this in Vue 2.

In Vue 3, portal will be built in and it is very easy to use.

Vue 3 will have a special tag called <Teleport>, and any code enclosed within this tag will be ready to be teleported anywhere. The Teleport tag takes a toargument.

<Teleport to="#modal-layer">

  <div class="modal">

      hello

  </div>

</Teleport>

 

Source of information: various sites and blogs on the internet . More to learn as course visit 

www.skillbakery.com