前言

根据某站的vue教学视频，看万卷教程不如敲万行代码，根据教学进度整理对应代码，更快的熟悉这门语言

流程

        按教学视频里说Vue2和Vue3最大的区别就在OptionsAPI（选配式） 和 CompositionAPI（组合式），

OptionsAPI（选配式）

以正常的vue2代码为例

数据的交互都在<script>里，数据在data()里，方法在methods:里，如果还有别的比如监视啥的就再加一个watch，以此类推，就是不同的数据交换功能在不同的位置，按需添加自己需要的配置。

缺点：正是因为分的有点细，同一功能但是代码却是相互分割的，而且如果多个功能在一起的时候，代码就相互交叉很难分割，因为一个功能可能在代码的多个配置中都有涉及，所以在维护的时候难度就比较大

CompositionAPI（组合式）

简单的来说，添加一个setup配置，上述的所有配置式的代码全都写到这里面，这样代码统一管理，而且不同的功能很容易切开，因为在同一个代码块里，对我的感受来说就有点像java后端的感觉，并且这个setup是在配置式api之前加载的，兼容前者，但是实际开发的话学了vue3基本上和vue2关系就不是很大了（没学过vue2，此处说法接受反驳，仅个人想法），后面都按setup去实现代码更方便
代码示例，按上面修改为setup模式

<template>
  <div class="person">
    <h2>姓名:{{ name }}</h2>
    <h2>年龄:{{ age }}</h2>
    <button @click="showTel">查看联系方式</button>
  </div>
</template>

<script lang="ts">
export default {
  name: 'PersonA',
  setup() {
    //data
    const name = 'kane'
    const age = 18
    const tel = '1223355446'

    //methods
    function showTel() {
      alert('kane: ' + tel)
    }
    return { name, age, showTel }
  },
}
</script>

<style>
.app {
  background-color: red;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
</style>

效果最后都是相同的