Vue3 setup 函数详解与 attrs、useAttrs 用法

setup 细节

setup 执行的时机
- 在 beforeCreate 之前执行(一次), 此时组件对象还没有创建
- this 是 undefined, 不能通过 this 来访问 data/computed/methods / props
- 其实所有的 composition API 相关回调函数中也都不可以
setup 的返回值
- 一般都返回一个对象: 为模板提供数据, 也就是模板中可以直接使用此对象中的所有属性/方法
- 返回对象中的属性会与 data 函数返回对象的属性合并成为组件对象的属性
- 返回对象中的方法会与 methods 中的方法合并成功组件对象的方法
- 如果有重名, setup 优先
- 注意:一般不要混合使用: methods 中可以访问 setup 提供的属性和方法, 但在 setup 方法中不能访问 data 和 methods
- setup 不能是一个 async 函数: 因为返回值不再是 return 的对象, 而是 promise, 模板看不到 return 对象中的属性数据
setup 的参数
- setup(props, context) / setup(props, {attrs, slots, emit})
- props: 包含 props 配置声明且传入了的所有属性的对象，setup 函数中的 props 是响应式的，当传入新的 prop 时，它将被更新。因为 props 是响应式的，你不能使用 ES6 解构，它会消除 prop 的响应性。如果需要解构 prop，可以在 setup 函数中使用 toRefs 函数来完成此操作
- context：是一个普通 JavaScript 对象，非响应式对象，可以使用 ES6 结构
  - attrs: 包含没有在 props 配置中声明的属性的对象, 相当于 this.$attrs
  - slots: 包含所有传入的插槽内容的对象, 相当于 this.$slots
  - emit: 用来分发自定义事件的函数, 相当于 this.$emit

attrs 详解

传递给子组件的元素属性，在没有 props 声明的属性都会在 attrs 中出现
不希望组件的根元素继承 attribute 配置 inheritAttrs: false

vue2 示例

<!-- 父组件中写法 -->
<Child test="1" name="2" style="background: red; color: blue" class="test" />

<template>
  <div>
    这是测试
    <div>这是另一个测试</div>
    <div>这是另一个测试测试</div>
  </div>
</template>

<script>
import { propTypes } from '../utils/propTypes.ts';

export default {
  inheritAttrs: false,
  props: {
    test: propTypes.string,
  },
};
</script>

当 inheritAttrs 为 true 时，子组件的根元素会继承所有属性(排除 props 中的属性，包括 style 和 class）（默认为 true）。 setup

当 inheritAttrs 为 false 时，子组件的根元素只会继承 class 和 style 属性，不会继承其他如数如 name 属性 setup

vue3 示例

<Child test="1" name="2" style="background: red; color: blue" class="test" />

<template>
  <div>
    这是测试
    <div>这是另一个测试</div>
    <div>这是另一个测试测试</div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { propTypes } from '@/utils/propTypes';

export default defineComponent({
  inheritAttrs: false,
  props: {
    test: propTypes.string,
  },
  setup(props, { attrs }) {
    console.log(props);
    console.log(attrs);
    return {};
  },
});
</script>

当 inheritAttrs 为 true 时，子组件的根元素会继承所有属性(排除 props 中的属性，包括 style 和 class）（默认为 true）。 setup 当 inheritAttrs 为 false 时，子组件的根元素不会继承任何属性，包括 style 和 class 也不会继承，这是和 vue2 的区别 setup

useAttrs

<template>
  <div>useAttrsChild.vue</div>
</template>

<script lang="ts" setup>
import { propTypes } from '@/utils/propTypes';
import { useAttrs, defineProps } from 'vue';

const props = defineProps({
  test: propTypes.string,
});
console.log(props);
const attrs = useAttrs();
console.log(attrs);
</script>