00:00
好嘞,各位,那在这一小节呢,我们跟大家说一下VIEW3里面的这个自定义hook函数,我们先读一下它的概念啊,什么是hook,本质是一个函数,把setup函数中所使用到的组合式API进行了封装,读完这个标准概念之后吧,我觉得大家可能体会出来的也只是前半句,哎,说老师明白了,H本质就是个函数。至于说后半句话,说把组合式API进行了封装,怎么封装的我也不知道,封装完之后有什么优势呢?我也体会不出来,所以说同学得借着一个功能点咱代码上键啊,来回到代码中精简一下刚才写的代码啊各位,这么多的组合式API生命周期钩子配置我不要了,哎,那在这呢,我也删掉,一会儿呢,我用到哪个我就写哪个啊,这些都删掉,然后通过这种形式配置的,哎,配置项配置的这些生命周期钩子呀,我也删掉啊,然后在这儿呢,空行删掉删掉好接下来。
01:00
来,那各位我加一个功能,诶加个什么功能呢?就是我想让我的鼠标点击页面的时候啊,能拿到鼠标的坐标,哎,你比如说我这点一下,这点一下能拿到鼠标所处的坐标,然后呢,把这坐标啊展示到页面上,OK,来咱写写去啊走首先呢得写好这个结构对吧?在这呢,我来一个HR的这个分割线,然后在下边呢,我开始写,写一个HR啊叫做当前点击十鼠标的坐标为,哎,那坐标肯定是X和Y嘛,那我就先随便写着啊,X冒号多少不知道,在这呢,再来一个Y冒号多少呢也不知道,走先把这些准备好啊,然后呢,就去准备数据啊,那这个呢,我也删掉吧,数据同学,一个点的信息肯定得有X和Y2个坐标,那我就把这个点呢,给它包装成一个对象了啊,叫做point不有这个点的意思吗?
02:00
那既然是一个对象类型,那我就想用这个reactive,哎,去给它定义,那直接写着这块呢,是一个对象里边有X,一上来让它默认的值呢是原点,哎,就是零,那在这儿呢,我再来一个Y,让它的初始值呢也是零,那么接下来呢,我得把这个是不是交出去,哎,那页面上啊,我就可以用了,这会儿知道怎么写了,差值语法直接来point.x那这呢,差值语法直接来point.y是不是就可以了?嗯,来先看一下效果啊,刷新一上来肯定是零零啊,那我点的时候各位拿到鼠标的坐标,哎,然后一更新数据是不是就可以了啊,那回到这儿,各位我得给谁绑定事件呢?我的要求各位啊,可不是某一个div,可不是某一个按钮,是整个可以看到的这个区域,诶,那怎么办?就给window绑一个,那问题是什么时候绑最合适呢?是不是这个组件挂载完毕我就应该去绑定啊?那在这呢,同学我不想。
03:00
使用那个正常配置的那个API啊,就是原原来不是在这写这个嘛,什么mount嘛啊,我不想写这个了,我想在这个setup里写组合式的那个生命周期钩子,那我就得引入对吧?各位,哎,那它的名字叫什么来着,叫on mounted是不是得用这个呀?好把它放在这多了一个on嘛,大家得记住啊,走然后呢,传入一个函数,好,只要这个DEMO组件一挂载,那B宝就走这个回调是不里边干嘛呀?诶你给这个window给它来一个I listener啊鼠标点击嘛,当然是click,那这里边怎么写呢?点击的回调里面我是不是得拿到鼠标的坐标啊,嗯,那怎么拿呢?就借着这个event事件对象是吧?各位,哎,我先来一个输出啊even event点各位怎么拿到X坐标呢?哎,我就用这个了,配置X啊,大家也知道我能拿到很多的坐标,对不对,哎,我就用这个了,配置X,那在这儿呢,来一个event点什么呢,配置Y。
04:00
这不就可以了吗?嗯,来回头测试一下啊,点点点点点是不是拿到鼠标坐标了,那比如说我要点的是左上角呢,我看我能不能点出来那个零零啊,比如说放在这儿走,诶是零零是吧,那往右下角越点越大呗,是不是各位OK,拿到这个坐标了,那接下来做一件事就行了,是不是往里面存呢?哎,那怎么存呢?走着point.x是谁呢?就是这个点配置X,那同理,这块改成Y,这块改成大写的Y,是不是就搞定了,诶把这行呢给它除掉好了,我们刷新一波啊走走走走走是不是实现了呀?嗯,但是你做的不够完善,各位,哎,可以写的更好一点,就是说你没必要啊给这个window身上一直加着这个点击事件,你说对不?各位,因为毕竟只是DEMO这个组件,在用这个功能获取鼠标坐标,如果有一天DEMO这个组件咋的它都已经不展示了,或者说已经被卸载掉了,那你说最好咋。
05:00
的,哎,就不要再保留那个事件的监听了,对不?哎,就比如说各位,我把这给你留着啊,那你看着我这XY是不是DEMO组件在用啊,那你看着说我已经把这DEMO组件啊走让它不显示了,但是你看各位啊,这个事件还在,这就不太合适是不是各位?哎,那怎么做呢?回来就得借助另外一个钩子了,那钩子叫什么来着,On before on amount,当卸载之前,那你做一件事吧,你说干什么呢?卸载之前是不是得移除这个事件监听啊,那么同样得写window点什么呢?哎,绑定事件叫做I的event listener,又看你基本功了,是不同学直接写了,叫做remove event listener移出谁呢?Click,诶我问一下这么写行吗?诶,我就写到这儿给window移除click事件能移除吗?来咱试试啊,各位刷新一波,然后呢,让这个DEMO组件啊卸载,同学你看报错了,报什么错误呢?两个arguments什么意思?哎,各位回来吧,就是这个家伙呀,他得接收两个参数,第一个参数是你移除是哪个事件,然后是那个事件所对应的哪一个回调,是吧,各位,哎说老师那明白了,我把这个复制一份,我再往这写一下,你觉得这样对吗?
06:22
啊,你就这样写来,那你看看效果啊,刷新一波,哎呀,不显示了,走各位啥情况,哎呀,你这么写分家了,这是一个函数,这个呢是你移除的时候,你现写的一个函数,哥们儿他俩是两个函数,哎,所以说你最好的动作呀,应该是这样,把这套逻辑给它拿走啊这东西拿走,然后呢,你单独定义一个函数,哎,比如说叫做save point,保存一个点嘛,然后里边写这些,当然event得放在这儿,那这个不要了,不要了,对不?各位I save point,然后在这就这么写了是不?哎,那你移除的时候在这儿,诶是不是可以这么写呀,这不就得了吧?啊写好了,这呢,其实是一个方法,好我们试试啊刷新一波正常获取,诶如果说诶把它卸载掉了,你再点,诶是不是移除了,这样的话比较完善对吧,各位好,那我们把这功能啊就实现了,功能虽然实现了,然后呢,大家。
07:23
再看一下啊,我都写了什么样的代码呢?在这儿瞧着这是什么,这是数据,跟什么功能相关的数据,我要问你这个,那大家肯定得说,哎,老师这是跟求和那个功能相关的数据,那我问你这个呢,哎,跟那个咱们那个鼠标打点啊,这个功能相关的数据对不对,我一点就拿到坐标嘛,这不就鼠标打点嘛啊那这个是什么呢?跟鼠标打点相关的,哎,方法,那这俩是跟鼠标打点这功能相关的,哎,生命周期钩子,那你看着啊各位,我接下来就可以把这红的绿的粉的,就这些东西,你瞧着我都带走。
08:08
老师为啥要带走呢?因为有一个别人写的组件也想用这些东西,说老师啊,那就那样呗,他也想用,你就把这一堆代码你复制粘贴你发给他,对吧,你用微信发给他,然后他一复制粘贴,粘他那里去不就得了吗?各位这不太合适吧啊,那你那不叫复用,你那叫复制粘贴,所以说最好的办法就是我把跟鼠标打点相关的数据方法以及生命周期钩子咋的全都给他弄走啊,那弄走之后我问你各位,那你说这块是不就不能再写了呀?啊,因为我没有point了,那我怎么写,那这块好像也得呀,注掉了是不?哎,朱老师这块你也得删下去,我先不删,因为一会儿我还要用是不好,那接下来怎么办呢?瞧着啊,我在这呢,定义这么一个文件夹叫做hoookx,哎,那就证明我这里边可能要写一堆函数,是不是刚才不说了吗?Ho的本质是函数,那ho克斯呢,一堆函数吗?好创建一个文件,这个文件的名字啊各位,其实你完全可以就小猪配齐点JS也是可以的,没有什么语法上的错误,但是一般来说同学hook函数啊,这个文件都有一个特点,都叫use什么什么哎,就是使用什么什么,哎,那使用什么呢?使用po,使用一个点。
09:33
然后就把你这些东西啊,就刚才在你剪切板里的这些东西,完全给它放在一个函数里,这个函数的名字那你也随便写,那最好也叫做save point,或者叫做什么use point都行啊,来写着走,把你刚才那一堆东西都粘进来走。拿过来了吧,哎,走,我写好注释啊,叫做实现鼠标打点,哎打点加个引号是吧,哎,就说那功能实现鼠标打点的数据好把这一堆呢给它复制走,这叫实现鼠标打点的方法好,或者说跟鼠标打点相关的这个数据吧,嗯,实现鼠标打点相关的数据对吧,因为有可能是很多数据,有可能是很多方法嘛,嗯,那在这儿转过来得方法好,那这呢,走着实现鼠标打点相关的什么呢?叫做钩子周期钩子OK,写完了吧,各位,嗯,那接下来呢。
10:37
接下来你别忘了把这个函数给它暴露出去对不对?各位,也就是说如果这东西不暴露,同学你这个点GS文件啊,执行完了,你没有暴露什么东西给别的程序员,那人家怎么用啊,所以说呢,把这个save point就这玩意儿咋了给他交出去,那当然我这得加一个default对吧?啊,Deff啊,Default,那如果你想写的精简一点,各位其实没有必要这样做,非得起个名,嗯,完在下边再写啊,再呼唤他的名字,没有必要同学直接port default往这一放就得了名啊,拜拜,有没有名其实已经无所谓了,对不对,最后叫什么名,那得看引入的人给他起什么名字对不对,这不就是默认暴露的特点吗?哎,那接下来呢?
11:21
哎,说老师接下来也就这样了呗,这不point,这不这这这这最后同学来你瞧着你得做一件事儿,Return,你得把谁交出去啊,这个point老师为啥我要交出,凭啥我要交出去?行啊,你可以不交出去,就写在这儿啊,OK,行,你就写在这啊,没有返回值好了各位把这个呢,给它关掉,哎,先别关,你现在这个文件会报错的,为什么呢?因为你没有reactive,你也没有引入这个和这个,那所以说同学划到上方,你是不是得来一个import呀?嗯,不想自己写了,因为这边有是不,哎,为啥刚才我没删复制过来,然后呢,把它粘贴过来,有一个我不用谁呢?Re EF,那你看我用到的这三个人是不是都引入了,分别是这儿这儿还有这儿,对不OK了好了各位啊,我这可没写返回值,嗯,然后呢,把它关掉,关掉之后呢,各位我这儿是不是不用写这么多东西了,嗯,给它删掉,好,各位现在来看啊,我的这个DEMO组件来这个同学不行呢,咱也给它删下去,别删了,一会儿我还得重新写啊,先给它注掉。
12:22
就现在来看啊,我的DEMO组件没别的功能,回到这刷新一波,那我DEMO组件的功能就是点这加没别的功能了,然后呢,同学别人写了一个鼠标打点那功能相关的数据方法,生命周期钩子,我这也想用,哎呀,这怎么办呢?是不是就得引入啊,Import引入最好那个名字也是use,什么什么让人明白你这是1HOOK啊,Use point我要使用一个点啊,那我得从哪引入呢?翻出去找到pox下的use point,然后同学重点来了,它是什么数据类型啊,那我得看你这边咋暴露的是不?那这边咋暴露的呢?哎,它是一个函数,那所以说各位在这儿我就敢这么写掉T,你是函数,凭什么我不敢调你呢?啊,那我调完你这个函数之后,你给了我什么呢?哼,你什么也没给我,你给了我的是一个and find。
13:22
是不,哎,所以说在这同学你得把这个有用的东西,也就是这个数据啊,你给人家返回出去,这不point吗?这不point吗?啊,那在这你知道接下来怎么办了,Light po我就敢接了,是不是因为那边给我了呀,这个point OK回到这儿,那接下来呢,各位瞧着吧,把它交给模板,你不得教一下吗?那这块我就可以很轻松的展开了呀。来看一下功能走走走走走对吗?各位觉不觉得这是一种复用呢?我不去关心你里边干嘛了,你爱干嘛干嘛,反正你得给我点儿数据,反正我得交给模板,那模板里面我可就直接用了,那至于说剩下的所有逻辑,包括你这里面,比如说怎么维护的呀,拿的是什么数据啊,什么时候绑,什么时候移除啊,都跟我没关系,那是你写的是不?各位诶就比如说有一天有一程序员啊也开始写东西了,来一个test.view然后呢,开始写自己的东西啊,里边可能写了很多很多的东西,然后呢,突然他发现啊,好像需要一个打点那个功能来先随便写一个啊叫做我是test组件是不?然后在这儿呢,给它起一个名字,名字呢叫做test,那当然了,我得在这个APP里面去使用它一下,那所以说在这呢,引入一个test,然后名字也得换,注册的时候呢,那多注册一个呗,那上边怎么办呀,多用。
14:49
一下它呗,对不对,写一个test OK,这不就可以了吗?那我不想切换它的这个显示和隐藏,那时候可以把这个给它删掉,那中间呢,我给你来一个HR的分隔线,OK,回到页面看效果,刷新我的T组件,诶功能是不是实现了,但我也想要你这些东西啊,什么XY,我也想点击的时候,哎能有效果,各位,那你说是不是就可以这样来回来,各位怎么着,你只要想用它的那些东西,那你只要弱弱的来一个import引入,引入什么呢?哎,叫做use point,然后from是点点杠翻出去,然后是hos下的什么呢?这个use point,那然后怎么办?各位在这你只需要写一个set up,然后你注意我的用词啊,然后呢,你去使用这个hook函数,随后呢,各位在这儿接到一个point,有没有一种感觉,借助了一个hook use point就巧妙的?
15:49
把这个里面所用到这个API,这个这些API都给它组合到了TS的这个组件当中,体没体会出来组合的感觉,我这里面可以写一些配置啊,就是这个里面这个区域我可以写很多的配置,然后我还可以把外部人家写来的一些配置咋的给它放进来,就比如说我自己这儿可以来一个light,一个数据,比如说写一个ref的,比如说叫做Tom,这是我自己的数据,诶那我用了这个东西,外部的数据啊,外部的钩子,外部的方法也都能过来,整个功能点是不是就都过来了啊,那然后在这儿呢,各位你写一个return对吧,如果这名字你模板里用,那你就return出去呗,啊,那当然我这没有引入ref在这个区域是不是,那我就把这个删掉,我就把这个point给他交出去不就可以了吗?是不,哎,想想引入外部的数据方法和钩子,然后在这儿呢自己用,哎,那你说在这儿我就完全也可以写这句话。
16:49
啊,找到咱们的这个DEMO组件,我就把这句话复制回到这里面,粘贴删掉是不可以了,那我有没有point,有那么你的逻辑咋实现的呢?哎呀,我不管,反正是那个人写完的,在这儿不就得了吗?那在这儿刷新一波同学同样的功能实不实现了,当然同学我这儿呢,有一个小小的问题,什么问题,你看我每次鼠标一点哥们儿,你看这玩意儿全是两遍,为啥呢?诶是因为啊各位我用的这个号K呀,它做了一件事儿,他给window身上去绑东西是不是,那你肯定你use一次,那window身上就绑一次嘛,对不?哎,咱只是拿这个功能点呢,给他举一个例子是不?各位,那我说到这儿了,各位,我问你,你觉得这个hook的本质功能是干嘛呀?回头再读读笔记里这句话,把setup函数中所使用到的数据、方法、钩子等等一系列的组合式API都啥是组合式API啊,来吧各位re。
17:49
是不是来看左侧目录吧,Ref reactive,是不?还有这个什么计算属性与监视,什么生命周期同学,都属于组合API的一部分,说白了,你只要在setup里所写的那些API都算组合API,那么组合API这组合在哪体现的呀?各位,就是在hook里面把它淋漓尽致的体现了是不?各位,哎,你自己可以有自己的数据方法勾子呀,那外部也可以带进来一些是不?各位,哎,就一种感觉,复用代码。
18:25
是吧,各位,哎,体会体会来,我们总结一波啊,类似于什么?类似于VIEW2中的mix,哎,那个混合同学觉不觉得有点像view里面,VIEW2里面啊,人家也说了,哎,说如果你写了一堆配置,这个组件那个组件都一样,那来一个mix in吧,啊,那么在这个VIEW3里呢,人说,哎呀,那这回换名字了,不叫mix in,这回呢,叫做组合式API,然后借助hook函数实现的这个组合,是吧?哎,读一下自定义hook的优势就是复用代码,让setup中的逻辑更简单更易懂,也就是说各位啊,你写一个功能的时候,可能用到很多别的功能,那你在这儿你就发现啊,你use use use use了一堆的东西,然后在这呢,只把数据给它交出去就可以了,让你的组件看起来干干净净的,对不?你要真想改逻辑,你去这个use什么什么那个hook里面去改,对不各位哎,所以说把这个呢删掉,那当然我这个hook把各位交出去的东西啊,只是这一个点。
19:25
你可不可以交点别的东西出去,哎,OK,那么这一小节呢,我们听。
我来说两句