在前面的教程中，我们一起学习的vue3的内容其实大部分和vue2是一致的，从这节课开始我们开始学习vue3中的新特性，
首先，也是vue3新特性中最重要、内容最多的组合式api，组合式api既可以解决之前vue2开发的痛点，又提升了性能，我们这节课先对组合api做一个介绍。

1.vue2开发的痛点

我们在用vue2开发或者说是用选项optionsAPI时，是这样写代码的

<script>
export default {
  name: 'App',
  components: {},
  data() {
    // 定义所有的数据
    return {}
  },
  mounted() {}, // 定义所有的回调
  computed: {}, // 定义所有的计算属性
  watch: {}, // 定义所有的侦听器
  methods: {}, // 定义所有的方法
}
</script>

这么写代码少的时候问题不大，但是在一个复杂的组件里，代码可能会很多，就会有问题，我们来拿官网的图看一下

options-api.png

问题在于同一个功能的代码会离得很远，比如说绿色的部分，术语同一个功能的代码，上面是定义data，下面是相关的方法，他们离得很远，在修改是找起来很麻烦，而且显得整个组件很乱，
这一点在开始时我是深有体会

2.setup函数

现在vue3有了组合式API，就可以把同一功能的代码放在一起，方便开发和维护
原来在选项式API中的data、生命周期函数、computed、watch、methods我们全都不要了，
把它们写在setup函数里面，具体怎么写咱们以后一个一个来学习，现在先来看一下setup函数的写法

<script>
export default {
  name: 'App',
  components: {},
  setup() {
    console.log('setup函数被调用了')
  },
}
</script>

跟之前生命周期函数写法类似，在导出的对象下写了一个名字叫setup的函数，
在这个函数里我们打印了一句话，
打开页面的控制台，发现已经打印出这句话了

setup函数被调用了

说明名setup已经被调用了

这节课就到这里，只是一个简单的介绍，下节课开始我们正式学习组合式api的用法，
这里我要强调一下，咱们初学者现在先学会它的用法就行，它内部实现的原理可以先不着急学。
因为先学会用法，做出效果，让我们有成就感，有更进一步学习的动力，
如果一上来学习很多枯燥的理论知识，容易让初学者有挫败感，进而放弃后续的学习。

废话就说这么多了，预祝大家学习顺利。