vue3.0中setup使用(两种用法)

下面是Vue 3.0中setup使用的完整攻略。

什么是setup

setup是Vue 3.0中新引入的API，是Vue3.0新的组件选项。setup函数是在beforeCreate和created之间执行的，用于组件的初始化状态。它是一个接收props和context两个参数的函数，返回一个渲染函数可用的数据。通过setup函数，我们可以更好的组织代码，实现更好的代码分离和复用。

使用方式

setup有两种使用方式：对象形式和函数形式

对象形式

<template>
  <div>{{ count }}</div>
</template>

<script>
  export default {
    setup() {
      const count = Vue.reactive({ value: 0 })

      Vue.onMounted(() => {
        setInterval(() => {
          count.value++
        }, 1000)
      })

      return { count }
    }
  }
</script>

在此示例中，我们可以看到，setup函数返回一个对象，该对象包含需要暴露给模板的变量和方法。我们可以在此对象中使用Vue2中的写法。所有响应式数据需要使用Vue.reactive()进行包装。

函数形式

<template>
  <div>{{ count }}</div>
</template>

<script>
  import { ref, onMounted } from 'vue'

  export default {
    setup() {
      const count = ref(0)

      onMounted(() => {
        setInterval(() => {
          count.value++
        }, 1000)
      })

      return { count }
    }
  }
</script>

在此示例中，我们使用了函数形式的setup函数，使用了vue3中的API，如ref和onMounted。值得注意的是，onMounted中没有“this”上下文，因此我们需要使用导入的模块。使用函数形式的setup，可以更好的分模块，更加方便维护。

总结一下两种使用方式，我们需要根据具体的业务需求，选择适合自己的方式。

对于小型组件和页面，我们建议使用对象形式，这样代码更为简单明了，更加贴近vue2中的写法。

对于中大型的组件和页面，我们建议使用函数形式，这样可以更好的分离逻辑，便于维护。

希望这个简要的攻略对你有所帮助。