Vue组合式API–setup中定义响应式数据的示例详解

1. 什么是Vue组合式API--setup？
   Vue 3.0中引入了新的组合式API--setup。setup选项是一个新的组件选项，用来代替Vue 2.x版本中的created和beforeCreate选项。setup选项中可以使用Vue3.0的新特性，如响应式数据、计算属性、watcher等。

2. Vue组合式API--setup中定义响应式数据的示例

在Vue 3.0的组件中，可以使用ref函数将普通的变量转换为响应式数据。ref函数返回一个包含value属性的对象。当value属性的值发生变化时，Vue框架会自动更新组件视图。示例代码如下：

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

<script>
import { ref } from 'vue'

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

    function increment() {
      count.value++
    }

    return {
      count,
      increment,
    }
  },
}
</script>

上述代码中，使用ref函数创建了一个count变量，初始值为0，然后在setup函数中将count变量返回。在组件的模板中，使用{{ count }}将count的值输出到页面上。同时，定义了一个increment函数，用来增加count的值。

1. 更多Vue组合式API--setup中定义响应式数据的示例

在Vue 3.0中，还可以使用reactive函数将一个普通对象转换为响应式对象。示例代码如下：

<template>
  <div>
    <p>count.a: {{ count.a }}，count.b: {{ count.b }}</p>
    <button @click="increment">click me</button>
  </div>
</template>

<script>
import { reactive } from 'vue'

export default {
  setup() {
    const count = reactive({
      a: 0,
      b: 1,
    })

    function increment() {
      count.a++
      count.b++
    }

    return {
      count,
      increment,
    }
  },
}
</script>

上述代码中，使用reactive函数创建了一个count变量，包含两个属性a和b，初始值分别为0和1。在setup函数中将count变量返回。在组件的模板中，使用{{ count.a }}和{{ count.b }}显示count的属性a和b的值。同时，定义了一个increment函数，用来增加count.a和count.b的值。