Composition API与Options API的区别

区别：

一、vue2（Options API）：

在vue2中，编写组件的方式是Options API

特点：

在对应的属性中编写对应的功能模块，比如在data属性中定义数据，methods中定义属性，computed中定义计算属性，watch中监听属性改变，还有一些声明周期钩子

弊端：

1.当实现一个功能的时候，我们就要将这个功能的对应逻辑代码拆分到各个属性中

2.项目一庞大，组件变得更大、更复杂，代码就会非常多，同一个功能的逻辑就会被拆分的很散，当想要修改一个功能逻辑代码的时候，找起来就非常的麻烦

3.当别人阅读你的代码的时候，这个组件会变得难以阅读和理解

二、vue3（Composition API）：

为了解决Options API的弊端，vue3的Composition API为了解决这种碎片化代码，避免一个功能的逻辑代码太分散，于是增添了一个setup函数，这个选项可以用来替代之前所编写的大部分其他选项，比如data的属性，methods，computed，watch，一些生命周期钩子函数。

<template>
  <div>
    <h2>{{ message }}</h2>
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      default: "",
    },
  },
  // setup(props, context) {
  // context解构的写法
  setup(props, { attrs, slots, emit }) {
    console.log(props.message);
    console.log(attrs.id, attrs.class);
    console.log(slots);
    console.log(emit);
  },
};
</script>

<style scoped></style>

想要详细了解setup函数的使用，可参考我的另一篇文章

Composition API之setup函数的基本使用_不知名coderkk的博客-CSDN博客