vue3的Composition API提供的setup函数的作用和用法是什么答案

【问题标题】：What is the role and usage of the setup function provided by vue3's Composition APIvue3的Composition API提供的setup函数的作用和用法是什么
【发布时间】：2021-07-29 10:34:36
【问题描述】：

我需要知道vue3的Composition API提供的setup函数的正确用法和最佳实践。

我检查了我当前的项目，其中开发人员实际上使用 setup 函数而不是使用传统方法创建组件。

如果它只是一个设计原则或改进，那么我们应该在哪里应用这些。我读了官方的documentation，但是他们没有解释这个概念，他们只是提供了这个函数中可用的参数列表。

MyBook.vue

<template>
    <span>Warning:- {{warning}}</span>
    <button @click="warning = !warning">toggle</button>
</template>

<script>
import { ref } from 'vue'

export default {
    props: ['warning'],
    setup(props, context) {
        const warning = ref(props.warning)

        return {
            warning,
        }
    },
}
</script>

<MyBook 
    :warning="true"
/>

正如您在上面看到的，我不能使用相同的属性名称来为组件的数据属性使用相同的名称，但在设置的情况下，我们可以这样做并更新值。（因为属性不应在组件内更改）。

Vue 开发工具还将设置显示为不同的类别。

【问题讨论】：

你之前读过这段话吗？ composition API will be explained here
我想我想念那个。但是你能用简单的话来解释这个概念吗？为什么我们需要这个？
因为 options API 在设计上是错误的，并且在合成 this 上运行，这不是真正的类实例，而是一些松散确定的对象。除了古怪之外，这还会导致无法解决正确使用 Typescript 的问题。组合 API 大量借鉴了 React，在某些情况下证明了它的有用性，尤其是 TS。

标签： javascript vue.js vue-component

【解决方案1】：

setup 设置一个实例并返回它应该具有的属性。 setup 所属的 Composition API 的目的是替换 Options API，其中实例由组件选项确定。所以setup 是data、methods、computed、watch 和生命周期钩子的替代品。

正如the reference 解释的那样，setup 还替换了beforeCreate 和created 生命周期钩子，其余的钩子都设置在其中。

setup 函数中的 data 和 props 之间没有冲突，因为 props 可以作为 setup 参数访问，即 warning 和 props.warning 可以同时访问。在模板中，它们不是也不应该被区分，它们是实例属性，解决方案是不允许名称冲突。以前可以使用 $data.warning 和 $props.warning 魔术关键字，但不鼓励使用它们。如果warning 值与同名道具不同，并且两者都应该在模板中可用，则它应该具有不同的名称。

【讨论】：