Vue3 Composition API 和 Options API 的区别？为什么要有 Composition API？

<script>
export default {
  data() {
    return { count: 0, name: '' }
  },
  computed: {
    double() { return this.count * 2 }
  },
  methods: {
    increment() { this.count++ }
  },
  mounted() {
    console.log('mounted')
  }
}
</script>

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

const count = ref(0)
const name = ref('')
const double = computed(() => count.value * 2)

function increment() {
  count.value++
}

onMounted(() => {
  console.log('mounted')
})
</script>

// 自定义 Hook（composable）
function useCounter(initial = 0) {
  const count = ref(initial)
  const increment = () => count.value++
  const decrement = () => count.value--
  return { count, increment, decrement }
}

// 任何组件中使用
const { count, increment } = useCounter(10)

// 搜索功能分散在各处
export default {
  data() { return { keyword: '', results: [] } },
  computed() { return { filtered() { /*...*/ } } },
  methods: { search() { /*...*/ } },
  watch: { keyword() { /*...*/ } }
}

function useSearch() {
  const keyword = ref('')
  const results = ref([])
  const filtered = computed(...)
  const search = () => {...}
  watch(keyword, search)
  return { keyword, results, filtered, search }
}