00:00
呃,在这之前呢,咱们把setup它基本的使用方式呢已经说过了,现在呢,我们再来聊一聊setup它的细节问题。所以说有些问题啊,咱们就是先用,用熟了之后呢,咱们再去讲它细节的问题,这样呢,在讲的时候呢,也容易,而且大家呢,理解起来会更加方便啊。Setup执行的时机这一点呢,咱们现在不看它啊,咱们直接通过代码给大家去演示一下啊。那么我把之前所写的这些代码啊,都复制一份,然后放到这个里边来做个保存。之后呢,关掉这个代码,咱们之前也都写过好了,那我在这个src当中新建一个目录啊,我先准备一些。工作啊。Coms components里边新建一个文件啊,叫child。点。我来跟大家说啊,由于这个setup它的这个细节问题呢比较多,所以说呢,我在这里边把咱们要讲的这个基本代码的结构呢,都搭建出来啊好,APP点当中这些代码我们也不要了,直接来个VV3。
01:09
那再把这个代码呢,或者说复制一份,或者说我直接这么写啊。跑一回车啊,也搞定了,当然这个名字呢,我们得需要改一下啊。那这样呢,大家就现在可以看到我当前的这个src里边有一个APP的这个负极组件,还有一个comp目录里边有个child,这个是子集组件是吧?那我估计啊,有同学在看到我这个,呃,写代码的时候来个VV3是吧,这玩意是啥?这个是代码块啊,那怎么去设计的呢?是这样的,找到文件。找到首选项里边有一个用户片段,看到了吧,我们可以在里边去搜view.js文件啊,或者说直接去点也行。进来之后呢,咱们从上到下啊,这个没有什么特殊的。这里边儿写的就是代码,多少代码。怎么做啊,直接看这块儿就行了,你把这个东西到时候一复制,复制一份呢,然后呢,在下边直接把你。
02:04
呃,先把这个快捷键给它设置上,我的快捷键就是VV3啊,所以说p fixx当中放的是一个快捷键。然后包当中。把你要按快捷键最终产生的所有的代码放到包里里边,通过字符串的方式给它包裹起来,该换行换行,该空格空格,该转移转移啊这就可以了,然后呢,改完之后就保存,保存之后呢,在我们当前这个组件当中是吧,VV3。啊,一会串那这个代码就有了啊,当然这个div这个标签可以不要,因为在VIEW3的组件当中不写跟标签也是可以的啊,这我都删掉的,那我先写点基本的代码啊,比如说HR这个是APP负极组件。好,然后找到叉叉里边呢,我也是写个HR诶。H2,然后写上一个child子集组件啊。啊,格式化一下保存。这边呢,也是我也格式化一下,然后做一个保存操作啊,好啊,这边你稍微改一下,这是child的嘛,是不是保存啊,好,那我在这个负极组件里边要用到子集组件,我把这些基本代码写完,写完之后呢,我们再去详细的去讲啊,Setup到底是呃,里边有哪些细节的问题。
03:17
嗯,那好吧,那我现在要在APP组件里边用到child的组件了啊,第一步,那这个时候就是引入啊子集组件child,来一个child from。点杠components下边的child加上一个点view啊,这样不会报错,好然后呢,下边应该是注册组件了,那就来一个com。里边再来一个child,这就搞定了啊,但是我一保存的时候,大家可能会发现啊,他可能会报了一个错是吧,然后呢,当然我们来这边诶大家看也是报错是吧,这没关系啊,他说什么呢?咱们这个差的组件你已经引入进来了,也已经注册了,但是你从来没有用过呀,是吧,那你把我弄进来干嘛呀是吧。
04:05
所以呢,啊,这个也好办,我们就直接在这来一个HR标签吧,那我下边写上一对尖括号child,然后呢一保存。之后这边呢,我再一刷新,大家可以看到APP负极组件里边包含了一个child的子集组件,这就搞定了啊。呃,不费什么事,很简单。这个组件在用的时候呢,跟V2当中是一样的,那先干嘛呀,先引入是吧,然后再注册,最终呢,再去使用一下,就这么简单,跟结婚是一样的,先认识一下是吧。之后呢,再去领个证注册一下之后呢,就可以用了啊,就是这么回事儿,好,我们现在要说的第一个问题是什么呢?就是关于咱们这个setup啊。那我这样,嗯,在这。Setup,我先把这个函数写上,然后再来一个return,再来一个对象里面写个MSG,那我要用到这个数据怎么办呢?没有先定义出来,我用ref的方式啊,那这个里边我就写上。
05:03
简单一点吧,What啊,油。啊油浓上来,嗯,好搞定,那我这个ref报错了,是因为我上面没有引入是吧,逗号引入一下这就可以了啊。那我这边一开始先来了一个什么呢?呃,应该是定义一个re ref类型的这个,呃,基本数据啊。八。那我上边当年这个APP组件里边,想要把它写出来,这也简单啊,直接写个MSG括号括号括号,然后MG。保存一下。刷新,嗯,这里边儿这数据是有的是吧,我希望这个数据可以在子集组件里边去用,怎么办呢?或者说我希望在负极组件里边点击按钮可以更新这个数据,怎么办呢?啊,我们把这些基本代码都写上啊,先来一个button吧。嗯,这个是就是更新数据。来一个简单一点,MSG加等于。
06:02
等等。好,然后这个数据呢,要在子集组件里边去用。那我就在这个位置写上一个问号,MSG等于MSG,这就可以了。主机组件里边要想用这个数据,得先通过pros的方式,Props接收一下传递过来的MSG数据。之后呢,在上边我也是啊,来一个H3。嗯。让MSG现在我基本的代码都差不多已经搞定了,我们来看一下这个界面刷新,我一点击啊,没有问题,这是负极组件是吧?呃,而且我点击按钮的时候,负极组件当中的MSG属性数据变化了,子集组件当中的这个数据呢,也随着变化。好,现在我们来看setup当中的第一个问题啊,比如说他说在before create之前执行,此时组建对象还没有创建呢,是吗?我怎么不知道,那怎么办?来测一把呗,那比如说我在里里边去写啊,关于setup的这个细节问题。
07:01
那首先我写上一个setup括号,括号里边呢,通常情况下我们都会返回一个对象,这个对象当中的数据在我模板里边可以直接使用setup setup中一般都是返回一个对象,那么对象中的属性和方法都可以。在HTML模板直接使用,这一点大家刚才也都看到了啊。那我们现在来做一件这样的事情,我在里边呢,cancel.log一句话setup执行了啊,这个就够了,然后呢,为了证明他是不是在我的这个before create。Be before createre生命周期回调之前执行,那么我们就得需要自己去写代码测试了。Be before c。执行了啊,加上一个逗号啊,这个B方是什么?是数据初始化的生命周期回调。
08:10
诶。真的是这样吗?我们来测一把就知道了啊。找到这儿,然后我们刷新一下。好,现在我们可以看到setup执行了,然后before也执行了,而且setup是在之前执行了。所以说这个细节问题啊。第一个问题,Setup是在什么呢?Be before c,生命周期回调之前就执行了是吧,而且几次啊?就执行一次吧,就执行一次啊好,那由此可以推断出来什么问题呢?注意啊,Before create是数据出发之前,咱们以前在view当中呢。经常会用到这个。他是谁呀,它代表的是界面。
09:00
重新或者说界面渲染完毕。是吧,啊,那大家想我界面都已经渲染完毕了,那我这个组件肯定是有了呗,也已经看到了呗,是不是,可是在他之前。还有个。是吧,还有before month。那么create这个回调在执行的时候说明当前组件创建了吗?没有啊。他在执行的时候,或者说他在执行之前。在这个before执行之前,咱们的组件还没有创建。也就是说,Setup。这个函数里边代码在执行的时候。我当前这个组件有没有呢,还没有。啊,由此可以推断出来啊。由此可以推断出,推。推断出什么问题,就是setup在执行的时候。的时候怎么的,当前的组件还没有创建出来,是不是如果说我当前的这个组件还没有创建出来。
10:03
那么也就意味着。也就意味着什么呀。组件实例对象this根本就不能用。对不对。那么我们可以测一下,比如说我在setup当中,在这个位置,我逗号写个this。保存一下。嗯,然后呢,我们来看一下这个效果。哦,Mounted啊,注意我mounted写了之后,但是没有用啊,我把它干掉它。保存一下。然后我们再刷新一下。大家来看一下setup执行的。This是on,对不对?哎,果然不能用,This是UN find。说明那就说明什么问题,就不能就能通过这个this再去。调用什么date呀,Computed呀。
11:02
是吧,Methods中的相关内容了,哎。那么我们这个一行一一两行代码,然后推断出来一些东西之后呢,做了一个总结,我们再来看啊。他说before create之前执行一次,此时组件对象没有创建的,果然没有啊。然后this是find,不能通过this来访问date method及prop当中的数据了,那这个props我没写是吧?把它加上。哎,放到这来。哎,保存一下,还有吗?他说,其实所有的composition API相关回调函数中也都不可以使用这句话呢,我就把它拿过来吧。因为暂时咱们也没有见到那么多的什么呀,这个组合API啊,后边咱们就见到了啊,所以说这句话咱们暂时先放在这儿。好,那这个是setup,它的执行时机及这个this的问题,咱们就说完了啊,那后边还有setup的返回值,那一会儿咱们再接着往后去讲。
我来说两句