什么是组合式？什么是响应式？

用Vue 2的语法来举例说明响应式和组合式的区别：

响应式示例

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

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  mounted() {
    setInterval(() => {
      this.count++
    }, 1000)
  }
}
</script>

在上面的代码中，我们使用data选项定义了一个响应式数据count，并在mounted钩子函数中使用setInterval定时器来更新count的值。当count的值发生变化时，视图会自动更新。

组合式示例

<template>
  <div>{{ doubleCount }}</div>
</template>

<script>
import { computed } from 'vue'

export default {
  data() {
    return {
      count: 0
    }
  },
  computed: {
    doubleCount() {
      return this.count * 2
    }
  },
  mounted() {
    setInterval(() => {
      this.count++
    }, 1000)
  }
}
</script>

在上面的代码中，我们同样使用data选项定义了一个响应式数据count，但是在computed选项中定义了一个计算属性doubleCount，它依赖于count的值。当count的值发生变化时，doubleCount会自动重新计算并返回新的值。在模板中，我们直接使用了doubleCount，而不需要手动计算它的值。

可以看到，在Vue 2中，虽然响应式API仍然可以满足大部分需求，但是组合式API提供了一种更加灵活和模块化的方式来组织和复用组件的逻辑。