Composition API Tag

What’s new in Vue 3

Vue 3 – The Progressive Javascript Framework’s progress over the years is nothing short of impressive.

If you’re someone migrating your apps to Vue 3 (or) experimenting Vue 3 for your next project this draft should help you kickstart with confidence.

First of all, why does this update matter?

If we look at the journey of Vue so far, it greatly traversed being a library to a framework trend making it much more powerful yet sticking to its lightweight nature.

With the core releasing a new major version, all the other parts of the framework needed to move forward together. Having said that, there were quite a lot of new members we would have in our party during migration. Let’s get introduced!

Why Vue 3?

In short, Vue 3 would be the new default.

Vue 2 would remain in LTS (long-term support) version for 18 months, which means that it will still get security updates and is absolutely safe to stick with it for a while. But, isn’t it a great time for us to migrate our existing projects if any?

Vue 3 is faster, smaller, more maintainable and it’s easier to target native - Evan Vue

Smaller Vue core – Size improvement reached by the combination of greater code modularity, a smaller core runtime, and a tree-shaking-friendly compiler. Thus the new core would thus be reduced from about 20KB to 10KB gzipped.

The compiler will generate tree-shaking-friendly code. If you use a feature that requires a function in your template, the compiler will automatically generate code that imports it. But if you don’t use a feature, then we generate code that does not import it, which means the feature will be tree-shaken.

Better rendering performance – The Vue 3 renderer improves the performance of the rendering process by using optimizations such as the hoisting and inlining of static parts and implementing Vue 3’s reactivity with ES6 proxies.

Below is an infographic proofing the metrics between v-2.5 and v.3.0 proto

Pic courtesy: medium.com

Vite – the next generation frontend tooling

Well, despite being one of our favorite topics to speak We’ll try to wrap it short.

Vite is a lightweight and fast build toolchain with first-class Vue SFC support. It is created by Evan You, the author of Vue himself!

Vue 3 official build setup is now powered by Vite. So this would be one of our newest members to welcome!

Composition API

This topic deserves a separate article on its own, yet will try to pin those dancing in my mind post my experimentations.

Vue 3 introduced the Composition API as an alternative method to the Options API for writing component states and logic. It’s simply a set of APIs that allows us to author Vue components using imported functions instead of declaring options.

It is an umbrella term that covers the following APIs:

Reactivity API, e.g. ref() and reactive(), allows us to directly create reactive state, computed state, and watchers.

Lifecycle Hooks, e.g. onMounted() and onUnmounted(), allows us to programmatically hook into the component lifecycle.

Dependency Injection, i.e. provide() and inject(), allows us to leverage Vue’s dependency injection system while using Reactivity APIs.

Vue clearly pointed out that they don’t have any plans to deprecate options API. Here’s the exact statement from the document FAQ

No, we do not have any plan to do so. Options API is an integral part of Vue and the reason many developers love it. We also realize that many of the benefits of Composition API only manifest in larger-scale projects, and Options API remains a solid choice for many low-to-medium-complexity scenarios.

Pros of using Composition APIs

We can create standalone reactive states and/or properties

In Vue 2 we’re kind of bound to the component scope for the reactive state. With Vue 3 you don’t need a component anymore to create a reactive state.

We can abstract reactive state

Sometimes setup in Vue components can get really bloated with creating many reactive properties. That’s why it could be nice to have them abstracted in standalone javascript files. This is preferably termed composable.

Better Logic Reuse

The primary advantage of Composition API is that it enables clean, efficient logic reuse in the form of Composable functions. It solves all the drawbacks of mixins, the primary logic reuse mechanism for Options API

Better Type Inference

Code written in Composition API can enjoy full type inference with little need for manual type hints.

Smaller Production Bundle and Less Overhead

Code written in Composition API and <script setup> is more efficient and minification-friendly than Options API equivalent. This is because the template in a <script setup> component is compiled as a function inlined in the same scope of the <script setup> code. Unlike property access from this, the compiled template code can directly access variables declared inside <script setup>, without an instance proxy in between. This also leads to better minification because all the variable names can be safely shortened.

Better code sharing

Inside the setup hook, we can group parts of our code by logical concern.

More Flexible Code Organization

The Options API uses options like data, methods, and mounted. With the Composition API, we have a single setup hook in which we write our reactive code.

This results in better code organization. Let’s see how with a simple code example. We’ll see how we write in Vue2, rewrite in composition API then further fine-tune with the new script setup syntax.

Pic courtesy: medium.com

Pic courtesy: medium.com

Pic courtesy: medium.com

Common problems with Options API

Having said Vue doesn’t have plans to deprecate options API anytime soon. Why should we care about composition API?

Vue 2 supports a few ways to reuse code between components;

• Mixins
• Renderless components
• Higher-order components

These methods of reuse each come with their own drawbacks, namely:

• Unclear where component options are coming from (mixins)
• Namespace clashes (higher-order components, mixins)
• Performance costs (higher-order components, renderless components)

Scattered logics – In Vue2, component options such as data, computed, methods, watch are used to organize the logic. This approach makes it hard to read and understand as the component grows.

Note on <script setup>

<script setup> is a compile-time syntactic sugar for using Composition API inside Single File Components (SFCs). It is the recommended syntax if we are using both SFCs and Composition API. It provides a number of advantages over the normal <script> syntax:

More succinct code with less boilerplate

Ability to declare props and emitted events using pure TypeScript

Better runtime performance (the template is compiled into a render function in the same scope, without an intermediate proxy)

Better IDE type-inference performance (less work for the language server to extract types from code)

Unlike normal <script>, which only executes once when the component is first imported, code inside <script setup> will execute every time an instance of the component is created.

<script setup> can be used alongside normal <script>

Simpler state management with Pinia

Pinia, a lightweight state management library for Vue.js, allows us to share a state across components/pages & gained a lot of traction recently. It uses the new reactivity system in Vue 3 to build an intuitive and fully typed state management library. It’s now the new default state management library for Vue 3. It is maintained by the Vue core team and works with both Vue 2 and Vue 3.

For more information and to develop a website using Vue.js, Hire Vue.js Developer from us as we give you a high-quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft”.

To develop a Website using Vue.js, please visit our technology page.

Content Source:

1. medium.com

Alpha release of Vue 3 – New features at glance

Vue 3 isn’t officially released yet, but the Vue team has released the Alpha version to use some of the features that will be shipped with Vue 3.

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.

Before we start coding, let’s go over the new features in Vue 3.

New features in Vue 3

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

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

If you are new to Composition API, here is how we can use it to implement a component:

<template>
  <div class="counter">
    <p>count: {{ count }}</p>
    <p>NewVal (count + 2): {{ countDouble }}</p>
    <button @click="inc">Increment</button>
    <button @click="dec">Decrement</button>
    <p> Message: {{ msg }} </p>
    <button @click="changeMessage()">Change Message</button>
  </div>
</template>
<script>
import { ref, computed, watch } from 'vue'
export default {
  setup() {
/* ---------------------------------------------------- */
    let count = ref(0)
    const countDouble = computed(() => count.value * 2)
    watch(count, newVal => {
      console.log('count changed', newVal)
    })
    const inc = () => {
      count.value += 1
    }
    const dec = () => {
      if (count.value !== 0) {
        count.value -= 1
      }
    }
/* ---------------------------------------------------- */
    let msg= ref('some text')
    watch(msg, newVal => {
      console.log('msg changed', newVal)
    })
    const changeMessage = () => {
      msg.value = "new Message"
    }
/* ---------------------------------------------------- */
    return {
      count,
      inc,
      dec,
      countDouble,
      msg,
      changeMessage
    }
  }
}
</script>

And here’s the equivalent code in Options API:

<template>
  <div class="counter">
    <p>count: {{ count }}</p>
    <p>NewVal (count + 2): {{ countDouble }}</p>
    <button @click="inc">Increment</button>
    <button @click="dec">Decrement</button>
    <p> Message: {{ msg }} </p>
    <button @click="changeMessage()">Change Message</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      count: 0,
      msg: 'some message'
    }
  },
  computed: {
    countDouble() {
      return this.count*2
    }
  },
  watch: {
    count(newVal) {
      console.log('count changed', newVal)
    },
    msg(newVal) {
      console.log('msg changed', newVal)
    }
  },
  methods: {
     inc() {
      this.count += 1
    },
    dec() {
      if (this.count !== 0) {
        this.count -= 1
      }
    },
    changeMessage() {
      msg = "new Message"
    }
  }
 
}
</script>

We can see that using Composition API allows us better organization by keeping the the code (state, methods, computed properties, watchers etc) of particular features together, which was not possible in Options API.

In the above example, the code for counter and the code for changing a message is clearly separated in Composition API.

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, as shown below:

//message.js
import { ref, watch } from 'vue'
export function message() {
  let msg = ref(123)
  watch(msg, newVal => {
    console.log('msg changed', newVal)
  })
  const changeMessage = () => {
    msg.value = 'new Message'
  }
  return { msg, changeMessage }
}

Using the shared code in our component

<template>
  <div class="counter">
    <p>count: {{ count }}</p>
    <p>NewVal (count + 2): {{ countDouble }}</p>
    <button @click="inc">Increment</button>
    <button @click="dec">Decrement</button>
    <p>Message: {{ msg }}</p>
    <button @click="changeMessage()">change message</button>
  </div>
</template>
<script>
import { ref, computed, watch } from 'vue'
import { message } from './common/message'
export default {
  setup() {
    let count = ref(0)
    const countDouble = computed(() => count.value * 2)
    watch(count, newVal => {
      console.log('count changed', newVal)
    })
    const inc = () => {
      count.value += 1
    }
    const dec = () => {
      if (count.value !== 0) {
        count.value -= 1
      }
    }
    let { msg, changeMessage } = message()
    return {
      count,
      msg,
      changeMessage,
      inc,
      dec,
      countDouble
    }
  }
}
</script>

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>

Equivalent code in Vue 2:

<template>
  <div class="counter">
    <p> Count: {{ count }} </p>
    <button @click="increment"> Increment </button>
    <button @click="decrement"> Decrement</button>
  </div>
</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:

<template>
  <Suspense>
    <template #default>
      <div v-for="item in articleList" :key="item.id">
        <article>
          <h2>{{ item.title }}</h2>
          <p>{{ item.body }}</p>
        </article>
      </div>
    </template>
    <template #fallback>
      Articles loading...
    </template>
  </Suspense>
</template>
<script>
import axios from 'axios'
export default {
  async setup() {
    let articleList = await axios
      .get('https://jsonplaceholder.typicode.com/posts')
      .then(response => {
        console.log(response)
        return response.data
      })
    return {
      articleList
    }
  }
}
</script>

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 to argument.

Let’s see this in action:

<Teleport to="#modal-layer">
  <div class="modal">
      hello
  </div>
</Teleport>

Any code inside <Portal></Portal> will be displayed in the target location mentioned.

<div id="modal-target"></div>

At the time of writing this article, <Teleport> doesn’t work in the Alpha version mentioned above.

For more information and to develop website using Vue.js, Hire Vue.js Developer from us as we give you a high-quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft”. To develop Website using Vue.js, please visit our technology page.

Content Source:

1. blog.logrocket.com