defineProps与props接收属性对比

鹿守心畔光
134 阅读2分钟

  1. 不使用defineProps接收props的方式

    1. 在非setup语法糖（即普通的script标签）的Vue 3组件中，可以使用props选项来接收属性，这和Vue 2中的方式有些类似。例如：

    2. <template>
    <div>{{ message }}</div>
</template>
<script>
export default {
    props: ['message'],
    setup(props) {
        return {
            message: props.message
        };
    }
};
</script>

    3. 在这里，通过在组件对象中定义props选项为一个数组，数组中的元素是要接收的props的名称。然后在setup函数中，可以通过参数props来访问这些属性，并将其返回给模板使用。

    4. 除了简单的数组形式，还可以使用对象形式来更详细地定义props，包括类型检查、默认值等信息。例如：

    5. <template>
    <div>{{ count }}</div>
</template>
<script>
export default {
    props: {
        count: {
            type: Number,
            default: 0
        }
    },
    setup(props) {
        return {
            count: props.count
        };
    }
};
</script>

    6. 在这个例子中，count属性被定义为一个数字类型，默认值是0。在setup函数中，可以像之前一样通过props.count来访问这个属性，并将其返回给模板使用。

  2. 与defineProps的对比

    1. 语法简洁性

      • defineProps在script setup语法糖中使用，语法更加简洁。它可以直接在script setup标签内使用，不需要像普通script标签那样在组件对象中定义props选项，然后在setup函数中访问。例如，使用defineProps的方式如下：
      • <template>
    <div>{{ message }}</div>
</template>
<script setup>
const props = defineProps(['message']);
</script>
      • 这种方式减少了一些样板代码，使得代码更加紧凑和易读。

    2. 编译时的差异

      • defineProps是一个编译器宏，在编译阶段会进行一些优化。它会根据props的定义自动生成一些运行时代码，例如类型检查的代码。而在普通script标签中使用props选项的方式，类型检查等操作可能需要开发者自己手动处理或者通过其他工具（如prop - types库）来辅助实现。

    3. 代码的组织方式

      • 在普通script标签中，props的定义是在组件对象的props选项中，setup函数等其他逻辑在组件对象的其他部分。这种方式更符合传统的组件定义方式，对于熟悉Vue 2或者其他基于对象的组件定义方式的开发者来说可能更容易理解。而script setup语法糖中的defineProps则更侧重于组合式API的风格，将props的定义和其他逻辑（如ref、computed等）都放在script setup标签内，强调从函数的角度来构建组件。
avatar
文章
阅读
粉丝