Vue中的选项式API和组合式API是两种不同的编写组件逻辑的方式。

选项式API（Options API）：

• 基于对象（data、methods、computed、watch等）的API。
• 每个组件的选项是集中在一个地方的。
• 可能会导致组件变得庞大而复杂。

// 选项式API示例
Vue.component('my-component', {
  data() {
    return {
      message: 'Hello, Vue!'
    };
  },
  methods: {
    updateMessage() {
      this.message = 'Updated message';
    }
  },
  template: '<div>{{ message }}</div>'
});

组合式API（Composition API）：

• 基于函数的API，使用setup函数。
• 使用函数组合而非类继承。
• 可以更灵活地使用Vue的响应式系统和其他API。
• 需要Vue 3.x。

// 组合式API示例
Vue.component('my-component', {
  setup() {
    const message = Vue.ref('Hello, Vue!');
 
    function updateMessage() {
      message.value = 'Updated message';
    }
 
    return { message, updateMessage };
  },
  template: '<div>{{ message }} <button @click="updateMessage">Update</button></div>'
});

选项式API更适合于旧版Vue 2.x，而组合式API则是Vue 3.x推出的一个新特性，旨在提供更简洁、更易于理解的方式来组织组件逻辑。

伴随着新到的vue3，我们编写组件的书写方式也发生了变化。
除了底层的更新，编写方式的改变或许才是我们最能直观感受到的。

其实就是vue3多了一种名为组合式api(composables api)的写法，相对应传统的选项式api(options api)
组合式api简单来说就是使用setup方式编写组件。

传统的选项式api

来看看这种传统的写法：65行

<template>
  <div class="home" v-if="userInfo">
    <my-header/>
    用户详情：{{fullUname}},{{userInfo.age}}岁
  </div>
</template>
<script>
import MyHeader from '../components/my-header.vue';

export default {
  // 组件：公共头部
  components: { MyHeader },

  // 属性： 接受属性用户id
  props: {
    userId: {
      type: String,
      default: '2022-01-01'
    }
  },

  // 状态：用户信息
  data() {
    return {
      userInfo: null
    }
  },

  // 计算属性：给用户名加一个牛逼的前缀
  computed: {
    fullUname() {
      if(this.userInfo && this.userInfo.name){
        return '牛逼的' + this.userInfo.name;
      }
      return ''
    }
  },

  // 监听：用户id改变
  watch: {
    userId: {
      handler(newVal, oldVal) {
        console.log('用户id变化啦:'+newVal);
      },
      immediate: true
    }
  },

  // 方法：同步用户信息
  methods: {
    syncUserInfo(userId) {
      this.userInfo = {
        id: userId,
        name: '小明',
        age: 20
      };
    }
  },

  // 钩子：初始化
  mounted() {
    this.syncUserInfo(this.userId)
  }
}
</script>

先进的组合式api

来看看这种先进的写法：48行

<template>
  <div class="home" v-if="userInfo">
    <my-header />
    用户详情：{{ fullUname }},{{ userInfo.age }}岁
  </div>
</template>
<script setup>// <script setup> 是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖。
import { ref, onMounted, watch, computed } from 'vue';
import MyHeader from '../components/my-header.vue';

// 属性： 接受属性用户id
const props = defineProps({
  userId: {
    type: String,
    default: '2022-01-01'
  }
})

// 状态：用户信息
const userInfo = ref(null);

// 计算属性：给用户名加一个牛逼的前缀
const fullUname = computed(() => {
  if (userInfo.value && userInfo.value.name) {
    return '牛逼的' + userInfo.value.name;
  }
  return ''
})

// 监听：用户id改变
watch((newVal, oldVal) => {
  console.log('用户id变化啦:' + newVal);
}, { immediate: true })

// 方法：同步用户信息
const syncUserInfo = (userId) => {
  userInfo.value = {
    id: userId,
    name: '小明',
    age: 20
  };
}

// 钩子：初始化
onMounted(() => {
  syncUserInfo(props.userId)
})
</script>