00:00
好嘞,各位,那截止到目前呢,我们学完了第二章啊,也学完了这个第三章,也就是说常用的组合是API,以及一些其他的组合是API啊,我们都学完了,那么我们回头看看这个组合式API它有什么优势呢?是吧,你学了这么多setup里面能写那么多的东西,那能不能跟人家表达出来这东西有什么优势啊,那在这呢,形成了一个对比啊各位,首先我们要明确这个组合式API是VIEW3里面所提出来的,对吧?那我们之前在VIEW2里面写的那些API叫什么名字呢?哎,叫做options API什么意思呢?翻译过来啊,它的意思就是配置式的API,哎,也就是说你得写data配置,Methods配置,Comp的配置,都是基于配置的,那在比如三里面呢,还是一个组合式的,那怎么能体现出来它俩的区别呢?各位用几幅图啊,去给大家演示啊,这是第一幅,这是第二幅,这是三,这是四。
01:00
我们先看第一幅图,哎,VIEW2里啊,我们这么写代码,Data messages啊,Computer watch,功能A,然后呢,功能BOK,画笔给它卡住,各位先看绿色框里的东西,它想表达的就是你在VIEW2的时候得写很多配置,配置的名字分别叫date method comp watch等等,还有一些其他的东西,图里面没有体现的是不?那这个功能A怎么理解呢?来瞧着各位啊,功能A所对应的数据,只要是数据,你是不是得放在data里啊?那么功能A所对应的方法呢?是不是得放在ma里?那同理,功能A所对应的计算属性是不是得放在这儿啊?啊说老师这不挺好的吗?你想想,如果你这个应用里边的功能特别多,或者说一个组件里边你的功能特别多,各位在这儿还有功能几呢?功能B,那就意味着功能B的数据也得放在这儿啊,功能B的methods也得往这里写,计算属性也得往这里写,当然这里面它没有体现啊,他说功能B有watch,它想表达的意思就是你所有功能的组成部分都拆散了。
02:11
对于A来说,好家伙,数据在这儿,方法在这儿,然后呢,计算属性在这儿,都拆散了,功能一旦多了,这事儿就不好玩了啊,比如说你看一下第二幅图,第一幅图和第二幅图体现出来的都是options API所存在的问题,哎,也就是说VIEW2那个年代的API所存在的问题,来看一下这儿啊各位走,你看它一直往里边加东西来再卡一下,这什么意思呢?它表达的就更明白了,各位咱们看一个这个分辨率比较明显的啊,咱看那绿色的,那也就是说绿色的那个功能数据在这儿呢?绿色的那个功能的方法在这里呢?绿色功能的监视在这儿呢?如果你功能特别多,那就造成什么问题呢?好家伙,一个data里边保存着N多个功能的数据,那同理,MYS里面保存着多个功能的方法就特别乱,就不好维护了,咱就这么说吧各位。
03:11
你想改绿色的这一小条啊,就这个,就这个东西,绿色这一小条我指一下啊,就这个绿色这一小条所对应的一些功能的话,你有可能啊,就得这么改了,打开一个庞大的data,然后呢,各种找A呀,Abcde这么多功能的,然后去找,找到谁的数据,找到绿色框这数据改一改,然后还得找到谁,哎呀,我的天MYS,然后methods里面你发现哎,有80多个方法,你得一点一点找你那个东西在哪儿,上上下下来回动对不对?各位,万一你这功能再复杂一点对吧,还有生命周期钩子,还有计算属性,Watch啥的都用上了,同学来吧,你就改吧,上上下下来回改就特别乱是不?所以说我们读一下它存在的问题啊,就是使用传统的options API呢,新增或者修改一个需求的时候,就得分别在data method comp watch,生命周期钩子里面进行不断的修改,对吧?哎,这就比较麻烦,就是东西啊。
04:11
它不集中,我们最理想的状态是这个data里面放的诶只是一个功能,所对应的数据是不这样的话多好啊,来往下看,那么组合式API就解决了这个问题啊,怎么解决的呢?来同学看一下左边的这个图啊,左边这图儿注意看。再观察一下,完整的看两遍第一遍啊,再走,再看第二遍。好,OK,咱们说说这图怎么的了,各位,这个图啊,在动之前这块所体现的就是options API,你发现啊各位这个data里面都配置着什么?配置着这个功能的data以及这个功能的这个功能的哎哟,我天配了四个功能的data对不对?好,那接下来把这些东西变成组合式API,哎,同学就很好了,瞧着啊变,等着它变啊走同学你发现诶,功能A相关的数据方法,计算属性都在这一堆里啊,那功能B相关的方法、计算属性等等这些东西诶是不是都在这里,那同理功能C的还有功能D的是不是都可以按照他们这个分类进行去组合呀,就比如说同学完成功能A的数据方法、计算属性,生命周期数据监视都写在一个里面,对不,这多好呀,然后你再往后看啊,看右边这图,各位再仔细。
05:40
观察,嗯,发现了什么呢?哎,我把功能A相关的那些东西变成一个hook函数,功能B相关的又是一个OOK函数,然后呢,诶,在这个setup里面我就可以写了,对吧?Use功能a use功能二,然后这use不要紧,各位咱就拿这举例子啊,你看就拿这个,哎,等会儿啊,等他画完那箭头,咱就拿这举子,各位,那你说是不是有可能就是功能A相关的数据方法、计算属性,生命周期钩子等等那些东西都在这里呢?那以后只要你想改功能A相关的东西,各位来到这个HK里面是不是就可以改了啊,很集中嘛,就是我打开的这个use a.GS跟别人都没关系,就是A这些功能所对应的数据方法、计算属性对不对,这多清晰啊,所以说各位,你想让组合式API发挥出自己的威力,你必须得借助谁?
06:40
H函数大家想想,你说是不是同学你琢磨琢磨啊,要是说咱们直接打开这个setup来,咱就说它同学你说我写的东西只不过就是说从外部轻松的移入到这个里面,体会不出来组合式API的威力,你说对吧,各位其实在这儿啊就有所体现了,你瞧打开这个hook这个里边的东西,同学来这是啥实现什么跟鼠标打点功能相关的数据,这是啥实现打点相关的方法,这啥实现打点相关的生命周期钩子,以后只要我想改打点那功能各位来到这里面来吧,应有尽有,跟它相关的都都在这儿呢,对不对,然后通过APP里面在setup里面,诶,你就简简单单的来到哪呢?来到这个里面DEMO里面,对吧,简简单单在这use一下,你就发现跟打点相关的数据方法啥的就都来了,这不就是组合吗,对不对,各位诶之前讲这儿的时候也已经跟大家说了,只不过没有去对比是不。
07:40
各位,哎,你没事儿呢,自己再看看这几幅图对吧?把所有的数据方法,计算属性按照功能点进行打包,那么打出来的包是什么呢?就是一个hook函数,哎,就这么回事,所以说这回大家明白了这个组合式API的优势吧,它的优势就是可以让我们更加优雅的是吧?哎,这词用的优雅的组织我们的代码啊,还有函数让相关功能的代码更有序的组织到一起,对不对?同一个颜色就代表同一个功能,那你看你对比嘛,之前是啥拆散的,你看你看这个棕色的哪儿哪儿都是,但是在这儿呢,很集中对吧?各位,OK,那这小节呢,我们听。
我来说两句