Vue3之常用Composition API setup

什么是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 类型推断性能（语言服务器从代码中提取类型的工作更少）
  博客点击

参数

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

1. defineProps 用来接收父组件传来的值props
2. defineEmits 用来声明触发的事件表
3. 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>

步骤

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

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

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