Vue3之常用Composition API setup

原创已于 2022-06-29 09:33:25 修改 · 403 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

于 2022-06-02 15:43:59 首次发布

Vue基础知识专栏收录该内容

67 篇文章

订阅专栏

Vue3中的Composition API允许开发者更加模块化地组织代码，提高复用性和可维护性。setup函数作为Composition API的入口，在组件创建前执行，不使用this关键字。通过defineProps和defineEmits可以声明属性和事件，使用useContext获取组件上下文。script setup语法糖简化了代码，提高了性能和IDE类型推断。在Vue2到Vue3的迁移过程中，它是良好的兼容选项。

什么是Composition API

简单的说就是将功能相同的变量、函数等逻辑放到一起
点击

setup

这个函数就是我们使用Composition API的入口
在组件创建之前执行，在当前函数中无法使用this
参数一般为props何context,返回一个对象，对象中任意部分都可以用于组件的其余部分

<script>
export default {
    data(){
        return {
            world:"World"
        }
    },
    setup(){
        return {
            hello:"Hello"
        }
    }
}
</script>

<template>
    <h2>{{hello}} {{world}}</h2>
</template>

效果

我们会发现其实在vue3中也会解析vue2的语法,当我们将vue2项目升级到vue3的项目的时候这时一个比较好的兼容

标签上的setup

<script setup> 是一种编译时语法糖，用于在单文件组件 (SFC) 中使用 Composition API。
如果您同时使用 SFC 和 Composition API，建议使用该语法。
与普通的 <script> 语法相比，它提供了许多优点：更简洁的代码，更少的样板能够使用纯 TypeScript 声明道具和发出的事件更好的运行时性能（模板编译成同范围内的渲染函数，无需中间代理）更好的 IDE 类型推断性能（语言服务器从代码中提取类型的工作更少）
博客点击

参数

他的参数将会有三个函数来进行代替

defineProps 用来接收父组件传来的值props
defineEmits 用来声明触发的事件表
useContext 用来获取组件上下文context。

<script setup>
import { useContext, defineProps, defineEmits } from 'vue'

const emit = defineEmits(['child-click'])
const ctx = useContext()
const props = defineProps({
 msg: String,
})
const sonClick = () => {
 emit('child-click', ctx)
}
</script>

步骤

在script标签上写上setup属性
我们可以
1. 不用暴露组件
2. 不必使用setup函数
3. 声明的变量和方法直接使用

<script setup>
const hello = "hello"
</script>

<template>
    <h2>{{hello}}</h2>
</template>