vue3学习 【3】组合式api setup() 和 ＜script setup＞

setUp() 和<script setup >的区别

<script setup> 是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖。当同时使用 SFC 与组合式 API 时该语法是默认推荐。相比于普通的

1. 更少的样板内容，更简洁的代码。
2. 能够使用纯 TypeScript 声明 props 和自定义事件。
3. 更好的运行时性能 (其模板会被编译成同一作用域内的渲染函数，避免了渲染上下文代理对象)。
4. 更好的 IDE 类型推导性能 (减少了语言服务器从代码中抽取类型的工作)。

官方比较推荐实用<script setup >,本文会基于两种方式写出部分代码进行相关对比，后续文章将采用 <script setup > 的方式进行开发。

定义响应式数据的对比

setUp()

<script lang="ts">
import { defineComponent, ref, } from 'vue';
export default defineComponent({
    name: "SetUpa",
    setup() {
        const message = ref("helloWord")
        return {
            message
        }
    }
})
</script>
<template>
    {{ message }}
</template>

<script setup >

<script lang="ts" setup>
import { ref, } from 'vue';
const message = ref("这是script setup")
</script>
<template>
    {{ message }}
</template>

defineComponent描述

defineComponent主要作用是在定义 Vue 组件时提供类型推导的辅助函数。也可以不使用，不影响上述代码的运行。如果不使用请参考下方代码.

<script lang="ts">
import { ref } from 'vue';
export default {
    name: "SetUpa",
    setup() {
        const message = ref("helloWord")
        return {
            message
        }
    }
}
</script>
<template>
    {{ message }}
</template>

参考地址

对比

1. 相比较来说，使用官方提供的语法糖( <script setup >)会使的代码看起来更简洁，他会将所有的顶层定义全部暴露给模板，而不用在定义一个return 来返回数据。
2. import导入的方法或者组件也会直接暴露出来，不需要在额外定义和返回。setup()的话，如果使用组件，需要定义components: {componentA }, 来应该组件

export default defineComponent(
	  {
	    name: 'App',
	    components: { setUpa, SetUpB },
	   }
   )

props和emit的使用

setUp()

<script lang="ts">
import { defineComponent, } from 'vue';
export default defineComponent({
    name: "SetUpa",
    props: {
        title: {
            type: String,
            required: true
        }
    },
    emits: ["change"],
    setup(props, context) {
        function emitClick() {
            context.emit("change", "123")
        }
        return {
            props,
            emitClick
        }
    }
})
</script>
<template>
    {{ props.title }}
    <button type="button" @click="emitClick">点击发送emit</button>
</template>

<script setup >

<script lang="ts" setup>
import { } from 'vue';
const props = defineProps({
    title: String
})

const emit = defineEmits(['change', 'delete'])
function emitClick() {
    emit("change", "123")
}
</script>
<template>
    {{ props.title }}
    <button type="button" @click="emitClick">点击发送emit</button>
</template>

对比

1. 使用语法糖代码量会大量减少
2. 使用setup()无法为emit 指定ts类型，<script setup >是可以支持的后续会说

参考文档

setup()
<script setup >