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

<template>
  <div class="home">
    显示的值{{flag }}
    <button @click="changeHander">改变值</button>
  </div>
</template>
<!-- 只需要在script上添加setup -->
<script lang="ts" setup>
    import { ref } from &#39;vue&#39;;

    <!-- flag变量不需要在 return出去了 -->
    let flag=ref("开端-第一次循环")

    <!-- 函数也可以直接引用,不用在return中返回 -->
    let changeHander=():void=>{
        flag.value=&#39;开端-第二次循环&#39;
    }

</script>

Components do not need to Register

<!-- 这个是组件 -->
<template>
    <div>
        <h2> 你好-我是肖鹤云</h2>
    </div>
</template>


使用的页面
<template>
  <div class="home">
    <test-com></test-com>
  </div>
</template>
<script lang="ts" setup>
// 组件命名采用的是大驼峰，引入后不需要在注册，是不是爽歪歪呀!
//在使用的使用直接是小写和横杠的方式连接 test-com
import TestCom from "../components/TestCom.vue"
</script>

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

<template>
  <div class="home">
    <test-com :info="msg" time="42分钟"></test-com>
  </div>
</template>
<script lang="ts" setup>
// 组件命名采用的是大驼峰，引入后不需要在注册，是不是爽歪歪呀!
import TestCom from "../components/TestCom.vue"
let msg=&#39;公交车-第一次循环&#39;
</script>

Subcomponent accepts parameters

<template>
    <div>
        <h2> 你好-我是肖鹤云</h2>
        <p>信息:{{ info}}</p>
        <p>{{ time }}</p>
    </div>
</template>
<script lang="ts" setup>
import {defineProps} from &#39;vue&#39;
defineProps({
    info:{
        type:String,
        default:&#39;----&#39;
    },
    time:{
        type:String,
        default:&#39;0分钟&#39;
    },
})
</script>

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

Child component uses

别担心，我们使用defineEmits。它可以像父组件抛出事件。
<template>
    <div>
        <h2> 你好-我是肖鹤云</h2>
        <button @click="hander1Click">新增</button>
        <button @click="hander2Click">删除</button>
    </div>
</template>

<script lang="ts" setup>
 import {defineEmits} from &#39;vue&#39;
//  使用defineEmits创建名称，接受一个数组
let $myemit=defineEmits([&#39;myAdd&#39;,&#39;myDel&#39;])
let hander1Click=():void=>{
    $myemit(&#39;myAdd&#39;,&#39;新增的数据&#39;)
}

let hander2Click=():void=>{
    $myemit(&#39;myDel&#39;,&#39;删除的数据&#39;)
}
</script>

Parent component

<template>
  <div class="home">
    <test-com @myAdd="myAddHander" @myDel=&#39;myDelHander&#39;></test-com>
  </div>
</template>
<script lang="ts" setup>
// 组件命名采用的是大驼峰，引入后不需要在注册，是不是爽歪歪呀!
//在使用的使用直接是小写和横杠的方式连接 test-com
import TestCom from "../components/TestCom.vue"
let myAddHander=(mess):void=>{
  console.log(&#39;新增==>&#39;,mess);
}

let myDelHander=(mess):void=>{
  console.log(&#39;删除==>&#39;, mess);
}
</script>

How to get the property value in the child component

Subcomponent

<template>
    <div>
        <h2> 你好-我是肖鹤云</h2>
        <p>性别:{{ sex}}</p>
        <p>其他信息:{{ info}}</p>
    </div>
</template>

<script>
import { reactive, ref,defineExpose } from "vue";
let sex=ref(&#39;男&#39;)
let info=reactive({
    like:&#39;喜欢李诗晴&#39;,
    age:27
})
// 将组件中的属性暴露出去，这样父组件可以获取
defineExpose({
    sex,
    info
})
</script>复制代码

Parent component

<template>
  <div>
    <test-com></test-com>
    <button>获取子组件中的数据</button>
  </div>
</template>
<script>
import TestCom from "../components/TestCom.vue"
import {ref} from &#39;vue&#39;
const testcomRef = ref()
const getSonHander=()=>{
  console.log(&#39;获取子组件中的性别&#39;, testcomRef.value.sex );
  console.log(&#39;获取子组件中的其他信息&#39;, testcomRef.value.info );
}
</script>复制代码

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 已经从实验室毕业了。
我们可以使用这个属性了。爽歪歪！
我们可以在style中去使用变量。是不是感觉很牛逼呀！
现在我们用起来，第一次使用<style> v-bind复制代码</style>

style v-bind turns span into red

<template>
  <span> 有开始循环了-开端 </span>  
</template>
<script>
  import { reactive } from &#39;vue&#39;
  const state = reactive({
    color: &#39;red&#39;
  })
</script>
<style>
  span {
    /* 使用v-bind绑定state中的变量 */
    color: v-bind(&#39;state.color&#39;);
  }  
</style>复制代码

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!