vue选项式API和组合式Api

组合式 API 和选项式 API 是?Vue.js?提供的两种不同的 API。组合式 API 更加灵活，在处理复杂场景时更有效，而选项式 API 则更易于入门和使用，适合处理简单的场景。下面是组合式 API 和选项式 API 的一个比较：

组合式 API

<template>
  <div>
    <p>{{ title }}</p>
    <button @click="increaseCount">点击按钮 +1</button>
    <p>当前计数: {{ count }}</p>
  </div>
</template>
 
<script>
import { reactive, computed, watch } from 'vue';
 
export default {
  setup() {
    const data = reactive({
      title: '使用组合式 API',
      count: 0,
    });
 
    const increaseCount = () => {
      data.count++;
    };
 
    const doubleCount = computed(() => {
      return data.count * 2;
    });
 
    watch(
      () => data.count,
      (newCount, oldCount) => {
        console.log(`计数从 ${oldCount} 变为 ${newCount}`);
      }
    );
 
    return {
      title: data.title,
      count: data.count,
      increaseCount,
      doubleCount,
    };
  },
};
</script>

选项式 API

<template>
  <div>
    <p>{{ title }}</p>
    <button @click="increaseCount">点击按钮 +1</button>
    <p>当前计数: {{ count }}</p>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      title: '使用选项式 API',
      count: 0,
    };
  },
 
  methods: {
    increaseCount() {
      this.count++;
    },
  },
 
  computed: {
    doubleCount() {
      return this.count * 2;
    },
  },
 
  watch: {
    count(newCount, oldCount) {
      console.log(`计数从 ${oldCount} 变为 ${newCount}`);
    },
  },
};
</script>