第二十八节——setup

一、介绍

setup 一个组件选项，在组件被创建之前，props 被解析之后执行。它是组合式 API 的入口。

二、基本写法

<template>
  <div>
    {{ name }}
    <QfButton></QfButton>
  </div>
</template>
<script setup>
  // 组件引入可以不需要注册可以直接使用
  import QfButton from './qf-button.vue';
  // 定义的数据可以直接使用，但是不具备响应式
  const name = '张三'

</script>

三、好处

1.解决了vue2的data和methods方法相距太远，无法组件之间复用

2.提供了script标签引入共同业务逻辑的代码块，顺序执行

3.script变成setup函数，默认暴露给模版

4.组件直接挂载，无需注册

四、setup函数（了解）

在 setup 中你应该避免使用 this，因为它不会找到组件实例。setup 的调用发生在 data property、computed property 或 methods 被解析之前，所以它们无法在 setup 中被获取。

setup() 钩子是在组件中使用组合式 API的入口，通常只在以下情况下使用:

1、需要在非单文件组件中使用组合式API时

2、需要在基于选项式API的组件中集成基于组合式 API的代码时

其他情况下，都应优先使用<script setup> 语法.

<script>
export default defineComponent({
  name: "HomeView",
  props: {
    name: String,
  },
  /**
   * setup 函数中的第一个参数是 props。正如在一个标准组件中所期望的那样，
   * setup函数中的 props 是响应式的，
   * 当传入新的 prop 时，它将被更新
   * 传递给 setup 函数的第二个参数是 context。
   * context 是一个普通 JavaScript 对象，
   * 暴露了其它可能在 setup 中有用的值
   */
  setup(props, context) {
    console.log(props, context);

    // Attribute (非响应式对象，等同于 $attrs)
    console.log(context.attrs);

    // 插槽 (非响应式对象，等同于 $slots)
    console.log(context.slots);

    // 触发事件 (方法，等同于 $emit)
    console.log(context.emit);

    // 暴露公共 property (函数)
    console.log(context.expose);
  },
});
</script>
// 一般来说我们如果选择使用组合式API的玩法直接在script标签上增加setup属性
<script setup>