1. setup 函数是什么?

• setup() 钩子是在组件中使用组合式 API 的入口
• setup()本身也是 options API 的一个选项

2. setup 函数的作用

• 在 setup() 中， 我们可以使用响应式 API 来声明响应式的状态，在 setup() 函数中返回的对象会暴露给模板和组件实例。其它的选项也可以通过组件实例来获取 setup() 暴露的属性
• 请注意在模板中访问从 setup() 返回的 ref 时，它会自动浅层解包 (在模板中将 ref.value 解析成对应的 value 值)，因此你无须再在模板中为它写 .value。当通过 this 访问时也会同样如此解包。

3. setup 函数通常的运用场景:

1. 需要在非单文件组件中使用组合式 API 时。
2. 需要在基于选项式 API 的组件中集成基于组合式 API 的代码时。

4. setup 函数的参数

在 setup 函数中访问 props 属性

• setup 函数的第一个参数是组件的 props。
• 和标准的组件一致，一个 setup 函数的 props 是响应式的，并且会在传入新的 props 时同步更新。
• 一般来说, 不要直接解构 props 对象 - 如果你解构了 props 对象，解构出的变量将会丢失响应性。因此我们推荐通过 props.xxx 的形式来使用其中的 props。
• 如果你确实需要解构 props 对象，或者需要将某个 prop 传到一个外部函数中并保持响应性，那么你可以使用 toRefs() 和 toRef() 这两个工具函数：

import { toRefs, toRef } from 'vue';

export default {
  name: 'ComponentName',
  setup(props) {
    const { hobbies } = toRefs(props);

    // also you can use toRef to resolve these problem
    const myHobbies = toRef(props, 'hobbies');

    return {
      // ...
      hobbies,
      myHobbies,
    };
  }
};

setup 函数的上下文(context)

• 传入 setup 函数的第二个参数是一个 Setup 上下文对象。上下文对象暴露了其他一些在 setup 中可能会用到的值

export default {
  setup(props, context) {
    // 透传 Attributes（非响应式的对象，等价于 $attrs）
    console.log(context.attrs);

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

    // 触发事件（函数，等价于 $emit）
    console.log(context.emit);

    // 暴露公共属性（函数）
    console.log(context.expose);
  }
};

• 上下文对象 context 是非响应式的，可以安全地解构

使用 context.attrs 和 context.slots 时注意

• attrs 和 slots 都是有状态的对象，它们总是会随着组件自身的更新而更新。这意味着你应当避免解构它们，并始终通过 attrs.x 或 slots.x 的形式使用其中的属性。
• 此外还需注意，和 props 不同，attrs 和 slots 的属性都不是响应式的。
• 如果你想要基于 attrs 或 slots 的改变来执行副作用，那么你应该在 onBeforeUpdate 生命周期钩子中编写相关逻辑。

• context.expose

  • expose 函数用于显式地限制该组件暴露出的属性，当父组件通过模板引用访问该组件的实例时，将仅能访问 expose 函数暴露出的内容

export default {
  setup(props, { expose }) {
    // 让组件实例处于 “关闭状态”
    // 即不向父组件暴露任何东西
    expose();

    const publicCount = ref(0);
    const privateCount = ref(0);
    // 有选择地暴露局部状态
    expose({ count: publicCount });
  }
};

setup 函数和 render 函数一起使用

• setup 也可以返回一个渲染函数，此时在渲染函数中可以直接使用在同一作用域下声明的响应式状态

import { h, ref } from 'vue';

export default {
  name: 'ComponentName',
  setup() {
    const nameRef = ref('Jack');

    return h => h('div', null, nameRef.value);
  }
};

• 作为子组件, setup和h函数一起使用可能会存在的问题

  • 返回一个渲染函数将会阻止我们返回其他东西。对于组件内部来说，这样没有问题，但如果我们想通过模板引用将这个组件的方法暴露给父组件，那就有问题了。
  • 我们可以通过调用 expose() 解决这个问题

import { h, ref } from 'vue';

export default {
  setup(props, { expose }) {
    const count = ref(0);
    const increment = () => ++count.value;

    expose({
      increment
    });

    return () => h('div', count.value);
  };
};