Vue3快速入门-setup

查看本系列文章合集click me

下载本系列文章源码click me

setup特性

setup 是 Composition API 的入口，setup 的存在就是为了让我们能够使用composition api。

所有的 Composition API函数都在 setup 中使用, 只在初始化时执行一次。​

执行时间在 beforeCreate 之前，即组件创建之前; 这就意味着在执行 setup 时尚未创建组件实例，因此在 setup 选项中没有 this。

在模版中需要使用的数据和函数，需要在 setup 返回

setup参数

setup(props, context) / setup(props, {attrs, slots, emit})

• props：值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性 （props对象是响应式的，不能去解构，解构会失去响应式特性）
• context：上下文对象
  • attrs: 值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性, 相当于 this.$attrs。
  • slots: 收到的插槽内容, 相当于 this.$slots
  • emit: 触发绑定的自定义事件, 用于组件通信, 相当于 this.$emit。

<script lang="ts">
import { defineComponent} from 'vue'

export default defineComponent({
  name: 'App',
  setup(props, {attrs, slots, emit}) {

    console.log(this);  // undefined

    return {}
  },
})
</script>

• 使用 ts 只需设置 script 的 lang 属性 即可
• defineComponent 方法创建一个组件
• export default 直接导出一个组件