vue选项式API和组合式API区别-备忘

Vue.js 的选项式API和组合式API是两种不同的编写Vue组件的方式，它们各自有不同的特点和适用场景：

选项式API (Options API)

这是 Vue.js 最初的API设计方式，也是最为广泛使用的编程模型。在选项式API中，一个Vue组件由一系列可选的选项组成，如 data、props、methods、computed、watch 等。这些选项在组件的定义对象中以属性的形式列出。

例如：

export default {
  props: {
    message: String
  },
  data() {
    return {
      localMessage: 'Hello from component'
    }
  },
  computed: {
    combinedMessage() {
      return this.message + ' ' + this.localMessage;
    }
  },
  methods: {
    greet() {
      console.log(this.combinedMessage);
    }
  },
  mounted() {
    this.greet();
  }
}

组合式API (Composition API)

Vue 3 引入的新编程模式，它允许开发者以更加灵活和可复用的方式组织组件的逻辑。组合式API的核心是 setup 函数，该函数接收两个参数 props 和 context，并在函数内部通过 ref、reactive、computed、watch 等函数来声明和管理组件的状态和行为。

例如：

import { ref, computed, onMounted } from 'vue';

export default {
  props: {
    message: String
  },
  setup(props) {
    const localMessage = ref('Hello from component');

    const combinedMessage = computed(() => {
      return props.message + ' ' + localMessage.value;
    });

    function greet() {
      console.log(combinedMessage.value);
    }

    onMounted(greet);

    return {
      localMessage,
      greet
    };
  }
}

区别：

• 模块性与复用性：组合式API通过函数式的编程方式使得逻辑片段更容易提取和复用，特别是在大型应用中。

• 代码组织：在选项式API中，状态和方法分布在不同的选项中，而组合式API将所有逻辑集中在一个 setup 函数中，可以根据逻辑相关性自由组织代码。

• 响应式API：组合式API提供了更精细的响应式控制，如 ref 和 reactive，可以直接在JavaScript表达式中使用 .value 来访问响应式变量的值。

• 作用域：在组合式API中，可以直接在 setup 函数中访问 props 和 context，而不需要 this 关键字。

• 生命周期钩子：组合式API使用 onMounted、onUpdated、onBeforeUnmount 等新的生命周期钩子函数替代原有的 mounted、updated、beforeDestroy 等选项。