New component patterns for Vue 3

Andy Li rates and reviews three new component patterns for Vue 3.

0:00 3 component patterns
1:11 Hybrid Syntax
7:36 Functional Syntax
15:35 Script Setup Syntax

[Gepeto]

As I'm refactoring many components to script setup this video is very enlightening on the advantage to use it. A must watch video!

[DedicatedManagers]

Well done. Best video by this channel. More videos from Andy Li!

[brad]

Thanks for this. I've been using Vue for about 3 years now and have been procrastinating learning the new APIs but it seems much simpler than I expected (thanks to your teaching skills, no doubt) :)

[pranav]

Hey, @14:48 for defining default prop value we can further simplify by making use of '||' OR operator returning left operand if true or else right operand (default value) for eg:-

count:_props.count || -1;

[henkspaaij]

Very well articulated and explained. Thank you!

[tianqing]

i am curious what software you used to create this video?

[edu.paixao]

18:23 it's so beautiful

*interface* 😍

[vladshepeluk]

Hi! Thanks great job ❤ Is it possible to use context in setup syntax?

[VitorNeves]

I have a question about defining props using TS annotation. How can we use validator?

[fluffyartdev]

You can use default values while object destructuring..but setup looks rly promising except the thing that everything will be exposed (exported). That doesn't seem good

[jacobhassel]

Great vid! Really excited about Vue 3 and using script setup with typescript. Unfortunately I can't migrate to Vue 3 until the libraries we use start supporting it, specifically Vuetify. It could be another year before we can upgrade 😢.

[xrk]

Wow, didn't know about props with default in typescript

[heyyy]

There is a risk of vue macro for typescript Will blow it sometime?

[magdasmircea]

I have a question. Does options API gets tree shaked if not used, in the final build if webpacked is used?

[vevan]

I'm still love options api. the compsition api may do some things better, so we probably will switch to hybird components, but it's hard to convince me to use setup script.

[alvinindrap]

Why template need below in script setup?

[nove]

Finally am explanation on the who old change, this is very 😎

[justafreakable]

How do you name a component in script setup?

[RobertoMaurizzi]

Uuuh that was useful, thanks.
I understood I'm using a functional component for a quite complex form rendering component I'm writing, but I was calling it "render function component" 😅 (and I already found out reactive variables don't work because changing them doesn't trigger render function execution, nice to have official confirmation :D)

[rush-rr]

Функциональные компоненты жижа какая-то