All language subtitles for 005 Script Setup - An Easier Way!_en

In view 3.2.

A new syntax or pattern for the composition API was introduced, which is the script set-top pattern.

All syntax scripts set up allows us to make our components a lot simpler, less cluttered and easier

to manage, and allows us to get rid of the export default, get rid of the set up function, and most

importantly, get rid of the return statement.

So with the script set up, we no longer need to worry about making sure all of our data properties,

methods, computed properties, etc. are returned.

Now, on a simple component like this, it might not make much difference, but in a really complicated

set up with hundreds of components which each have tons of different data properties, methods, watches,

computed properties, etc. It really makes our life easier not having to constantly keep this return

statement updated every time we change any of our data properties, methods or rename them etc. for

my own Fujitsu to which I'm currently working on.

I actually spent a whole day converting around 100 components from this setup function pattern to the

new script set-top pattern.

And that was a really boring day, but it was well worth it because now the app is much easier to work

on.

And by the way, the script setter pattern is the pattern I'm going to be using for the rest of the

course because it's much simpler and is the pattern that the team recommends.

So let's convert this code to the new script set top pattern.

So I'm going to commence out this script section.

I'm allowed a new script section here.

Now, we don't need to add our export default and we don't need to add this setup function.

All we need to do is add a set of attributes to this opening script like this, and we can now place

all of our code in here, all of our data properties, methods, etc., and we don't even need to return

any of these.

So let's just copy our two methods and our accounts are ref from the old code.

Paste it straight in here, just fix the indentation and we still need to import this method from view,

so I'll copy that.

We just place all of our imports at the top of this script section like this, and now we don't need

to return our data or our methods.

Any data, properties or methods are computed.

Properties that we declare at the top level of this script will be available in our template automatically.

So if I save this now, it should just be working straight away, and yet it's still working and we've

now reduced our script section from, let's say.

21 lines.

Down to.

Just 11 lines.

So we've massively simplified our code and we no longer need to worry about this pesky return statement.