组合式(Composition)API

 1、选项式API与组合式API

在vue中我们有两种API，一种是选项式，一种是组合式，其中选项式主要用于vue2，组合式主要用于vue3。

选项式API(Option API) 

在vue2中我们书写选项式API，每个选项都有固定的书写位置，使用data选项来书写响应式数据，methods中书写方法。

• 优点：写代码的位置已经约定好，结构清晰

• 缺点：代码组织性差，相似的逻辑代码不便于复用，逻辑复杂代码多了不好阅读，同一功能的上下文代码难找。

• export default{
      data(){
          return{
              list:[]
          }
      },
      methods:{
      //书写方法函数，在需要读取data中定义的数据时，需要使用this. 来获取，所以里面不能使用箭头函数
         
   },
     
      }
  

  组合式API(composition)

         所有与特定功能相关地代码可以写到一块，代码比较集中，在定义响应式数据时不在需要data，方法函数也不再写在metgods中

<script setup>
import { computed,watch,ref ,reactive} from "vue";
//定义响应式数据
const num = ref('');
const list = reactive([]);
//定义方法
const getNum=()=>{
    
}

</script>

 2、生命周期函数

选项式API	组合式APT
beforeCreate	没有beforeCreate,在setup中做了beforeCreate、created中应该做的事
created
beforeMount	onBeforeMount挂载DOM前
mounted	onMounted挂载DOM后
beforeUpdate	onBeforeUpdate更新组件前
updated	<