New Ways to Vue - ANTHONY FU, Vue.js Live 2021

[Music] [Music] hello everyone glad to be here at view london today my topic is new ways to view how the new tools and techniques affect the way we view and build applications my name is anthony fu and i'm a view and

viet cooking mm member i'm also a creator of slide view use vds and other open source project i'm a phonetic open sourcer currently working as nux labs my github handle is antfu you can also find me on twitter before i start i want to thank all my sponsor to supporting my work if you find my work useful you can also sponsor me at github it would mean a lot to me so let's talk about today's topic new

ways to view so let's talk about the view two way first on the left we have a view single file components in this component we have template tag and script tab in script tab we will need to import the things we want for example import view from view and then export the defaults the components objects using view dot extend and then need to we'll need to register our components mixings and then declare data and method

the problem here is that we are having too much scottish voting code for each components and also the the the mixings are kind limited for the extensibilities to reduce our code and also having some problem of typescript support to solve this in view 3 we introduce a new set of api called competition api let's do a quick comparison here on the left we have the options api and on the right we have the new composition api as you can see in options api we used to

have multiple properties for the object for example they have method create and so on but in competition api we have only single function called setup lifecycle functions are now providing as hooks so like so you can use it in inside of our set setup functions so we have everything inside of the single context this way we can have a better type square support but other than that the most importantly we can have a better compositing

for example we have a we have a component with the setup functions if you if you want if we want to use we use this logic we can simply copy over it and have having it inside of inside the new files and wrapping with the new with the functions in this case we call it dark so then we can refract our components to you to import the use dark functions and reuse it the components will be behave at exactly the same as before but

but we can now reuse our functions in inside of other components and have a betting better organizations of our logic so let's talk about the square setup syntax as you can see even with the new composition api we are having many scatter following codes in our components for example in this case the highlight lines are the things we actually care about but we will need to write the rest in order to have you understand this

in the new script setup syntax we can have them all declare at top level and variables functions components inside of the script setup are directly available inside of the components this is initially introduced in three point view 3.1 as a expert experimental feature and now stable in view 3.2 the other new feature is the v-bind syntax inside the style tag in the past