00:00
好嘞,各位,从这一小节开始呢,咱们来优化一下代码,为了让大家明显的感觉出来,这个代码优化之后啊,挺好的,那接下来呢,我再加一个需求,就是在这儿呢,再写一段文字,文字的内容是我在上硅谷学习前端,上硅谷这个学校名,前端这个学科名,我都给它存在VX里面,然后呢,读出来做展示来吧,写写,回到代码里,找到viewx里的配置啊,找到配置数据这一块,再给它加两组数据啊,第一组数据呢,是学校直接写叫做上硅谷,好,再来一个是学科用这词啊,Subject直接写叫做前端。数据呢,配置好了啊,不用太多,各位三个就足以说明问题,把这个呢关掉,回到组件里面,咱写写啊,还是H3,但是里边的内容啊得改一改,删掉,我再叉叉叉啊,来个逗号学习叉叉叉叉叉叉呢,你得替换来把这一堆呢给它复制一下,往这一粘贴,别是sum了,是学校在这儿呢一粘。
01:00
贴不是sum了,是subject学科,OK,这不就写完了吗?回到页面看一下效果啊,刷新一波,我在上硅谷学习前端,但这个时候各位功能实现了是吧?你回头看看你的代码来在这儿观察哪儿呢?观察这儿,这个位置,这个位置,还有这两个位置同学你发没发现啊?当我要使用view X里面很多数据的时候,我一直在写这段代码,Dollar state Dollar state,也就是说这个东西我一遍一遍的在写,你说是不不好,哎,我的终极目标是在这直接写sum,这直接写big sum,这直接写subject,这呢,直接写school。哎,那你说这问题得怎么办呀?很简单,各位我是不是可以借助计算属性啊,直接在这来一个comput不就解决了吗?啊,那里面给它配置一下吧,各位来小逗号补上,你是不是想直接用sum,那就写sum嘛,那sum哪来呢?哎,直接写呗,Written written什么,把这一堆给它复制过来,但是你别忘了前边加。
02:00
This,这不就搞定了吗?啊那有同学说老师你刚才不是说这计算属性写完了,只能我这个自己这个组件用吗?那目前就是我自己用啊对吧,别人也不用啊说说别人用怎么办?别人用别人再去写计算属性呗,对吧?你比如说别人还不想叫sum呢,别人还想叫和呢,对不?他自己写去呗,啊撤回来啊在这儿用计算属性去解决,那在这我就可以直接诶删掉萨对不啊,那同理,这个这个这个复制一份是不是都可以在这写呀?啊在这儿呢,来一个逗号,把它们三个呢带过来,都是计算属性的简写形式,直接写一个函数来小逗号配好big sum有点特殊,各位,它不是从那个state里面取出来的,而是从get里面取出来的,对不对?好,把这个呢给它剪切走,给它放在这儿,写上一个return this点好就来了啊,然后big sum呢,直接给它放在这就可以了啊,那school这块复制快点写,OK,然后在这儿呢,再把它复制过来。
03:00
对吧,哎,这个学科好,那在这儿呢,就能直接写了删掉。这呢也给它删掉,OK,这不就行了吗?同学,记不记得view的风格指南里面说了一句话,叫做简单的模板语法,不要把这个差值语法写的过长,对不对?什么什么点什么什么点儿什么什么点儿啊,不太好,OK,这多简单呀,来到这儿刷新一波功能是不是同样可以实现呀?嗯,但是回头你再琢磨一下这代码,同学,诶,你觉不觉得这些东西一遍一遍写也挺烦的呀,而且我调整一下顺序啊,各位,我把这big sum呀给它往下靠,你知道为啥我要往下靠吗?你看看这,你看看这儿,你看看这儿,人家是不是都从那个SP里面取数据,而这呢,是不是从gets里面取数据?所以说这样,同学我让这个big sum呀,让它往下靠,哎,给它放在这儿,我们呢,先把这三个东西给它琢磨琢磨,哎,同学觉不觉得啊,我整个粉色框里的内容其实形式很固定,你看每一个人呢,都得说一下自己那个计算属性叫什么名字,然后每一个人呢,都得说一下自己其实读取的是state里的哪个。
04:08
数据你看这会儿也是我的计算属性名叫school,哎,说白了就是算出来那属性叫什么,名叫school啊,那你从读的呀,State里的school是不?那这儿呢,Subject从哪读的呀?State里的subject,哎,同学,你觉不觉得剩下的就这些部分的代码都是一样的呀?诶,那你说view X的设计者是不是也会考虑到这儿呢?能不能给我们什么方法批量的生成粉色框里一个代码呢?就比如说各位啊,你自己可以写一个函数,函数的名字呢,叫做test这个函数啊,可厉害了呢,你只要把这sum,哎,就这个交给test函数,Test函数就能帮你生成橙色框里的这些代码,同学,这好像不是一个什么难事儿,对吧?你把这名给我,那计算属性名我帮你生成,那从这里边读取谁我也就知道了,是不?各位哎,是不是可以完全自己去写这么一个函数去办到这件事了,说白了,同学写一个函数帮你生成代码吗?啊,那么比X的设计者呀,也考虑到这儿了啊。
05:08
他已经帮我们写好了这个所谓的test函数啊,那这样同学我调整一下啊,为了能让你一会儿看那个函数的时候看的更明白,各位你瞧着我这儿不想叫萨了,我就想叫her,对,就这么low啊,在这儿呢,不想叫school了,就是薛学肖笑,在这儿不想叫做subject了,就是薛学科科学科,哎,同学,这块我问你能改吗?嗯,这块你不能改,大兄弟,你的state里面存着的是不是就是some school subject,那你怎么能在这轻易的改掉呢?啊,但是这些东西我可以改,你说为啥这些东西由我自己决定啊,我自己写的计算属性吗?我这一改和学校学科可以啊,我这是什么核啊啊,那我这呢学校啊,那我这呢学科啊,搞定了呗,回到页面刷新一波同学是不是正常都可以啊啊加什么的也行啊,好了,回来那同学说说吧,怎么能批量的生成这个粉色框里的代码呢?你觉得你应该把。
06:08
怎么提供给人家呢?同学,咱就拿一个举例子啊,咱就说这个来把粉色框给的缩小,咱就说这盒各位,因为你看都是return this.dollar到点state,点什么什么什么对不对?好,就假设说啊,同学有这么一个绿色的加工器啊,你得把什么东西告诉人家,这个加工器才能帮你生成这个粉色的代码呢?那就得把变化的东西告诉人家,你觉得呢,各位,你像固定的这些东西,那不是谁传他都写这段代码了对不?各位,哎,有点像咱们那个坐火车或者坐飞机,我不管你是什么身份,各位你得买票对吧,然后你得拿着这个票,你再登记再上火车是不?各位,哎,所以说同学我觉得是这样,你得把这个东西告诉人家,就是你那个计算属性啊,你到底想让它叫什么名,还有就是你把这个告诉人家,就是你读的时候去state里面你读谁,这两个东西一旦都握在手里了,是不是能生成粉色框的代码,那同理,各位你想一想,如果是对于他来说,你把这个计算属性名学科告诉人家了,你再把这个subject告诉人家了,那你觉不觉得绿色框的这个东西也能帮你生成这段代码,是不把两个变化的东西,把两个每个人都不一样的东西告诉人家,这不就得了吗?是吧?各位啊,说老师来吧,快告诉我吧,那个绿色框叫什么名?同学,绿色框你得引入,并且他在谁身上呢?注意观察啊,同学,这是一切的根基,我们接下。
07:31
来会讲很多很多帮我们生成代码的函数,那么这是第一个,你一定要好好的听着啊,来引入VX,从X身上啊,引入这么一个人,各位他的名字呢,叫做SP map,什么意思呀?说老师地图动词呢,其实它有映射的意思啊,老师那这state呢,那不用我多说了,State啊指的就是它呗,是不?哎说老师那什么叫映射状态,这啥意思呢?同学,就这东西就是我刚才说的那绿色框,哎,对,就这个东西就能帮你生成整个这段粉色框的代码啊,要求你把这个这个告诉人家啊,你得把这个这个告诉人家,好来咱试试啊各位,那这样各位我先不把这些东西删掉,咱们慢慢来,我就想看看这个map state是怎么工作的啊,把它复制一份,然后呢,各位UT我折叠起来,我找到mount啊这个里边呢,我给这东西给它删掉啊,然后我这样X等于我让这个map state函数啊,先干一下活,然后随后呢,我输出这个X,让大家伙看看那X到底是个什么东西,是吧,各位来吧。
08:43
Map state就是那个绿色盒子啊,他要干活了,根据我们刚才的分析,各位你得把什么东西告诉人家,计算属性的名,还有什么呢?去state里面找谁对吧?也就是说和和这个some是一组,学校和这个school啊是一组学科和这个subject是一组,你说对吧?好,各位他在这儿呢,要传入一个对象啊,慢慢来,首先这个对象里面呢,肯定得写KY6对不对,先写第一组KY6啊,我提到组这个概念了,直接把这盒拿过来,然后告诉人家说你去那state里面找谁?告诉人家找some。
09:19
啊,朱老师这就写完了呗,你这么写就错了,各位你琢磨琢磨啊,这个和啊,你可以直接写,因为我们知道一个对象里的K呀,无论你怎么写,其实本质都是字符串,说的再直白点,这和啊,其实我用完整写法啊,应该这么写,你说对不,但是同学我们往往不这么写,因为太麻烦了,我们都直接写这个he,这个和表面上好像这是一个变量似的,其实大家知道这东西运行的时候都包了一个引号是吧?哎,那在这儿呢,我就用精简的写法,但这就不对了,你说对吗?各位你这么写,人家会出发寻找sum这个变量的,你哪有sum这个变量啊,说老师,那我不是想把这名告诉人家吗?告诉人家名啊,为什么直接写呀,是不是这么写呀,体会体会。
10:04
同学,你告诉人家的是名,说白了这俩玩意全都是啥呀,全都是字符串,只不过前边咱们能用简写形式,后边你用不了是不?各位哪有这种简写形式,说你写个sum,我不找变量,我直接把它转成sum字符串,不可能的是吧?各位,哎,所以说在这呢,不墨迹了,加个单引号,那同理,同学第二组是谁?学校,哎,然后什么呢?School引号是吧?哎,然后这是什么呢?学科走,然后只是什么呢?这个subject把它复制,然后就不要再写了,同学不要再写这个big sum了,为啥呢?他不是从state里面取数据,人家这三个是从state里面取,它呢,他从gets里面取。说老师,那我写上能怎么的,同学,你看这名,你看这名map state,人家只能帮你生成带有state的这些代码,不能帮你生成带有gets这个代码,对不?这个一会咱再说啊,在这呢,我给你做个分隔,各位啊,这个分割线下边不要考虑了,只考虑这三个,OK,好,来吧,看看效果,看看这X是什么啊来同学,那咱们先分析一下,你想让这X是什么呢?反正我的目标就是这样,我把和告诉你了,我把萨告诉你了,你根据这一组配置,哎,慢慢来,你根据粉色的这一组配置,你得给我生成粉色的这个代码,你根据绿色的这一组,你得给我生成绿色的代码,那同理,你得根据这个橙色的这一组,给我生成橙色的这堆代码,你说对吧,各位来画的精准一点啊,在这呢,这是绿色的,一直到这儿啊完了这儿呢,是那个橙色的,你说是不?各位啊,这意思不来咱看看啊,看这X到底是什么,我们期待的可是一个和的函数,学校的函数学科的函数,对不对?好保存回到这呢,我们刷。
11:44
进一波啊走各位你看看是不是刚好就是你想要的呀,来同学你看和啥,哎呀函数学校呢,哎呀函数,哎呀学科呢有函数,哎,你说老师我想打开看看,那你看吧,还说老师不对不对不对,你看这个盒的名字叫state,这也叫map的state,这怎么还多了个ED state,老师不对,那是函数不对呀,啊说老师这名字就不对,同学这个名字其实无关紧要,我就问你啊,我写这个的时候,我写一个和,完了我写一个冒号,它是一个函数,同学,啥意思?这不就是里边的一个属性名叫和,啊属性值呢,是一个函数,那所以说它可以称之为一个方法,那同学我就问你啊,我这块我写了老长老长的函数名啊,当然不能写分号是吧?哎,我写了很长,同学我问你,就这个名字对我整个用这个和有什么影响吗?就这名字一点影响也没有对吧,而且这名字呢,它毫无意义,所以说一般来说我们给它删掉,所以说这儿呢,各位你不用去纠结来,回到这儿,人家叫map。
12:44
State就叫呗,对吧,反正这个函数呢,咱们能用就得了,那你看看和是个函数,学科函数,学校函数,我问一下是不正是你想要的这一些啊,那你说接下来怎么办呀,怎么办呀?哎,各位就这一堆东西呀,都给它注掉啊,随后呢,在上边我给你补一个注释,叫做靠程序员自己亲自去写计算属性,哪几个计算属性啊,来吧和啊还有什么呢?来这个学校,那在这儿我就不墨迹了,不写这些东西了,是不往下一看,谁不知道写的计算属性是啥呀?啊,这是靠程序员自己亲自去写,那接下来呢,各位来吧,让谁登场啊,Map state把这一堆东西给它复制,然后呢,放在这儿,哎,然后他就报错了,这什么情况呢?
13:33
你捋顺一下啊,各位回到这儿你注意观察,你看它输出的那个东西是什么,Map state的工作结果是什么,各位注意看啊,说老师这和函数,我说整体,整体是一个对象,那也就意味着你现在就属于在一个对象里面,因为comp本身就是对象了啊,在一个对象里面直接这么写,那你这不开国际玩笑的吗?是吧?各位,咱就拿最基础的这个GS来说,来,我随便给你写一个demo.html,随便写点固定的结构,写一段脚本,来各位同学,我写一个OBJ等于一个对象,你在对象里面可以这么写,你写一个A是一,你可以写一个B呢是二,这都没毛病,同学,你能这么写吗?来,我问你对象里边直接这么写,那肯定是要报错的呀,是不?哎,好了,回来,那你知道这块这么写好像不对,那撤回来这么写不对,那得怎么写呢。
14:25
来同学,我直接写一下,看你ES6语法过不过关,前边我加个点点点,最后我补一个逗号它就对了。为什么呀?那就看你明不明白,在一个对象里面写点点点,然后一个对象是啥意思,那回到这儿又看你基本功了,来吧各位,在这儿呢,我给你来一个let OB bj2 OBBJ2里呢,有X是一啊,有Y呢是二,这么的吧,Y是200 X呢是100,那我问你各位,我这么写是啥意思啊,直接在这来一个点点点OBBJ2同学啥意思呀?啊,或者说我把这OBJ2啊给你放在这后边,给你来一个逗号啊,这啥意思呀?把OBJ2里的每一组KY6都展开放入这个OBJ里面,所以说你接下来输出这个OBJ的时候啊,你所看到的样子,当然就是有A有B有X有Y对吧?各位你看有A有B有X有Y,并且是不是放在这儿的,这是前边的A,后边的B是吧,各位这回不就明白了吗?那所以说同学来到这你就知道为什么这么写,对了,点点点map state,我就问你绿色这一堆是啥?绿色这一堆是什么啊?不用问别人,自己看见是什么,是一个对。
15:33
啊,那对象用点点点了,是不是把这个和学校学科依次取出,然后放在这个位置了,就相当于你写了粉色框里这一堆代码是不?各位,好了,保存一下回来刷新,其实已经出效果了,上硅谷学习前端是不?各位,这多简单呢,学不觉得这个map state,人家这个名字起的实至名归,映射状态说白了就是帮你生成代码是不?各位,OK,这不就写完了吗?啊,但值得你注意的一个点是什么呢?各位啊,就是我不借助它,我亲自去写啊,这个时候你回到这边看,你借助V开发者工具去看的时候吧,其实你能够明显的去发现来看组建这个视图,找到count同学,你就会发现这个data n呢,是我收集的用户所输入的这个数字,是不是啊,那这儿呢,你看这不都是计算属性嘛,什么学科学校和什么贝萨啥的,对不对啊,那回到这儿,你看着各位,当我自己不去写这些计算属性,我。
16:33
借助map state去生成计算属性的时候,同学其实它也是计算属性,但是view的开发者工具啊,就比较机智了,他发现呀。刚才这么写是那程序员啊,不怕辛苦自己写的和学校学科啊,那我就都给你算什么呢?来最后再看一眼,我就都给你算啊,Computed来刷新一波,走,你看都算comp computed都在这里呢,给你做一个呈现,但如果说各位哎懒借助这个去生成,那你发现啊,View的这个开发者工具呢,也认可你的计算属性,同学你说他要不认可你通过map state生成的那些东西,他要不认可的话,这能出现上硅谷前端吗?是不?哎,你点击一下同学这就挺有意思的啊,你看他说啥。
17:15
V的绑定,其实同学你心知肚明啊,就这一堆东西其实也隶属于什么计算属性,为啥V把这三个东西拎出来了呀?咱说V开发者工具比较机智,他在告诉你哥们儿,你这个可是投机取巧出来的,你这个可是借助别人给你生成的,虽然你隶属于计算属性,但是我得告诉你,你这个其实是有X那个map state给你生成的一个绑定数据,哎,就这意思啊,好了,回来朱老师,那就说完了呗,Map state传入一个对象呗。同学,这只是第一种写法啊,来写好了,叫做借助map state生成计算属性,然后呢,逗号从什么中从state中读取数据?同学,为啥我加上这句话,因为想让你明白map啥啥啥就是从啥啥啥取东西,Map state当然是从state中读取数据,然后这呢,我给你写一个括号,叫做对象写法,诶同学还有一个更为经简的写法,就是数组写法。
18:15
啊,那怎么玩呢?来瞧着各位,接下来啊,改了,哎,把这块住掉,不想让它是和了,还是老老实实叫some,这儿呢,不想让它是学校了,老老实实是school,这呢不想是学科,老老实实是subject,那就意味着上边这块咋的some啊,那这块怎么的subject学校对吧?各位,哎,这是我不不怕辛苦自己写对不对?哎来到这儿刷新一波,你看能出来吧,好,各位回来,那你说要是这种情况的话,你还想借助这个去写,那你就得怎么写呀,各位来,我把这个呢复制一行,不破坏它啊,然后在这儿呢敲个回车,对象写法在39和40行讲完了,不去破坏它,保留。接下来说这目前同学,我这不叫和的,叫sum啊,计算属性叫sum,从state里读的是sum,计算属性叫school,读的是school,计算属性是subject,那我读的就是subject。那请问接下。
19:15
哎,我得怎么办?这块别是her some,这块别是学校school,这块别是学科subject OK,回头刷新看效果是不可以,哎,那这个时候同学你观察一下第42行sum some school school,这个时候肯定有人告诉我,老师用对象的简写形式啊,就这样不要了,直接这么写,同学你说对吗?我后边那俩我都不改,你这么写不对,为什么?你自己一定要明白同学你这么写的含义,最终人家转成了sum冒号sum,然后人家呢,进而去读取sum这个变量,对不?那你不就报错了吗?你哪有sum这个变量啊,你一定要注意啊,各位还是回到这个基础的这个问题啊,就比如说什么呢?来各位在这呢,我给你写这么一段代码吧,嗯,就比如说这有一个AA呢,是100,然后呢,我想定义一个对象,对象里边呢,有一个属性啊,是A完了A的值呢,是读取A这个变量出来的,各位,那你说就第十行这个代码。
20:17
我才可以简写为这个写法,就是A,你说对不?也就是说十和11行是等价的啊,那这我都不验证了,同学大家肯定都知道是不是是等价的,但是如果说我的要求是这样的,那个对象里面啊,有一个属性叫A,但是这个值是引号的字符串A各位也就是根本没用这个变量,那你说我能这么写吗?那肯定是不行的呀,所以说同学就直接说吧,第十行这种写法,从这个GS语法的层面上来说,它没有啥简写方式,没有啥简写方式啊,但是在这儿同学咱有这么一个简写方式,你瞧着既然school school subject subject,那莫不如啊,我就这样做了,删掉这儿啊,别写对象,写啥呢?写一数组,就直接把你的这个sum给它写进去,然后同理再把这个school啊给它写进去,同理呢,再把这个subject给它写进去,同学这么写啥意思呢,就是这个sum有两个用途,你在这数组里面写了一个sum,人家。
21:17
的意思说,哎,哥们儿,我明白了,那你生成那个计算属性的名字呀,想叫sum,那其实啊,你是从state里的这个sum属性中再读取数据,也就是说同学一个SUM2种用途明白不好了,写完了在这儿刷新一波,同学你自己感受一下啊,你说一行代码就写完了,总比你自己要写一堆强吧,是不?各位哎,把这个注释呢,给它复制过来,叫做借助map state生成计算属性,从state中读取数据叫做数组写法是不?哎,那我考大家一下啊,看你真没真懂,你说我这么写行不行啊,我这写和。我这写学校,哎,我这儿呢写学科,你说行吗?啊,那你分析呗,一个核,两个用途,首先呢,作为计算属性啊在这儿行,我用了,其次呢,去state中找这个和,我就问你一下,State中有和吗?没有,它只有sum是吧?各位,哎,所以说同学一定要想好,如果你想用这个数组,这个写法,那就意味着生成的计算属性名和你真正读取出来的名得是什么呀,一致的才可以。OK,好了,就说完了啊,讲了什么呢?Map state,同学,Map state如果你听明白了啊,还有一个东西啊,同学,你看这个big Sam是从哪取的?Gets你就猜也能猜出来了,还得有一个他的兄弟叫做map gets对吧?各位啊,那来吧,你说这会儿怎么写来这条线呢?给你画的长一点啊,是两个部分来走着各位小灰车,那你说这这是什么呀?不用自己写这个big萨了。
22:56
同理,你告诉我得怎么写点点点map gets,第一种写法,传数组,告诉人家那东西叫big sum啊,读取gets里的谁呢?Big sum,我问你这么写行不行啊,可以呀,哎,回到这刷新一波,你看这不零吗?走走走走,没问题吧,回来各位,那除了有这种写法big sum big sum他俩同名了,那你说当然就是走着这边写一个注释,那把这一堆东西呢给它删掉,直接写一个数组,数组里面写一个big sum,一个big sum2个用途对不对啊,一个是生成的这个计算属性,这个big萨,还有就是从gets里面读取什么内容,因为人家叫map gets,对不对?好了,保存回来刷新一波各位没啥毛病吧,可以吧,来,把注释呢给它补全了,把这一堆呢给它复制过来,走,这叫借助,不是map state,是map gets,生成计算属性,从gets中读取数据,什么写法呢?对象写法,然后把这一堆呢给它复制,往这再一放。
23:54
这叫做哎,数组写法是不好了,一定得说明白从哪读取数据是不?哎,所以说以后呢,如果我们真想读取数据的时候,同学不用自己写了一堆,直接map map映射过来是不是就可以了,而且在这你看多方便呀,是吧,Some make some,这不就可了吗?啊其实呢,各位一共有四个map什么什么什么,目前我们只讲了两个对吧?各位,那回到这个笔记里面啊,我们先看一下前两个,一共是四个啊,我们先看这,哎前两个来各位map state用于帮助我们映射state中的数据为计算属性啊,那一个是这种写法,一个是这种写法,Map gets用于帮助我们映射gets中数据为计算属性啊,那可以这么写,也可以这么写,对吧?后边两个一会再讲啊,各位好好理解理解是不?有的时候啊,同学你发没发现就是库的作者啊,他能提前帮你预想到很多的事儿是不?嗯,OK,那同学我把这src呢给它复制一下吧,好吧,我把这5500的先给它关掉。
24:54
啊,给它复制一下走,那名字呢,给它重命名一下,我们讲了map state,还有map gets,复制过来右键重命名是第26个了,下划线src,下划线求和案例,然后再来个下划线map SP与map get4ok,这就说完了,这是最原始的那个VIVO X版完了,这个呢是用了一下gets,那这呢是用了两个map对不对?各位好啊,那这一小节呢,我们听。
我来说两句