vue3中 Component API

setup只在初始化时执行一次，所有的Component API函数都在此使用
1 在beforeCreate生命周期之前执行，只执行一次；

2 组件对象还没有创建，不能使用this，this时undefiend，

3 setup返回对象中的属性会与data函数返回对象的属性合并成为组件对象的属性，返回对象中的方法会与
methods中的方法合并，如果重名，setup优先。

4 不建议混合使用。（setup中不能访问this，methods中可以）
5 setup函数如果返回对象，对象中的属性或方法，模板中可以直接使用
6 setup不能是一个async函数，因为返回值不再是return的对象，而是promise，模板中就不可以使用return中返回对象的数据了。
7 参数(props,context)
props:父组件向自组建传递的数据，并且是在子级组件中使用props接收的所有的属性
context，可以使用es6语法结构setup(props,{attrs,slots,emit})
7.1attrs:获取当前组件标签上所有没有通过props接收的属性的对象，相当于this.$sattrs
7.2 slots:包含所有传入的插槽内容的对象，相当于this.$slots
7.3 emit:用来分发自定义事件的函数，相当于this.$emit

定义一个响应式数据，ref
const xxx=ref(initValue);js中操作数据需要使用XXX.value,而模板中不需要加.value
ref定义一个响应式的数据，返回的是一个Ref对象，对象中有一个value属性，如果需要对数据进行操作，需要使用
该Ref对象的value属性

vue2中通过this.$refs来获取dom节点，vue3中我们通过ref来获取节点
<component-a ref='aa'></component-a>
setup(){
const inputRef=ref(null);
onMounted()=>{inputRef.value&&inputRef.value.focus()} return {inputRef}
}
定义多个数据的响应式 reactive
const proxy=reactive(obj)

接收一个普通对象然后返回该普通对象的响应式代理器对象(Proxy),响应式转换时深层的，会影响对象内部所有嵌套的属性，所有的数据
都是响应式的
import {computed} from 'vue';
setup(){const fullName=computed(return user.firstName + user.lastName);}

import {watch,ref} from 'vue'
setup(){
const fullName-ref('');
const user=rective({name:'zhangsan',age:20});
watch('user',({name,age})=>{fullName.value=name+age},{immediate:true,deep:true})
}
监听非响应式数据的时候需要使用回调函数的形式
watch([()=>user.name,()=>user.age,fullName],()=>{console.log('我执行了')});

监视数据发生变化时执行回调，不用直接指定要监视的数据，回调函数中使用的哪些响应式数据就监听
哪些响应式数据，默认初始化时就会执行第一次，从而可以收集需要监视的数据。