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 js 3.5 based on the official changelog and an interview our friends Michael and Alex had with Evan over at the DejaVue podcast.
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
}
})
]
}
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:
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.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>
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>
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.
While not yet in the change log, Evan mentions that other SSR related improvements are on the way including:
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:
app.onUnmount()
for registering cleanup functionsCheckout the changelog and definitely give this podcast episode a watch if you’re curious to know more!
Our goal is to be the number one source of Vue.js knowledge for all skill levels. We offer the knowledge of our industry leaders through awesome video courses for a ridiculously low price.
More than 200.000 users have already joined us. You are welcome too!
© All rights reserved. Made with ❤️ by BitterBrains, Inc.