vue3中的setup

在Vue3中，组件的逻辑被分成了两个部分：`setup`和`render`。`setup`函数是组件的入口函数，它会在组件实例化之前被调用，用于初始化组件的状态（data）、方法（methods）和生命周期钩子（lifecycle hooks）等。`setup`函数需要返回一个对象，该对象中的属性和方法都会被暴露给模板中的代码。

`setup`函数的参数包括`props`、`context`和`attrs`，其中`props`是组件的属性，`context`包含了一些常用的Vue实例方法和属性，`attrs`是非prop属性的集合，即没有被定义在组件props中的属性。

例如，下面是一个简单的组件示例：

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  props: {
    msg: String
  },
  setup(props) {
    const message = 'Hello, ' + props.msg
    return {
      message
    }
  }
}
</script>

在`setup`函数中，我们使用了`props`参数，并通过它来获取`msg`属性的值，然后通过返回一个包含`message`属性的对象，将其暴露给模板中的代码。在模板中，我们可以直接使用`message`属性来渲染视图。

需要注意的是，`setup`函数只会在组件实例化时执行一次，而不会像`created`钩子函数一样在每次重新渲染时都执行。这也是Vue3与Vue2最大的不同之处之一。