00:01
呃,下边呢,咱们讲两个例子啊,然后呢,自定一下后函数后这个东西啊,嗯,是在当中出现的一些新特性。呃,所谓的hook是什么意思呢?就是说在不使用class的情况下,管理里边的状态数据,并且呢,把一些逻辑性思维的东西抽取出来,放在一个可复用的功能函数当中,那咱们在VIEW3当中呢,就是把V3里边的某些啊组合API封装在一个功能函数里边,而且后这个东西它的作用类似于VR当中的微信,就是混入。VR里边的微信呢,咱们可以去看看这个文档啊。其实之前呢,在VR里边都已经讲过啊,但是咱们还是看一下。混入提供了一种非常灵活的方式,然后来分发VIVO组件中可复用的功能,这后边的内容啊,我就不读了,简单的给大家去说一说啊,再回顾一下。呃,也就是说在view里边我们会用到很多组件,每个组件里边呢,可能会用到类似的或者说相同的数据啊,方法呀,计算属性啊,或者说什么监视啊,像这些选项,或者说多个组件用到了相同功能的一些选项,那么这个时候我们可以把这些选项相同的选项放在一个混入或者说混合的这么一个对象当中,然后在各个组件里边直接引入,然后就可以直接使用了啊。
01:13
那现在在在咱们V3当中,咱们干嘛呢?啊做个例子,通过这个例子呢,然后去封装一个自定义的后函数。那我现在找到Vs code,嗯,把之前咱们讲的这个生命周期的东西呢,把它保存一下啊。新建这么一个文件夹,那就是零九呗。来一个生命周期,好回车把这里边儿这些文件啊复制一份。然后呢,我再把这些没有用的东西给它删掉。好在app.vi当中,那这些代码呢,我就不要了啊,直接来一个VV3。把一会搞定。那上面给他来一个标题吧,HR啊,这个是属于自定义函数操作好。
02:01
啊简单一点,咱们来一个需求,那需求一啊,那咱们做什么事情呢?无非就是什么呢?呃,用户在页面中点击页面啊,然后把点击的位置的横纵坐标。收集起来。嗯,收集起来并展示出来啊好,那按照这个情况来看的话,首先我们在页面里边是不是要展示这个横纵坐标吧,那我这个位置的话,就给他来一个HR。然后横坐标我就用X来代替。逗号再来一个纵坐标,我用Y代替。那怎么做呢?Set up回车。Return,再来一个对象,里边应该有个X,它应该有个Y,那我需要这两个表达式啊,所以说我们先定义出来啊,直接用。Ref的方式里边,我就先给它一个默认值负1CO的,再来一个Y,等于ref也给它一个负一啊,那这样呢,我就暴露出去了。
03:08
那下边呢,我们要做的是在页面里边去点击是吧,哎,我们先保存一下,先看看有没有这个效果。刷新。很明显这块有个S和Y,在页面里边点击,应该有个点击事件,点击的时候呢,把当前鼠标针对于页面吧,它的左上角的横纵坐标拿到,嗯,那怎么做呢?好。这个位置啊,我们这样做,呃,应该添加一个点击事件。呃,点击事件肯定是页面页面已经加载完毕了,然后呢,再进行点击的操作,那这样一分机呢,肯定应该有一个页面加载完毕的。呃,生命周期啊。那这个可以认为是页面加载加载完毕的生命周期,好,那我就来一个什么呢,On mount。
04:00
Mounted,大家得需要引入啊。好页面加载完毕之后怎么办呢?做什么事情呢?哎,注意啊,它应该是一个函数,里边应该放入一个回调啊,不再试斜项了,那怎么做呢?应该找到这个window吧,给它来一个event呢,来一个点击事件,后边c handler click handler应该有这么一个函数,这个函数是点击事件的回调函数。好,那我就在上面写吧,啊,这个是点击事件的回调函数。来一个方式。当然啊,我们不这么写也行,其实这么做也可以。等于就来一个回调了,那里边得需要一个什么event事件参数对象,那然后呢,再把x.Y6,它就应该等于event点里边应该有个配置X的属性啊X点,呃下边应该是y.Y6了,等于event点配置Y,嗯,搞定啊,那现在注意啊,这块呢,我们做的再稍微完整一点,那将来这个页面或者说这个组件挂掉了,我们应该把这个事件给它干掉啊,所以说呃,应该再有一个这个页面卸载前啊,页面卸载或者说组件卸载前。
05:17
的这个生命周期啊,当然是属于一个组合API了啊,上面也是。好,那下边呢,咱们应该用到一个on before on mount。给他来一个回调啊,当然啊,上边已经引入进来了啊。好,那怎么把这个事件干掉呢?那就是通过window.remove event listener,然后来一个click事件,后边再把这个毁掉拿过来啊。啊,这样格式化保存一下,我们来看一下效果如何。啊,一刷新。点一下点一下点一下点一下点一下OK是没有问题的啊好,但是呢。我们现在写的这个代码,它没有复用性啊,在这写完之后用了一次就完事了,一次性了。
06:04
我们要做什么?我们要把它变成一个啊后函数,这样的复用性会更高,那怎么做呢?嗯,现在只需要在这边来一个文件夹呗。Hos吧,啊,里边新建一个文件啊,这个文件叫柚子。Mouse po position ts,一般情况函数都是use开头啊,不是user,是use。改一下名好,那在这里边就直接来一个export default,扔出去一个函数就可以了。啊,然后我们再把这边的代码复制过来。从这到这儿拿过来。放到这里边来呗,最终我应该向外边暴露出去,一个对象有两个值嘛,一个是X,一个是Y呗,啊但是这边用到了什么呀,V3当中的组合API是不是把它放到这个呃函数当中,而且这个函数呢,变成函数之后复用性更高了,那现在要用它没有。
07:00
那我们就把它引入进来呗。银行代码直接复制。拿过来。然后这个东西我就不用了,删掉。呃,这边呢,这些东西我也不要了。当然我要用到这个函数,我需要引入啊,先把它格式化一下啊,保存一下啊,当然这个时候保存,大家可以看到这块出现了红色的波浪线啊,它说参数event隐是具有any类型,说你没有告诉我这个event到底是什么类型啊,它是属于鼠标事件类型啊,所以说应该有个Mo event啊,这样就好了啊,而且格化一下保存。那现在我的这个组件里边要用到这个数据啊,那就引入呗,来一个use mouse po position from。点杠po下边的这个TS文件好引进来之后呢,那我可以直接从里边解构出来XY啊,当然这两个已经是属于啊非小式的数据了啊,那直接就是use mouse position1定要用,这不就可以了吗?啊一保存我们来看看效果。
08:07
刷新一下。点一下点一下点一下点一下啊,这是封装的一个简单的货函数啊。好,那这块呢,咱们先到这儿下一会儿一会儿呢,咱们再去讲另外一个需求啊。
我来说两句