VUECONF US 2019 | Vue 3: What I'm Most Excited About with Chris Fritz

Interested in getting ahead of the curve and learning Vue 3 before its release? Check out our Vue 3 course 👇🏼

0:00 Trends in Vue 3
5:09 Goodbye reactivity caveats
6:30 Multiple root nodes
8:16 Simpler transparent wrappers
17:47 Smarter v-model on components
24:35 Simpler render functions
28:02 Moving to Vue 3

[PrashanthKrishnamurthy]

Here's an outline of the video.


Vue 3 - harder, better, faster, stronger.
Trends - Simpler and more explicit.

List of things that Chris Fritz is excited about:

1. Reactivity caveats are gone.
You can do this now - arr[index] = newVal;


2. Multiple root nodes
<template>
<div></div>
<div></div>
</template>


3. Simpler transparent wrappers
How do you write a custom component today for a 'super-powered' input box?

<BaseInput>
v-model="searchText" placeholder="Search" @keyup.enter="search"
</BaseInput>

The actual component ..
<script>
export default {
inheritAttrs: false,
model: {
event: 'update'
},
props: ['label']
}
</script>
<template>
<label>
{{ label }}
<input v-bind="$attrs" @input="$emit('update', $event.target.value)" v-on="$listeners"/>
</label>
</template>

Compare this to a more concise component.
<script>
export default {
props: ['label']
}
</script>
<template>
<label>
{{ label }}
<input v-bind="$attrs"/>


</label>
</template>


4. No more automatic attribute inheritance.
Explicitly pass arguments using v-bind="$attrs"
You don't have to use inheritAttrs: false (since it will never be true).


5. v-on will compile to attributes.
E.g @keyup compiles to on-keyup.

Just v-bind = "$attrs" ($attrs will incl. all non-emitted listeners)
No more $listeners. No more .native modifier for v-on.


6. v-model will compile to attributes.
Again, just v-bind = "$attrs".
No more overriding the native input event. No more model option.


7. Smarter v-model on components
If you want to move 'select' to a component.

<select v-model="selectedChoice">
<option disabled/>
<option v-for="choice in choices">
{{ choice }}
</option>
</select>

You will use -
<BaseSelect v-model="selectedChoice" :choices="choices">
</BaseSelect>

The corresponding component code is simpler...
<template>
<select v-bind="$attrs">
<option disabled/>
<option v-for="choice in choices">
{{ choice }}
</option>
</select>
</template>


8. Simpler render functions
render(h) {
return h(BaseInput, {
modelValue: this.searchText,
onModelUpdate: newValue => {
this.searchText=newValue;
},
class: this.$style.searchInput,
placeholder: 'Search'
})
}

Vue3 migration will be easier through automatic migrations (where the intent is clear).

Personally, I think I will be delighted about #1 :)

[akash-kumar]

Vue.js documentation is probably the best and easy to read documentation. So great job with the documentation and thank you.

[Dylan_thebrand_slayer_Mulveiny]

I can't wait for Vue 3....so I can fix all the components these changes break :P But seriously, these changes look awesome. But there's gunna be a of stuff that breaks with this release.

[Andrey-ilrh]

It's a real blessing that Vue team has such people like Chris Fritz. To me the philosophy and attitude of the Vue team is in many ways similar to a Zen philosophy that changed the World in the past and today this amazing group of people with the right mindset and strong intention is changing the Web World and I'm really proud to be a part of this global movement! Thank you guys for all of the stuff you are doing, it's a pure gold! 🙏

[shiytp]

i know he is spoofing daft punk with "harder better faster stronger" but i dont think "harder" is a good description for a framework that should be easy to use

[onahsunday]

Still expecting a direct methods to covert vue app into mobile with less work.

[tommedcouk]

I feel like he could speak twice as fast and it'll still be follow-able. Nice video though

[OzoneGrif]

We're switching from JSP to VueJS very soon. I really wish that version 3 comes in before we start ^.^ ahah

[PaulSebastianM]

Are people just in so much awe they can't speak or did they fall asleep?

[naranathubhranthan]

Vue 3 sucks and is very ugly and is messy and I hate it

[diegognoatto]

omg he said the one thing....arent people supporting IE nowadays anymore? 🙃

[marcusbrown]

Really wonderful presentation by Chris Fritz. GJ

[expertojordigg]

This guy has royal blood, he can utilize the Founding Titan's powers

[mikorimakori]

There's a big thing that isn't said in the video: how can you do if you only want the attributes in $attrs and not the events + v-model attributes? That's a big issue there. How can one still have a separate $listeners? Example if you have a component where inside element A needs the events and element B needs the attributes, how can you do in that case?

[vladyk]

will the frontend frameworks hype ever settle down to a stable tool?!

[shariar]

I like to use vue 3 with typescript but seems there is not good support!

[KellyMurphy]

If the magic is v-bind="$attrs" everywhere, why not just make a blank v-bind without an = sign default to be v-bind="$attrs".

[chaozou]

I do like defined v-model by myself, and I like the rule "defined value & emit change" equal v-model

[jsonkody]

I was looking towards vue3 .. but then from nowhere svelte3 happened.

[rijaltanjung]

I came across the frameworks, I found that angular is more easier to understand IMO, I already using it in several projects, but unfortunately, now I'm forced to use Vue in the current company I work, and find it a little bit easier to write the vue component, but harder to understand the concept, and no headache for leaking memory whatsoever. I still don't understand Vue clearly, not fluent yet for 2 weeks hands on with it.