什么是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
用来接收父组件传来的值propsdefineEmits
用来声明触发的事件表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属性
- 我们可以
- 不用暴露组件
- 不必使用setup函数
- 声明的变量和方法直接使用
<script setup>
const hello = "hello"
</script>
<template>
<h2>{{hello}}</h2>
</template>