What’s Coming in Vue 3.5?

Vue.js, is gearing up for a new minor release with Vue 3.5. This version (currently in Alpha) brings a range of enhancements, new features, and important changes to improve the development and user experience. Here's a look at what's coming in Vue 3.5 based on the official changelog and an interview our friends Michael and Alex had with Evan over at the DejaVue podcast.

TLDR

Checkout this video on YouTube.

Reactive Props Destructure

Reactive props destructuring has been in an experimental state for about a year now but with 3.5 is landing as a stable feature. This feature allows you to destructure props from the defineProps macro without loosing reactivity.

import { watchEffect } from 'vue'

const { count } = defineProps(['count'])

watchEffect(() => {
  // this will log every time the count prop changes from parent
  console.log(count)
})

Evan says: “almost every single [developer] who used [the reactive props destructure] at scale in their real projects came back with positive feedback. They’re like, we love this… we want to see this feature be stabilized.”

For those who don’t want to use the feature, there is a flag provided to turn it off.

// vite.config.js
export default {
  plugins: [
    vue({
      script: {
        propsDestructure: false
      }
    })
  ]
}

useTemplateRef

The current process for declaring a template ref looks like this:

<script setup>
// first you defined a ref with the value of undefined or null
// and name the resulting vartiable whatever you want
const divEl = ref();
</script>

<template>
<!-- Then use the same name as the value for a `ref` attribute 
somewhere in the template
 -->
<div ref="divEl" ></div>
</template>

Their are 2 problems with this approach:

1. Sometimes it’s confusing. Is divEl reactive data or a DOM element? If you have a convention for naming template refs it’s not bad but ultimately you have to look in the template too for the matching ref= to be sure.
2. Also, this limits you to defining template refs ONLY inside the component script setup section. This means composables that want access to a DOM element must accept a template ref as an argument.

Now with useTemplateRef both problems are solved.

// MyComposable
export const useMyComposable = (options = {
  templateRef: 'el'
})=>{
  // very clearly a template ref due to the name of the function 👇 
  const theEl = useTemplateRef(options.templateRef);
}

// MyComponent
<script setup>
// no need to define the template ref in the component
// that can be the composables job
useMyComposable()
useMyComposable({ templateRef: 'el2' })
</script>
<template>
<div ref="el"></div>
<div ref="el2"></div>
</template>

useId

The new useId utility composable returns a unique ID that’s stable across server rendering and client rendering (one less way hydration mismatches can sneak into your apps, yay! 🎉). This is great for use with form element attributes like for and id and accessibility attributes.

<!--MyCustomInput-->
<script setup>
defineProps({
  label: String
  help: String
  //...
})

const inputId = uesId();
const helpTextId = useId();
</setup>
<template>

<label :for="inputId">{{label}}</label>
<input :id="inputId" :aria-describedby="helpTextId"/>
<p :id="helpTextId">{{ help }}</p>

</template>

Memory Improvement === Faster Apps

According to Evan “the first significant change is internal reactivity refactor take 2.” The refactor means 60% less memory usage which is a huge win for any app that works with large arrays of reactive data. In fact, the Vue team took special care to optimize many common array methods individually so that iterating over arrays can be as much as 10x faster.

Hear it from Evan himself in the DejaVue podcast episode: The Future of Vue.js (with Evan You) or take a look at the changelog for more info.

SSR Related Improvements

While not yet in the change log, Evan mentions that other SSR related improvements are on the way including:

• lazy hydration using async components as the boundary. This means you’ll be able to define when the JavaScript that hydrates a component client side is sent to the browser in the defintion of the async component.
• selective allowance of hydration mismatches making it easier to work with data that’s never expected to be the same between client and server (like dates).

Conclusion

These are just some of the highlights of what you have to look forward to in the next minor version of Vue (Vue 3.5). Other bug fixes and features include:

• better prop type inference
• support for directly nesting Teleport inside Transition
• app.onUnmount() for registering cleanup functions
• failSilently argument for onScopeDispose
• and more!

Checkout the changelog and definitely give this podcast episode a watch if you’re curious to know more!