Shulou(Shulou.com)06/01 Report--

This article mainly explains "how to use setup grammar in Vue3.2". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to use the setup grammar in Vue3.2.

What exactly has been updated by vue3.2?

According to the updated content of the original text, there are mainly the following 5 pieces:

1. SSR: server rendering optimization. @ vue/server-renderer package added an ES module to create

Decoupling from Node.js makes it possible to use @ vue/serve-render for server rendering in non-Node environments, such as (Workers, Service Workers)

2. New SFC Features: new single file component feature

3. Web Components: custom web components. We seldom use this, but we should know.

4. Effect Scope API: effect scope

It is used to directly control the release time of responsive side effects (computed and watchers).

This is an update to the underlying library. Developers don't need to care, but they should know.

5. Performance Improvements: performance improvement. This is an internal promotion and has nothing to do with development.

A brief introduction to setup

At first, the Vue3.0 exposure variable must be return before it can be used in template.

This will cause variables to appear many times on the page.

Very unfriendly, vue3.2 only needs to add setup to the script tag.

It can help us solve this problem.

1. Components only need to be introduced without registration, and properties and methods do not need to return

You don't have to write setup functions, and you don't have to write export default.

Even custom instructions can be obtained automatically in our template.

Variables and methods do not need return to come out

The displayed value {{flag}} changes the value import {ref} from 'vue'; let flag=ref ("start-first loop") let changeHander= (): void= > {flag.value=' start-second loop'}

Components do not need to be registered in the

Hello-I am Xiao Heyun uses the page / / component naming uses the big hump, after the introduction does not need to register, is not cool! / / in the use of direct use of lowercase and horizontal bars to connect test-comimport TestCom from ".. / components/TestCom.vue"

Analyze the changes of components after the introduction of setup

In script setup, the introduced components can be used directly without having to register through components. [is it really delicious!] And cannot specify the name of the current component, it will automatically be based on the file name, that is, you no longer have to write the name attribute. When we need to use a lot of components on our page, its function is realized at once.

New defineProps

Just now I have been emphasizing that there is no need to use the setup function, the witty little friend will say: so how does the child component accept the value passed by the parent component? how does props,emit get it? Don't worry, a new api appears, and our protagonist defineProps copies the code.

The use of defineProps

Parent component passes parameters

/ / the component is named with a big hump, so you don't need to register after it is introduced. Isn't it cool! import TestCom from ".. / components/TestCom.vue" let msg=' bus-first cycle'

Subcomponents accept parameters

-Hello.-I'm Xiao Heyun.

Information: {{info}}

{{time}}

Import {defineProps} from 'vue'defineProps ({info: {type:String, default:'----'}, time: {type:String, default:'0 minutes'},})

How does a child component throw an event to the parent component? The arrival of defineEmits!

Use of subcomponents

Don't worry, we use defineEmits. It can throw events like the parent component. Hello-I am Xiao Heyun newly added delete import {defineEmits} from 'vue'// using defineEmits to create the name and accept an array of let $myemit=defineEmits ([' myAdd','myDel']) let hander1Click= (): void= > {$myemit ('myAdd',' new data')} let hander2Click= (): void= > {$myemit ('myDel',' deleted data')}

Parent component

/ / the component is named using a big hump, which does not need to be registered after introduction. / / is it cool to connect test-comimport TestCom from ".. / components/TestCom.vue" let myAddHander= (mess) directly in lowercase and horizontal bar in use: void= > {console.log ('add = >', mess);} let myDelHander= (mess): void= > {console.log ('delete = >', mess);}

How to get the attribute value in a subcomponent

Sub-component

-Hello.-I'm Xiao Heyun.

Gender: {{sex}}

Additional information: {{info}}

Import {reactive, ref,defineExpose} from "vue"; let sex=ref ('male') let info=reactive ({like:' likes Li Shiqing', age:27}) / / expose the attributes in the component so that the parent component can get the defineExpose ({sex, info}) copy code

Parent component

Get the data in the subcomponent import TestCom from ".. / components/TestCom.vue" import {ref} from 'vue'const testcomRef = ref () const getSonHander= () = > {console.log (' obtain gender in the subcomponent', testcomRef.value.sex); console.log ('obtain other information in the subcomponent', testcomRef.value.info);} copy the code

New instruction v-memo

V-memod remembers a subtree of a template that can be used on both elements and components. The instruction receives a fixed-length array as a dependent value for memory comparison. If each value in the array is the same as the last time it was rendered, updates to the entire subtree are skipped. Even the VNode creation of the virtual DOM will be skipped because the memory copy of the subtree can be reused. Therefore, the rendering speed will be very fast. It is important to note that it is important to declare memory arrays correctly. It is the developer's responsibility to specify the correct dependency array to prevent necessary updates from being skipped. The instruction of {{item.name}} v-memod is less used, and its purpose is to cache part of the data in the template. Create it only once and it will not be updated in the future. In other words, memory is traded for time. Copy the code

Style v-bind, the classmate has graduated from the lab.

Thanks to the efforts of you Da and his team, v-bind has graduated from the laboratory. We can use this property. This is awesome! We can use variables in style. Don't you feel great? Now let's use it and copy the code for the first time using v-bind

Style v-bind turns span red

There is a loop-start import {reactive} from 'vue' const state = reactive ({color:' red'}) span {/ * use v-bind to bind the variable in state * / color: v-bind ('state.color');} copy the code

At this point, I believe you have a deeper understanding of "how to use setup syntax in Vue3.2". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.