关于vue3compositionAPI

setup函数props,contextsetup(props,context){}的参数，props：一般通过父组件传递的属性都会放在props对象中，通过props可以直接获取context使用时：包含三个属性attrs：所有非prop属性；slots：父组件传过来的slots；emit:setup会在我们在组件内部emit的时候用到，这个不能用！这里官方文档有写ref将原始数据类型（primitivedatatype）转换为具有响应式特性的数据类型的用法。原始数据类型一共有7种，分别是：**StringNumberBigIntBooleanSymbolNullUndefined**ref会被浅包解决，直接在庙上使用{{test}}即可。setup(){lettest=ref(0)lettobj=ref({a:1});//测试值=1;consttestFun=()=>{test.value++;tobj.a.vaue='b';console.log(tobj.a)};return{tobj,robj,test,testFun,}}，假设我们用reftobj定义它是一个对象。当我们改变testFun中的值时，会报错。Reactive使用reactive（相当于Vue2中的Vue.observable()）赋予对象（Object）响应特性。假设我们写<脚本>从'vue'导入{defineComponent}；从'vue'导入{ref，reactive}a='c';console.log(robj);},});return{...robj}},});这时候我们发现页面没有变化！其实之所以这样没有效果，是因为一旦一个反应对象被销毁或者展开，它的反应性就会丧失。通过检查我们可以知道，虽然robj.a的值确实发生了变化，但是robj.ae的类型只是一个普通的字符串（String），不具备响应特性（reactivity），所以页面并没有遵循它当值改变时重新渲染。我们可以改成这样页面可以随着值的变化而呈现，但是这个代码有点过于复杂，此时引入toRefs。toRefs的使用Vue3提供了一个新的API：toRefs，可以将一个反应对象（reactiveobject）转换为一个普通对象（plainobject），同时将对象中的每一个属性转换为相应的响应式属性（ref）.最后总结成表格方便参考当你忘记特性时type是否触发页面变化ref是否可解构是否响应式是否toRefNoNotoRefsNoYes