00:00
好嘞,各位准备性工作呢,做的差不多了,那么接下来呢,我们写写VIEW3里面的代码,把第一张呢折叠起来,打开第二章,首先呀,我们看一下第二章的名字,叫做常用的composition API composition这词什么意思呀?直译过来它有组合的意思,所以说呢,我们也管composition API叫做组合式API,在VIEW3的官方文档里,人家也是这么称呼的,那这个时候啊,大家可能会产生一个疑问,说老师,组合这概念我明白,但是谁和谁组合呀,组合之后能生成什么东西啊,生成的这个东西又有什么作用呢?那在这呢,我声明一下各位,我不想在这儿拼了我的老命,再给你讲解什么叫组合式API是吧?好家伙,我说了七八分钟的概念啊,绕的云里雾里的,上天入地的结果,大家还是不明白啥叫组合式API,如果是一个特别好理解的概念啊,那咱们就直接跟大家说了,举两个例子,那就通透了呗。
01:00
在这的同学他太抽象了,所以说我们选择不在这,说老师那你在哪说呢?来瞧着把这个讲完了,把这个自定义后函数讲完了之后,各位不用我给你讲了,你就直接能告诉我了,说老师来吧,我告诉你那个组合其实是在哪儿体现的,什么叫组合式行不?各位,哎,所以说呢,我们暂时啊,先让这个概念在天上飘着,你先不用琢磨它,如果你自己心里边实在过不去这坎儿,同学你就当他是小猪佩奇式的API行不?哎,不耽误你呢去学习这些东西,好吧,哎,这个一讲完了,大家呢就通透了,就明白什么叫组合式了,然后你明白了之后呢,哎,我就紧随其后给你讲第三章啊,一些其他的组合式API啊,然后概念大家理解了,代码也敲完了,常用的,其他的都练完了,我再跟你说说这个组合式API和传统API相比它有哪些优势,并且呢,是以这个动态图的形式给大家呈现的。好吧,来,慢慢来,先回到第二章里的第一。
02:00
一小节,哎,叫做拉开序幕的setup,哎,你看我这词拉开序幕的,那就证明你想玩这个VIEW3,你最好啊,先把这个setup学一下,其实同学咱得这么说啊,我们想玩这个VIEW3,你有很多的切入点,哎,你比如说有的教程先讲这个,有的先讲这个,但是反正目前啊,咱们认为最好的方式就是先讲这个setup,为什么说呢?同学先读下边总结里的第二句话,Setup是所有组合式API表演的舞台。同学,你没有了setup,那就意味着你接下来学的那么多的组合式API您都没地方写,哎,想想如果演员失去了舞台,那去哪表演啊,是吧?各位来读第一句总结啊,首先我们理解理解这setup到底是个什么东西,非常简单,他是VIEW3中的一个新的配置项,同学,VIEW2里面都有什么配置项?来咱捋一遍,什么data methods comp watch,生命周期等等那些东西,对不对?那么VIEW3中提出来了一个新的配置项,它的名字叫做set up,它的值呢?哎,是一个函数,好,各位就读到这停写代码去走,不就是一个配置项吗?叫set up,值呢,是一个函数来走着,那我把这些无关的东西啊都给你往下删一删啊,回到这个APP里面,各位我也不用写的这么复杂,不是说了吗?啊,不用非得我跟标签全都删掉,哎,直接写一个H1叫做我是APP组件OK了吧,诶不用引入了这儿呢,也不用注册了样式让它白白啊非。
03:32
非常经典,来吧,写那配置名字叫啊set up,值是什么?哎,是一个函数,我是不是可以这样写完事儿了吧各位,哎,但是没有必要写的这么麻烦,这么写是不是挺好的?嗯,来,走着,OK,配置写完了,名儿没错,值呢,也是个函数。来,顺着笔记接着往下走,读第二句话啊,刚才读完了是吧?哎,说它是一个表演的舞台,特别重要。再读第三句吧,说组件中,哎,所用到的数据方法,计算属性,监视属性,生命周期等等这些东西都要配置在哪啊,Setup中,所以说各位你觉不觉得这setup你不在最开始学,那可以这样讲,你写的那些代码都是不标准的,对吧?你没有放在这个里面来吗?哎,人家官方要求是VIEW3里面换路子了,我们在VIEW2的时候,各位我想问你啊,你想配置点数据,你得用哪个配置项啊data,哎,并且组件里面还得写成一个函数是不是,哎,那我想配置点方法呢,是不是得写这个methods配置项,那么在VIEW3里面同学换了。
04:31
配置数据您不用再写data,配置方法您也不用再写methods了,哎,说老师,那我写在哪呢?哎,都往这里面写,那这里面能写什么呢?直接跟大家说啊,你在组件里面所用到的数据方法,计算属性,监视属性,生命周期,钩子等等的那些东西全都往这setup里面塞,所以说同学再一次的凸显出来它特别的重要啊,那接下来呢,咱们就写一写,是不是得写点数据啊,哎,是不是还得写点方法呀?来,回到代码里写写吧,配置点数据,那数据怎么写呢?说老师我写一个data,哎,你可给我停不用这个了,是不直接写,说老师不懂啥叫直接写来,比如说我想写一个人的名字,同学,那就直接写light name,等于直接来了张三啊,再给他一个年龄。
05:19
在这写上A置年龄呢,比如说让他是18岁,哎,同学,这些东西都叫啥呀?数据说老师弄了半天所谓的数据,就是我直接定义变量呗,对,就这意思,为啥我没用cost,诶那就意味着这些东西以后呢有可能会发生改变是不是?嗯,来走数据配置完了,那还配置啥呢?是不是得配置点方法呀?啊给它来一个方法,方法是啥呢?就直接写函数就可以了,Function来给它起个名字,比如说叫做c hello,哎,就说出一点欢迎词呗,嗯,那在这呢,同学我写一个alert,首先啊,让这个人说出自己的名字和年龄,然后在后边再来一个你好啊是吧,来吧,模板字符串啊,写上我叫什么什么什么什么哎,然后我什么什么什么诶碎了,诶这个什么什么碎了,然后再来一个你好啊,来个感叹号,那里边这怎么写?哎,是不是得用模板字符串Dollar符画括号,老师明白,This点内,你瞧瞧,你这不就写习惯了吗?同学冷静的分析问。
06:20
问题,我用this吗?不需要。为啥呀?作用域的问题嘛,我这setup不是一个函数,函数里面不是有name吗?那里边我不又写了一个函数吗?那这个里面没有内往外一找不就找到它了吗?是吧?各位,哎,直接写name OK,那在这呢,给它删掉到符画括号配置是不是得了?哎,这是数据,这个呢是方法,OK,准备好了,但是在这儿我先声明一个事情啊,有些同学,人家之前自己看了这个VIEW3相关的东西,就能给我这个代码挑出毛病,爱人说老师你这不对,你这么写丢失了响应式,的确是我这么写确实会丢失响应式,但是现在呢,我没考虑响应式啊,我还没有给大家讲那个ref函数,哎,不是我们之前说那ref属性,哎,有一个ref函数我还没跟你讲呢,还有一个reactive函数,我也没跟你讲呢,所以说在这同学我必须得先声明一下,叫做此处只是测试一下谁呀,Setup暂时不考虑,响应式的问题暂时不考。
07:23
以后呢,以后肯定得考虑啊,啥叫响应式,你一改数据页面就跟着变是吧,各位,哎,来先这么写着啊,写完了回到笔记里再往下过。哎,接下来我们说说set up函数的两种返回值,哎,很多人啊,总说哎,Set up啊,只有一种返回值,就是返回一个对象,错,它还能返回一个渲染函数呢,只不过用的不多。来我们说第一种啊,如果set up返回的是一个对象,那么返回的这个对象中的属性方法在模板中都是可以直接使用的,这是我们需要重点关注的地方。来读完了就去写在这儿来吧,怎么写,让你的set up怎么着?哎,有返回值,写个return return什么,先返回一个对象,对象里面啊,你肯定得写k value6哎,你比如说我这么写叫做姓名啊,它的值呢,读取name,这么写是不是可以?哎,同学别总想着data和methods,哎,已经过了那时代了啊,姓名内幕,但这么写不太好,是不是最好也叫内幕啊?那么不就处发了简写形式吗?啊,再往下来还有谁呢?
08:23
A,还有谁呢?一个方法是c hello,这不就把东西交出去了吗?前两个是数据,后边这个呢是方法,他说如果你返回的是一个对象,那里边的东西怎么着可以在模板里面直接使用,哎哟,是吗?来,我测试一下,把这文字呢换一下叫做一个人的信息啊,来展示,首先呢展示这个人的姓名,随后呢是年龄,再来一行这块换一下走,叫做年龄,然后在这儿呢,还得写一个按钮,Button,哎,教做什么叫做说话啊,然后在这呢,直接插之语法读吗?他不说的嘛,能直接用了,那咱就直接用啊name,那在这呢,年龄差值语法A,那么说话得绑定事件呢?哎,正常写艾特福克Li同学这块呢,没有什么变化,当然也有一些微调啊,我们回头再说正常绑定呗,来写那个回调的名字叫什么呢?叫say hello,一定要注意啊,你这要是不返回,各位上边是读不出来的,这会儿必须得返回啊,回头看一下效果,走刷新一波。
09:23
哎,你看是不是出来了一个人的信息,哎,什么张三18,而且注意右侧啊,各位view的这个新版的开发工具啊,给你提供了一些说明,你看这儿什么呀,数据,数据它在这呈现的吧,不叫data,因为你确实没有写data那个配置项,哎,人家直接叫setup,然后在这儿呢,给你展示的是里边的方法啊,当然在这呢,他用了这么一个词啊,叫做other,他认为呢,不是这种数据的东西,那就全算作是other,其实如果要写的好一点啊,各位这会应该写什么呢?叫做MYS,能让我们看的更明白一点是不?那在这儿呢,咱也说了,你就别挑了,之前连这工具都没有是不是,它后期呢,肯定会不断完善的啊,来把它呢往边上靠一靠,咱们测试一下点击这按钮好不好,用来走,你是不是弹窗了,而且数据呢,是不是读出来了,哎,同学我问一下这句话是不是证明完了,哎,对象中的属性方法在模板中是不是可以直接使用啊?好,我们再看另外一种返回值,就是这个setup函数还可以返回一个渲染函数,什么叫渲染函数呢?先往后读。
10:23
可以自定义渲染的内容,这会儿呢,我们做一个了解就可以来,回头我们测试一下啊,这回啊,换路子了,不返回这个走再来一个return,这回返回什么呢?返回一个渲染函数,我不管你是啥函数,你肯定是一个函数,那走着我是不是可以这么写,这是不是一个箭头函数,返回来吧,那怎么能体现出来它是渲染函数呢?那就是在这个函数里面会用到一个人,谁呢?H还记得它吗?哎,我们在VIEW2的时候啊,跟大家说过是不来我们回味一下啊,在这儿呢,回到这个VIEW2里面,打开找到那个mid GS,哎,看这各位有一个render h啊,这H哪来的呀?当时咱说过你只需要写render这个配置项啊,View呢,会帮你调用render,并且把一个H给你传进来,这个H就叫做渲染函数,那么在VIEW3里呢,也有这个东西,但是啊,需要你自己呢去手动的引入一下。
11:23
的花括号from从哪呢?从这个view里面,哎开始引入这个H,你看有提示就叫H啊,然后在这呢,H调用啊,调用的时候呢,跟之前一样,传入两个参数,第一个参数就是你要把哪一种元素放到页面,你比如说我想把H1放到页面,那么第二个参数呢,就是这个元素里的文字啊,或者是元素里的内容,哎,我就直接写,比如说上硅谷,OK啊,那要求就是这个渲染函数要把H函数调用的返回值交出去,为啥叫渲染函数,首先得有返回值,随后呢,得把H函数调用的结果返出去,同学有两个return啊,这个return呢,是把整个这个东西哎给它交出去,然后这里边呢,是返回H的调用结果,好了保存啊,你看一下效果去,但是在这儿呢,其实可以精简,是不是各位return删掉画画号删掉这块呢,也删掉,跟原来的写法其实是一样的啊来回到这儿呢,刷新一波,这时候发现各位,嗯,你模板里写的是什么已经不重要了,哎,就以你这个渲染函数为主。
12:23
你写了再多东西,人家不用直接用这个全都替换掉了是不?哎,这就是返回一个渲染函数,那在这呢,只是作为一个了解,把注释呢给大家写上,诶叫做返回一个函数,哎,我们称之为渲染函数,那这块呢,也写上这个注释,哎,走着叫做返回一个什么呢?对象啊,那这个呢,写一下叫做常用,哎,我们把这个呢解开,OK,写完了吧,嗯,那回到笔记里面,我们把这个就过完了,那接下来我们聊点细节上的问题啊回到这儿大家可能会有这么一个想法,说老师啊,呃,现在明白了啊,就是VIEW3呢,好像都得靠这个东西去往里面写一些配置,那么VIEW2里的这些配置我还能不能用呢?就比如说来各位我把这setup呢折叠起来,我们之前在学这个VIEW2的时候啊,来各位这块呢,我也注掉啊,我们在学这个VIEW2的时候呢,配置数据是不是可以用data这个配置项,那么在VIEWU3里面能不能写呢?是可以写的,哎,它是向下兼容的。
13:23
可以写啊,比如说呢,在这同学我写一个人的性别,哎让他是难,我是不是用VIEW2的方式配置了一个数据啊,那么接下来呢,我在用VIEW2的方式呢,去配置一个方法,哎这方法呢,比如说叫做这个啊方式,哎这里边就不用写方式了啊,就直接写了,刚才我这个呢叫做say hello,那在这呢,换一个,哎不叫say hello叫做C什么呢?Welcome,哎就展示一些欢迎的信息,直接写,然后它提示的呢,就是这个啊叫做欢迎来到上硅谷学习OK view2配置的数据二呢配置的方法,各位啊,你要扭转一下这个写法,这个里面是直接在对象里面写东西,都得是key value的形式,你看K,然后呢,Value啊,这是key,然后后边呢,这是value,但是刚才在这儿呢,各位,你是在函数题里边写东西,你就正常写代码啊,所以说别写着写着就飘了是吧,哎,你看刚才我在这还来一方式,那就不退了是吧,各位,哎,直接写就行了好了啊,里面有VIEW2配置的数据和方法,还有VIEW3的,那能不能用呢?来吧,测试一下,在这再来一个不叫年龄了。
14:23
性别读谁呢?Sex,那在这儿呢,再来一个按钮,哎,叫做说话,我在这呢写一个括号啊,叫做VIEW2所配置的,VIEW2所配置的什么呢?就是这个叫做say welcome,走,然后在这呢,把这一堆东西啊给它复制粘过来,也是说话啊,这是VIEW3所配置的,不是say welcome叫做say hello,是不把它放在这儿,那这个呢,我也得复制,把这儿呢也得改一下,来咱们测试测试啊,看看能不能行。回到这儿刷新一波,首先读数据啊,应该是没问题的,张三18难是不是都读出来了这按钮啊,有点太长了,来请允许我呢在这儿做几个分隔啊,写一个BR,再来一个吧,保存回到这刷新一波,首先看第一个啊,走c hello,这个刚才就好用,咱就测过了啊,来看这个VIEW2所配置的,来放大一点啊,叫say welcome走好不好用好用,那这个时候啊,可能有些同学说了,老师,那要不这样吧。
15:23
以后我还这么写吧,哎,那你学比三干嘛是吧?各位哎,说老师,我觉得这种方式啊,写起来简单,其实同学这种方式更简单,我告诉你,只不过你熟悉了这种方式,你知道吧,习惯是一个非常可怕的东西啊。好了,各位说老师,那以后我就知道了,可以混着写,看我心情,我想咋写就咋写,同学特别不建议你这样写,你知道为什么容易会出现问题,出现什么问题呢?来各位瞧着啊,我在VIEW2的配置里面加一个方法,叫做TEST1,哎,各位需要注意一下啊,TEST1是VIEW2配置里写的,那我在这里面,各位你看着,我尝试着读取一下谁呢?首先我读取一下通过VIEW2这种方式配置的数据,就是这个性别看看能不能读啊,哎,然后呢,我再读取谁呢?我再读取一下通过VIEW3这种方式配置的name,还有age,以及我再读取一下谁那个c hello,好吧,各位,我不用去调,我输出一下,如果它是一个函数。
16:23
那不就能访问到吗?能访问到肯定能调用啊,是不?各位,哎,在这儿TEST1,然后往上走,再写一个按钮,在这再来一个BR呢,再给它加几个按钮啊,换一个名字,哎叫做什么呢?测试一下在哪呢?同学说明白啊,在VIEW2的这个方法里面去读取VIEW3的配置,在2VIEW2然后的诶这个的配置中去读取VIEW3中的数据,还有什么呢方法,诶,那在这呢,叫做TEST1,我们测试一下啊,各位读取的是这些第一个其实肯定能读取出来,因为你通过VIEW2配置的数据,那在二的这个方法里面肯定能读取到啊是吧,主要是看后三个来回到这儿测试一下,来到控制台刷新一波,当我点这按钮的时候啊走。
17:20
同学,能不能拿到,肯定能拿到是不是?哎,这些不都拿到了吗?那这函数呢,如果你想调也能调啊,是吧?来测试一下,回来啊,在这给它注调在这这么写this.say hello,调一下呗,保存回到这刷新一波来该输出的输出了方法是不是也调用了?好回来,哎,那我们就发现了是吧?在VIEW2的配置当中,是可以轻松的读取到VIEW3里的配置的,那么同学你知道我接下来要干嘛?像在VIEW3里的方法里面或者说配置里面去读取一下什么呢?哎,去读取一下VIEW2里的配置,哎,这块换名叫TEST2啊,首先读取什么呢?读取自己的这个name a还有c hello,同学,这都不用说了,这个this直接删掉自己的那点东西往前放啊,那接下来咱读取一下啥呢?读取一下VIEW2里所置的数据,以及二里面所配置的什么呢?这个c welcome,这不是VIEW2里的一个方法吗?来放在这儿啊同学,我们关注的是后两个是不,那么你得做一个。
18:21
份啊,这个TEST2怎么着?哎,你得返回出去,你不返回人家怎么用啊?哎,那滑到上方,各位把这按钮再给它复制一份BR再给它来几个,在这呢,换点词测试一下,在VIEW3的配置中,准确点说VIEW3的set up配置中去读取谁VIEW2中的数据和方法啊,那在这呢,换一下叫做TEST2,由于我这个里面把T2交出去了,所以说你放100个心吧,它能用这东西啊,回到这儿刷新一波,清掉一下啊来点最后一个按钮走,你各位出事了,发现了什么呢?你通过VIEW3的那个setup确实可以读取出来,通过VIEW3配置的数据和方,那是肯定的,那不可能读不出来,最主要的是来吧,是不是and find,哎,你读不出来,说老师那我就记一下呗,说谁能读取出来谁的,其实也不建议大家去记啊,建议大家记的是什么呢?就是VIEW2的配置和VIEW3的配置不要混用,哎,我在这儿呢,只是给大家做一个说明啊,那这里呢,还有一个细节上的问题,就是如果啊,我VIEW2里面配置了一个数据,它叫A值呢,是一,哎或者100,然后呢,在这个VIEW3里面我也写了一个配置,诶,Let a等于多少呢?200,然后呢,你看着我把这A呀,嘿,我交出去,那你说有没有一种感觉啊,我要听VIEW3的配置A就是200,我要听VIEW2的A,就是多少100,那同学我问问大家,你觉得这A呀,它应该是多少呢?啊,猜一猜呗,直接在这写A,这么写啊,叫做A。
19:58
的值是,那回到这儿看一下效果啊,看跟你猜的一不一样,刷新一波200啥意思?二和三冲突的时候以谁为主?以三为主?好了,回到我们的笔记里面,同学来吧,把这些读一遍,尽量不要与VIEW2的配置混用。VIEW2当中的data method comp watch等等那些东西确实可以访问到setup中的属性和方法,就是VIEW3里的配置,但是VIEW3里的setup却不能访问到VIEW2的配置,Data methods comp,如果重名,谁优先,Setup优先?那这里面呢,还有一个注意点啊,各位,就是这个set up不能是一个a think函数。
20:35
老师,为啥呀,大家都知道,你说如果有一个函数叫做DEMO,它的返回值啊是一,然后有一天呀,你给这个函数的前边呀,用这个东西修饰了一下,写了一个a sin,然后呢,你再写这个DEMO来换一下画笔的颜色。DEMO,那么大家心里都明白,就算你返回的是一,它也会在这个一的外边给你包裹一层promise,你想取出这个一个位,您得怎么写点then说老师,那就这样呗,我给这setup呀,我加上这个a think修饰之后呢,那view就帮我点一下呗,完了拿出来我取出的,哎,出来我返回的这个对象呗,同学,人家可没做那件事儿啊,不允许你在这儿写a think,其实根在哪呢?各位,根就是一个函数被a think修饰了,它的返回值就再也不是单纯的这个对象了,而是一个被promise包裹的对象,是不?各位,哎,所以说在这呢,别写这个,什么时候你容易写出这东西呢?就在这里边啊,你万一你通过这个自己封装的一些adjust发一个请求,你可能哎呀写罚了这个点then.then可能你在这里边就来了一个A关键字,那我们都知道A语句必须得配合a think函数,你就可自然了呢,在这写一个a think,你写你就输了,你发现模板中的数据是不是全都用不了了,各位。
21:51
哎,那是因为你错误的加上了这个,呃,Think,好了,各位,关于set up我们就聊到这儿,好不,各位慢慢来啊,不建议把配置混用,或许以后有一天啊,各位就是VIEW3,如果啊说这个生态比较好了,可能会把VIEW2里的这些配置直接就移除掉啊,你现在虽然能写,人家是为了一个过渡,那回到这里面,同学把这src复制一份,改一个名字吧,哎,叫做零二_src,名字呢,叫做初始setup啊,我们并没有把这个setup里面所有的东西都跟大家说,还有很多细节上的点,我们再慢慢聊啊,这叫做初识,就是第一次认识吗?是吧,各位来,这小节我们听。
我来说两句