vue3.0中setup使用

在Vue 3.0中，”setup” 函数是一个新的组件选项，用于替代 Vue 2.x 中的 “beforeCreate” 和 “created” 生命周期钩子函数。”setup” 函数是一个特殊的函数，它需要接收两个参数：props 和 context。

下面是一个示例，展示了如何在 Vue 3.0 中使用 “setup” 函数：

<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  },
  setup(props, context) {
    // 在这里可以进行一些初始化操作

    // 访问属性 props
    console.log(props.message);

    // 访问上下文 context
    console.log(context.attrs);

    // 返回数据和方法
    return {
      data: 'Hello, Vue 3.0',
      handleClick() {
        console.log('Button clicked!');
      }
    };
  }
};
</script>

在 “setup” 函数中，你可以做以下几件事情：

• 访问传入的属性 “props”。
• 访问上下文 “context”，其中包含了属性、插槽、refs 等等。
• 返回数据和方法供模板使用。你可以将它们放在一个对象中返回。

需要注意的是，”setup” 函数中不可以使用 “this” 关键字，因为它是一个独立的函数而不是组件实例。

除了以上内容，”setup” 函数还支持异步操作和生命周期钩子函数。你可以在 “setup” 函数中使用 “onMounted”、”onUpdated” 和 “onUnmounted” 等方法，实现类似于 Vue 2.x 中生命周期钩子函数的功能。

这就是在 Vue 3.0 中使用 “setup” 函数的基本介绍。希望能帮助到你！