optionsAPI与compositionAPI

1、区别

1. optionsAPI：
   vue2中使用的是optionsAPI，来定义一个组件内部的一些属性，如methods、data等等；
   其缺点往往会在大项目中体现出来，比如一个简单的计数器功能，可能需要在methods内部书写一部分逻辑，在computed内部也书写一部分逻辑，那么问题来了：如果该组件内部有n个这样的小功能，那么此时代码逻辑是十分分散的，并且后期迭代维护面临的问题也是可能修改一个需求需要在不同的属性内部反复查找相关的代码，而compositionAPI的出现就是为了解决这一问题的。
2. compositionAPI：
   vue3新增的compositionAPI主要就是为了解决API太过于分散的问题，避免一个功能点下的api太过于分散不便于维护，将同一个功能下的api统一放到一个地方，这样一来项目的开发和维护就简便多了。

2、setup()

compositionAPI也叫做组合式API，vue3中组合式API的入口就是setup函数；

setup函数会在组件被创建（created）之前执行。
setup函数中不能使用this，该函数内部并不会绑定this到当前的vue实例！

1. 两个参数：

• props:与options API中的props一样，同样是通过父组件传递过来的数据；
  • vue内部会默认传递该参数到setup中；
  • props是响应式的，因此在setup中使用时不能对其进行解构，如果需要解构，则需要依靠toRefs方法实现：

    		import {
            toRefs } from "vue";
    	
    		props:{
           
    			msg:"JavaScript大王"
    		},
    			// 不能对props解构  否则会失去响应性
    		setup(props){
           
    	  		// const { msg } = props   错误方式
    	  		// 正确的解构操作应该是这样
    	  		const {
            msg } = toRefs(props);
    	  		console.log(msg.value)
    		}
    

  • 当props中的某个属性非必传或者props内部未定义某个属性时，需要通过toRef方法在setup内部完成对其的定义：

    		import {
            toRefs } from "vue";
    		// 比如props中只有msg   没有peanut这个属性   则需要如下的方式去定义peanut
    		props:{
           
    			msg:"JavaScript大王"
    		},
    		setup(props,context){
           
    			const peanut = toRef(props,'peanut')
    		}
    

  • props最好是对象形式（数组形式会报错）
• context:
  • 是一个普通的JavaScript对象，其暴露了在setup中可能会用到的值：attrs、slots、emit、expose；
  • attrs、slots应该尽量不对其使用解构；
  • 同时，在执行setup时只能访问到attrs、slots、emit、expose，不能访问到data、computed、methods、模板的refs这些属性；
  • demo
    • App.vue

<template>
  <h1>这是App.vue</h1>
  <demo :msg="msg" v-if="msg" demo="test">
    <template v-slot:haha>
      <div>111</div>
    </template>
  <