vue3 steup的介绍

vue3的steup

Vue3 的 setup() 函数是一个新的组件选项，它用于代替 Vue2 中的 created、mounted 等选项。它可以访问到组件实例的上下文（props、data、methods 等），同时也可以使用 Composition API 对组件进行逻辑复用和代码组织。

在 setup() 中，可以通过传入一个参数context来获取组件实例的上下文，例如：

setup(props, context) {
  console.log(props)
  console.log(context)
}

setup() 函数需要返回一个对象，用于向模板中提供数据和方法。例如：

setup(props) {
  const count = ref(0)

  function increment() {
    count.value++
  }

  return {
    count,
    increment
  }
}

在模板中可以这样使用：

<template>
  <div>
    <p>count: {{ count }}</p>
    <button @click="increment">+1</button>
  </div>
</template>

setup() 函数还可以使用其他的 Composition API，例如 reactive()、watch()、computed() 等。

总的来说，setup() 是 Vue3 中新的组件选项，它可以让我们使用 Composition API 对组件进行更好的逻辑复用和代码组织。同时，它也可以访问到组件实例的上下文，使得我们在编写组件时更加灵活和方便。