Let’s talk in depth about the setup syntax sugar in Vue3.2

This article will introduce you to the setup syntax sugar in Vue3.2 to ensure that you can understand it clearly. I hope it will be helpful to everyone!

What exactly is updated in vue3.2?

The updated content based on the original content mainly includes the following 5 blocks:

1. SSR: Server-side rendering optimization. The @vue/server-renderer package adds an ES module to create, [Related recommendation:vue.js video tutorial]

is decoupled from Node.js, so that it can be used in non-Node environments@ It is possible for vue/serve-render to do server-side rendering,

For example (Workers, Service Workers)

2, New SFC Features: New single file component features

3 , Web Components: Custom web components. We rarely use this, but we should know

4. Effect Scope API: effect scope,

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

This is an update to the underlying library. You don’t need to care about it for development, but you should be aware of it.

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

A brief introduction to setup

At first, Vue3.0 exposed variables must be returned, and they can be used in the template Using;

will cause the variable to appear many times on the page.

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

can help us solve this problem.

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

There is no need to write setup functions, export default, or even customization. Directives are also automatically available in our template.

Variables and methods do not need to be returned

Components do not need to Register

  使用的页面  

Analyze the changes in components after introducing setup

在 script setup 中， 引入的组件可以直接使用无需再通过components进行注册，[是不是真的很香啊!] 并且无法指定当前组件的名字，它会自动以文件名为主，也就是不用再写name属性了。 当我们的页面上需要使用很多组件时，它的功能一下就体现出来了。

Add defineProps

刚刚我一直在强调,不需要使用setup函数，机智的小伙伴会说: 那么子组件怎么接受父组件传递过来的值呢? props，emit怎么获取呢? 别担心,新的api出现了,我们的主角 defineProps复制代码

Usage of defineProps

Parent component passing parameters

Subcomponent accepts parameters

How does a subcomponent throw an event to the parent component? defineEmits is coming!

Child component uses

别担心，我们使用defineEmits。它可以像父组件抛出事件。  

Parent component

How to get the property value in the child component

Subcomponent

 复制代码

Parent component

 复制代码

New command v-memo

v-memod会记住一个模板的子树,元素和组件上都可以使用。 该指令接收一个固定长度的数组作为依赖值进行[记忆比对]。 如果数组中的每个值都和上次渲染的时候相同，则整个子树的更新会被跳过。 即使是虚拟 DOM 的 VNode 创建也将被跳过，因为子树的记忆副本可以被重用。 因此渲染的速度会非常的快。 需要注意得是:正确地声明记忆数组是很重要。 开发者有责任指定正确的依赖数组，以避免必要的更新被跳过。

{{ item.name }}

v-memod的指令使用较少，它的作用是:缓存模板中的一部分数据。 只创建一次，以后就不会再更新了。也就是说用内存换取时间。复制代码

style v-bind This student has already started from Lab graduated

经过尤大大和团队的努力，

style v-bind turns span into red

  复制代码

EndIf you think what I wrote is good, click to recommend it.

I haven’t had anyone recommend me for months.

I heard that the little brothers who rewarded me have found girlfriends,
Hey! If you don’t believe it, give me a reward and take a look!
Guarantee that you will find the one you like

For more programming-related knowledge, please visit:

Introduction to Programming

! !

The above is the detailed content of Let’s talk in depth about the setup syntax sugar in Vue3.2. For more information, please follow other related articles on the PHP Chinese website!