VUE中选项式API和组合式API讲解。

Vue.js 提供了两种主要的 API 风格：选项式 API（Options API）和组合式 API（Composition API）。这两种 API 风格可以用来编写 Vue 组件，但它们在组织代码、复用逻辑和组件结构等方面有不同的方式。

选项式 API 是 Vue.js 最早引入的 API 风格，它使用对象形式来定义组件的选项。在选项式 API 中，一个 Vue 组件被定义为一个包含各种选项的对象。这些选项包括 data、methods、computed、watch、mounted 等等。通过在组件的选项中定义这些属性和方法，可以描述组件的行为和状态。

以下是一个使用选项式 API 定义的 Vue 组件的示例：

Vue.component('my-component', {
  data() {
    return {
      message: 'Hello, Vue!'
    };
  },
  methods: {
    greet() {
      console.log(this.message);
    }
  },
  mounted() {
    this.greet();
  }
});

在上面的例子中，我们使用 data 选项定义了组件的数据属性 message，使用 methods 选项定义了组件的方法 greet，使用 mounted 选项定义了组件的生命周期钩子函数 mounted。这些选项在组件的实例化和渲染过程中起到了关键作用。

组合式 API 是 Vue.js 2.6 版本引入的新特性，它提供了一种更灵活和可组合的方式来编写组件逻辑。组合式 API 将组件的逻辑划分为逻辑相关的功能块，每个功能块可以独立编写、测试和复用。

在组合式 API 中，我们使用一组函数来组织组件的逻辑。这些函数包括 setup、ref、reactive、computed、watch 等等。通过使用这些函数，我们可以定义组件的状态、计算属性、观察者等。

以下是一个使用组合式 API 定义的 Vue 组件的示例：

import { ref, computed, watchEffect } from 'vue';
 
export default {
  setup() {
    const message = ref('Hello, Vue!');
 
    function greet() {
      console.log(message.value);
    }
 
    watchEffect(() => {
      greet();
    });
 
    return {
      message,
      greet
    };
  }
};

在上面的例子中，我们使用 ref 函数定义了一个响应式的数据属性 message，使用 watchEffect 函数监听 message 的变化，并在变化时调用 greet 方法。通过 setup 函数，我们将组件的状态和方法暴露给模板使用。

组合式 API 提供了更灵活和可组合的方式来组织组件的逻辑，可以更好地实现代码的复用和组件的拆分。它还提供了更好的 TypeScript 支持和更好的 IDE 提示。

需要注意的是，选项式 API 和组合式 API 并不互斥，你可以根据项目的需求和个人的喜好选择使用哪种 API 风格。在 Vue 3 中，组合式 API 成为了推荐的方式，但选项式 API 仍然可以使用，并且在一些简单的场景中仍然非常有效和方便。