Vue3的设置还能这样用吗？

1.前言昨天讲什么是组合API，\#马上2202了，不知道Vue3的组合API是什么？[2]今天就来听我说说vue3的setup怎么用。借用官网的一句话，setup选项是一个接收props和context的函数，也就是说它的基本写法应该是这样的：exportdefault{name:'test',setup(props,context){return{}//这里返回的任何东西都可以在组件的其余部分使用}//组件的“其余部分”}复制代码接收一个道具和上下文函数，并将设置中的内容通过return暴露给组件的其余部分。2.setup注意事项由于执行setup函数时还没有执行Created生命周期方法，所以data和methods的变量和方法不能在setup函数中使用。由于我们不能在setup函数中使用数据和方法，Vue为了避免我们误用，直接在setup函数中把这个改成undefined3.定义响应式数据refreactivevue3通过ref定义响应式数据reactiveref我们用它来定义basic数据类型作为响应式数据，其本质是在Object.defineProperty()的基础上重新定义属性实现的（ref更适合定义基本数据类型）reactive用于将引用类型定义为响应式数据，其本质是实现object基于Proxy的代理基础数据类型（单一类型）：除了Object。字符串、数字、布尔值、空值、未定义。引用类型：对象。其中包含的函数、数组和日期。定义使用复制代码结果4.toRefs如果我们使用响应式的形式来定义响应式变量setup(){constobj=reactive({name:'inline',gender:'Male',age:'18'})return{obj}}使用

把代码复制过来，这样我们在使用参数时觉得麻烦模板，那我们想直接用{{name}}来访问，好吗？答案是可行的。这里我们使用es6扩展操作符setup(){constobj=reactive({name:'inline',gender:'male',age:'18',})return{...obj,}}复制代码使用Copycoderesultanimation.gif这里可以看到我们的参数正常显示在页面上了，但是我们改一下参数当我发现视图没有更新时，这是为什么？？？我们把扩展运算符写成它的等价物constobj=reactive({name:'inline',gender:'male',Aage:'18',})//...obj==>name:obj.name复制代码嘿嘿嘿嘿，等一下我的鼠标飘起来，怎么提示name只是一个字符串呢？image.png然后我们看看当我们使用ref定义值时image.png会提示什么。这时候我们看到name是一个Ref，这是一个响应式字符串这样我们就找到了视图没有更新的原因。当我们使用...扩展运算符时，我们得到的只是一个普通类型的值，而不是响应式数据。为了解决这个问题，vue3为我们提供了toRefs函数，让我们看看它是如何工作的setup(){constobj=reactive({name:'inline',gender:'male',age:'18',})return{...toRefs(obj),}}复制代码

姓名：{{name}}

性别：{{gender}}

年龄：{{age}}

更改姓名更改性别Changeage

复制代码的参数可以正常改变，改头换面成功的动画1.gifttoRefs总结toRefs会改造我们的responsiveobject变成一个普通的对象，然后把这个普通的对象里面的每个属性变成一个响应式数据5.setup中的执行方法1.通过响应式定义响应式数据来定义方法复制代码通过点击事件将值传给fun1，fun1收到pass后对于fun2，我们使用this.fun2()方法调用fun2，为什么this可以正常执行而不会报undefind，因为这里的this不是this，在Vue2中this是一个实例，而这里this是一个对象clickme1复制代码结果，成功调用并输出image.png方法2注意这里调用fun2的方法和方法1不一样，可以自己调用直接不调用exportdefault{name:"test",setup(){constfun1=(data)=>{fun2(data)}constfun2=(data)=>{console.log(data)}return{fun1,}}}复制代码调用clickme1复制代码结果image.png方法3这个方法避免了setup上函数逻辑的堆叠问题，我们可以把独立的函数写成单独的函数这里我在setup外写了fun()login()两个function函数，在setup里分别调用了import{ref,reactive,toRefs}from"vue";exportdefault{name:"test",setup(){常量测试1=fun()//如果函数返回的参数太多，可以赋值给变量，暴露给组件的其余部分用扩展操作符const{test}=login()//return{也可以单独接收...toRefs(test1),test,}}}//函数1functionfun(){letstr=ref('我是函数1')functionfun1(data){console.log(str.value)fun2(data)}functionfun2(data){console.log(data)}return{fun1,fun2,}}//函数2functionlogin(){constobj=reactive({msg:'我是函数2，我爱掘金'})functiontest(){安慰.log(obj.msg)}return{test}}复制代码调用clickme1Clickme2复制代码结果animation.gif方法四和方法三一样，只是我们把两个函数函数提取出来放到单独的.js文件image.png中，然后导入组件并将其添加到设置调用的复制代码正常执行并输入图片方式5，我们也可以这样写，这里我定义了一个响应式响应对象，赋值给登录变量，这个响应对象包含了我们登录需要的参数、验证和方法，在这里，我们将它们全部放在登录响应对象中，然后使用toRefs和扩展运算符进行公开{参数：{用户名：'123',password:'123456',},rules:{username:[{required:true,message:'请输入用户名',trigger:'blur'}],password:[{required:true,message:'请输入密码',trigger:'blur'}],},login(){this.param.username='inline'this.param.password='123456'console.log('登录成功！')}})return{...toRefs(login),}}}复制代码让我们使用Login复制代码image.png即可正常执行，所以我们也可以把一个函数的所有方法和相关参数写在一个reactive对象中。如有遗漏的执行方法欢迎在评论区指出~~~6.scriptsetupvue3.2版本正式发布scriptsetup用法复制代码不是很简单的变量方法吗使用复制代码scriptsetup中定义的变量和方法不需要返回，无需注册直接导入组件，可以直接使用复制代码ReleasePropsandEmits复制代码普通脚本和脚本setupscriptsetup可以和脚本同时存在copycodescriptsetupadditionaloptionscriptsetup为我们提供了大部分相当于optionsapi的能力，也就是说大部分optionsapi能做的，scriptsetup能做的，还有什么是什么script设置不能做？如下：nameinheritAttrs插件或库需要的自定义选项那我要用这些怎么办？回答解决办法是单独写复制代码defineExposescriptsetup定义变量，不会被默认暴露，因为此时变量包含在setup的闭包中，我们可以使用defineExpose({})将组件的内部属性暴露给父组件。使用父组件通过模板引用获取本组件的实例时，获取到的实例会是这样的{a:number,b:number}（引用会像普通实例一样自动展开）VII.最后写的脚本设置还有很多话要说。这几天弄明白之后，可以单独出一期它的用法。最后感谢大家的阅读~~~你的点赞和阅读是对我最大的鼓励~~~