00:00
好嘞,各位求和这个案例呢,我们准备好了,接下来呢,回到课件里面,进入一个最为重要的环节,那就是分析一下VIVO X的工作原理,我们呢是借着这个图啊去分析,这个图呢,不是我们画的啊,各位,是摘自VIVO X的官网,哎,是官方团队画的,可以这样说,如果这个图你不知道啊,你是没有办法写出VX相关代码的,就算你能写出来,你也只是在死记硬背,所以说这一小节的分析很重要,别看这一小节没有代码,分析这个原理是很重要的,分析这个图的时候,我会把很多VIVO X里的概念呢给大家抛出来啊,那这个图呢,咱不在这儿看了啊,我已经给大家了,在这个资料里面有一个零二原理图,这里边有一个VX给它打开。啊,之前呢,有同学跟我说,诶说老师我觉得这个图呢,特别像北京地铁的二号线啊,为啥呢,他在这转圈啊是吧?哎,是一个轮回呀,那边的终点就是这边的起点,老师,这图我怎么分析啊,看起来我都没有切入点来,各位先看一下宏观上这个图啊,在这儿有一个绿色的虚线区就是在这儿,哎,然后他在上边呢,写了一个view X,哎,你说这是什么意思啊,各位,哎,就意味着view X是有三个重要的组成部分的,一个叫做actions,一个叫做mutations,一个叫做state,哎,首先这些单词你得会读actions mutations state啊,那都是什么意思呢?啊,挨个分析,这个action同学啊,本身就有动作行为的意思,对不对?那actions呢?啊,那就是他的复述形式呗,一堆动作呗,一堆行为呗,哎,说老师,什么是动作,什么是行为,一会儿再说,先从字面上去理解理解啊,来再看这mutation这个词本身就有修改、加工、维护的意思。
01:44
啊,那mutations就是一堆加工啊,什么一堆维护对吧?反正是复数形式啊,再看这各位有一个state state直译过来啊,是这个意思啊,叫做状态,同学状态和数据是什么关系?我们上一小节已经说过了,对不对?状态其实就是数据啊,那值得你注意的是,我们经常说啊,要把数据啊交给view X进行管理,那其实就是把数据交给view X里面的state对象进行保管,哎,你听我说的是什么state对象,那也就意味着各位这个state的数据类型是一个普普通通的object对象,OK啊,就拿我们刚才这个案例来举例子,同学当前求和为这和我是不是用这么一个变量去存储的,叫做sum,那目前来说呢,我是不是把这个sum呀写在了这个组件的自身,你瞧是不是在这儿呢?那如果你想把这个交给view X去保管,其实就是。
02:45
交给来放大一点啊,这字view X里的谁呢?就是刚才咱说的那个state进行保管,哎,所以说这个图一上来,同学我必须得把这给你写好,State圈起来,这呢写上一个对象,里边可能有很多的东西啊同学,那我给你写的多一点来,它本质呢是一个object的对象,里边呢有很多的KY6 KY6就比如说啊各位你把我们之前做那个todo list,那一堆todos你也放在这儿了,各位todos是什么?是一个数组吧,哎,写在这儿啊,还放了很多东西,那些东西啊,我就都用这个代替了,哎,就都用这个点点点去代替了啊,然后这里边一定还得有一个人,谁呢?哎,就是你那个sum,这是多少呢?是零,哎,体会体会各位,它能保存很多的数据,哎,那这块写完了呢,你把这个切入点呢,就移到这个位置,哎,移到这好,这什么意思啊,读一读view components就是你的view组件,那这之所以用一个复数,那就证明你的应用里面可能有很多组件的。
03:45
这就不磨迹了啊各位,诶,在你的view组件里面,就拿这个举例子,就比如说我们的那个组件叫什么来着?Con count,对吧,技术组件,然后在这个组件里边,你听好了,各位你去调一个API,哎,这API叫什么名字呢?叫dispach,然后这会儿呢,大家注意一下,他这个图里边啊,说的这个dispatch,这个D呢,是大写的,但实际上你要真要去调那个API啊,各位,其实它是小写的D啊说老师那为什么他写错了吗?他不是写错了,他在这呢,是笼统的给你表达一下啊,你得分发一个东西,等你落到实处的时候,各位那API变成小写,不是他写错了,它只是宏观的一个描述,OK,同学,这词儿我觉得咱们好像不是第一次见到,你想想咱们在学那个消息订阅与发布的时候,本身这个词儿咱就说过吧,有什么分发派遣的意思对不对?好,那各位啊,想一下我们的这个计数组件啊,是这么一个功能,首先呢,你先选择一个数字,哎,就说白了。
04:45
那个select框你先选个字对吧,是一二还是三,选完这之后呢,你再选择一下,你要是加还是减,还是什么基数加对不对?各位就是先选个数字,再说你的动作是不是,哎,就比如说各位我选好了那数字是几呢?就是二,然后呢,我也选好按钮了,按钮是什么呢?是这个加那按钮,然后呢,你就点了这个按钮,点了按钮之后,各位由于数据不在你自身了,这个萨没在你自身,在你自身咱还说啥了呀,各位在自身的时候,我问你是不是就给这个加这个按钮绑定一个回调,回调里边this.sum加等于this.n就你选择这个数字是不是就完事了,但是目前的状况是这个sum不在你这个组件里面,在别人那儿呢,对不对,在view叉里的state里呢?所以说你得按照人家的流程去走,才能更新这个sum,好各位你点完加这个按钮之后啊,你得说话,说话什么意思呢?就是你得在组件里面表达出来,你到底要加几减。
05:45
几对不对,哎,然后在这呢,同学看着啊,就开始调这个API了,我给你写在这吧,叫做dispach啊,然后呢,它是一个函数,你调用它就行,同学现在呀,你先不用想这事儿,老师dispach是哪提供的呀?啊,Window上就有dispach,我直接就能用,不是的,各位有一个地方能找到,但是我们现在分析这个图的时候,同学毕竟不是直接写代码,先把整个原理跑通,OK好了,不墨迹,Dispach是个函数,你调用的时候,听我说要传两个参数,哎,第一个参数就是你要进行的动作类型,哎说老师什么叫动作类型呢?哎,就这么说吧,你要加,要减,要乘,要除,这就是动作。哎,首先告诉人家我要加,哎,就直接写一个字符串记啊加就行,哎,我就写这么喽,同学别管low不low的,咱好理解就行呗,对吧,哎,第一个参数是你的动作类型是一个字符串类型的,哎说我要加,那问题是你要加几啊,哎,所以说那个几得放在第二个参数里,比如说我要加二。
06:45
OK,同学你掉了this patch吧,诶那么恭喜你这条线,诶你就走下去了,好,那我给这条线呢,给它撤掉,因为人家已经画这条线了嘛,我不能画太多,要不就乱了,撤回来走,然后同学掉了dispach之后,你加的这个动作啊和你要加的这个值就来到了哪呢?ACTION4,然后你注意听我说同学这个actions本质上也是一个普普通通的object类型的对象,你在这是不是说你要加,哎,那同学你放心,你在这说完了加之后,这个里边一定会有一个K跟这个加去对应,就比如说啊各位这里边有一个A叭,如说是100,这里边呢可能有一个B叭,如说是200,不管你这里边有什么啊,各位这些东西我先撤掉,不管你里边有多少组KY6啊,一定有这么一个K,它的名字就叫J加,然后它的值呢,是一个函数啊上边。
07:45
那我给你写一个点点点,就是他可能还有别的,但是我们不关注了,OK,你这不说你要加吗?你只要在这一写加GA跟这边这个JA能对上,那就会引起这个函数的调用,这个函数一旦被调用,各位你听我说就收到了你所传递过来的这个什么呢?二哎,就是加几减几的那个几啊,那你说人家为什么叫ACTION4,那肯定是这里边除了有加,还可以有减乘除开平方啥的,是不?各位同学你觉不觉得用户在这边dispach出来的这个动作,第一个去响应的人就是action对吧?你说加,哎,那我加的这个函数就调用,你说减,我这块如果有一个减也会被调用,是这意思不?各位好啊,说老师上边这块这块你先别考虑啊,不考虑这个,先不考虑这个,咱先正常分析,OK吧,嗯,事情到这儿呢,并没有结束,同学,如果结束了,这事儿就有意思了。
08:45
啊,你在这块疯狂的点加减乘除,选了一堆123,然后action在这儿啊,你要加加二啊,然后呢,没有然后了,不可能事情还得走下去,然后你注意了,各位在这个红色的函数里面,就是加所对应的这个函数里面,你去自己调用commit啊,这不是人家帮你调的,是你自己调的,哎调commit当然了,这个commit里的这个C啊,也是小写的Co MIT啊,然后在这呢,同学它也是一个函数,哎调用的时候,首先第一个你得跟人家表达这个用户他要干嘛,你就比如说啊,各位告诉人家他要加,那加几呢?加二对吧,你这不能随便改啊,人家刚才说的就是加呀,人说的就是加二啊好,各位,Commit有什么意思,这个单词本身是不是就有提交的意思,哎,提交我给你啊,啊,同学,记不记得这个命令啊,GI commit对不对,Get里不是有。
09:45
这么一个命令吗?哎,Get commit好,你这一提交不要紧,你听我说各位这个事儿啊,这个流程啊,就走到这个mutations这里了,然后mutations的数据类型也是一个普普通通的object的对象,这里边呢,也是有很多组KY6的,有多少组我不管,但是这里边一定会有一个东西,就是几加,哎,然后它的值呢,也是一个函数啊,然后这个函数来注意看啊,粉色框里边的这个函数呢,会拿到两个东西,第一个东西就是整个state,第二个东西就是你所传过来的那个二啊,捋顺捋顺个位,你pach这块说的时候,会引起action里的这个加,这个函数调用,然后在这个函数里面你继续去调这个commit,然后你说你要加,然后是二,你这写的是加,那就会找到mutations里的这个加所。
10:45
对应的函数调用,然后这个函数一调用呢,手里边能握住两个东西啊,第一个东西呢,就是这个state,其实就是这个人就是这个人,哎,初始化的他啊拿到之后呢,各位还能拿到另外一个东西,就是你到底要加几减几那个几随后呢,各位来看这么一条线叫做muate啥意思?加工修改维护的意思是不同学这就不是一个API了,我们不用去调用啊,也就是说同学在这个粉色的函数里面,你只需要弱弱的写这么一句话就可以了,state.sum然后是不是要加呀,那就加等于几啊,你传过来的二,你只要这么一写,同学它底层自动就走了这个muate,然后你就发现这个state里面保存着的这个零啊就变了,变成了几呢?现在的二随后各位view X做了一个特别给力的事儿,它能重新帮你解析这个组件,哎,然后呢,再去渲染那。
11:45
比如render什么意思,就是渲染的意思,于是乎你发现页面上的这个sum也就变成了几呢,变成了二,这就是整个它的流程啊,哎,同学说老师,我感觉看起来这还是有点乱哈,这什么掉什么,然后走哪儿,同学你放心,在下一小节我带着你写代码的时候,我不会这样写啊,上来我写一堆H一下,整个流程全结束了,不可能同学我会一点一点写,甚至很多的错误我都给你一步一步演示出来,哎,所以说你不用紧张啊,那这个图呢,说完了各位你觉不觉得这个图里面有一个地方啊,看起来怪怪的。
12:23
哪个地方呢?啊,或者说你觉不觉得有一个人他挺多余的谁呢?啊,大家如果有感觉,你弹幕走一波,你说谁让你觉得这东西设计的挺无聊啊,没有什么用,同学谁呢,觉不觉得这个action,哎,同学你分析分析啊,你说这个action,你觉不觉得这个人他有点奇怪啊,你看我在组件里边,我说我要加二,那很自然,我就dispach加二,然后action就过来了,哎,说大哥你干嘛呀,然后你说我加二啊,他说啊,那加这个就调用吧,啊然后在这函数里呢,我给你commit,然后我说的还是加啊,然后那值呢还是二,然后呢,真正能帮你去操作状态,或者说操作数据的人,你告诉我是谁,其实是mutations,大家觉得呢,觉不觉得有一种感觉,我在这儿啊,好像白玩了一圈这么的,同学,我给你画一个这个颜色啊,我用什么颜色呢?我用这个橙色,然后给你加粗,我给你加粗同学觉不觉得就在这儿这里边啊,就整个橙色框里边的这些东西。
13:23
有一种白玩了一圈的感觉啊,就非得经过他,我要加二啊,过来了乐乐呵呵的看你还干嘛呀啊,你说我要加二,他说啊,你要加二啊,行了,我这事我办不了啊,我给你commit,我把这事呢,交给mutations去吧,那哥们要加二是不是觉得挺无聊?哎,各位你听我说啊,这个actions啊,它还是有一定作用的,什么时候我们去用这个action呢?你听我说啊,各位你往上瞄一眼,你悄悄的往上一眼,你就看这个同学back and API啥意思?后端接口,后端接口什么意思呀?哎,同学说一下,有的时候啊,存在这么一个场景,就是你在这儿啊,掉了dispatch,然后呢,你听我说,你不说要加了啊,加减乘除,你说你要除,然后呢,这个I神可能就得问你还说哥们你除几呀?哎,这个时候你的回答很有意思,你说我要除,但是除几啊我不知道。
14:19
你得去问问另外一台服务器,那个服务器让我加几啊,或者除几我就除几,也就是说你在这儿只是输入了一个你的动作类型,但是没有这个动作所对应的值,那actions说,哎呀,那既然你除级都不知道,那来吧,我给你问问去,哎,然后action里边发了个请求啊,比如说问了百度的服务器,百度说那酒吧好,各位,那回来之后你这的除就尘埃落定了啊,我要除九,然后再往下走,也就是说当你进行一个动作,但是这个动作所对应的值啊,需要发送adjust请求才能获取的时候,你就需要在哪发加请求呢?在这个里面去发送adjust请求,哎,所以说这回同学体没体会出来这个action有点作用啊,而且同学我跟你讲啊,一个最好的地方在这儿来,我先把这些乱七八糟画的东西啊给它删掉,来同学一个最好的地方在这儿,就是view团队也考虑到了这个问题,说那外。
15:19
第一,人家de patch的时候,比如说人家想加,人家加几,人家知道啊,人家很明确啊,我就加二啊,那没有必要再经过action问一下干嘛呀,我要加加几啊,加二啊,好了,这事儿反正我也办不了,诶,那我就commit,就给他弄走了,也就是说人家知道要加二,那比如说那如果这种情况啊,比如说那你要知道你自己加的是二,那就这样吧,View允许你在这个组件里面直接调用commit,你就瞬间跟这个mutations进行对话了,也就是说你可以在组件里面调用commit,但是在图里边是没有体现出来的啊各位,图里边的体现好像是必须走actions完了再commit才能交给他,对不对?各位啊,那实际上呢,他允许你不走这块啊,来,我给你划掉,允许你不走这些东西,在组件里面直接commit,把东西交给mutations说去吧,我要加,加几加二,哎,允许这样写,OK啊。
16:19
再看看这这是什么意思啊,各位d tos啊,那说白了就是view X官方所出的一个开发者调试工具啊,它为什么跟mutations对话呢?大家想想为什么呀,因为mutations才是最累的那个人,Mutations才是真正的帮你修改或者说加工state的人,你说对吗?哎,为了能让大家理解的更好啊,我用生活中的例子去给你说一下这个图,这个view component呢,其实各位就是去餐厅吃饭的客人,哎,然后这个actionence呢,其实就是相当于服务员,哎,或者说呢,这个饭店门口的这个迎宾是吧?然后这个相当于谁呢?Mutations同学,我跟你讲,你那菜好不好吃啊,全取决于他,他就是后厨团队啊,那你说这个state是谁呢?就是你能吃到嘴里边顶饿的菜,哎,同学,你这么理解啊,就好理解了,客人呢,进门了,客人张嘴说话,张嘴说话就是dispatch这个API的调用,然后客人说蛋炒饭。
17:19
一份,那就相当于我们的这个啥呢?加加就相当于类型嘛,对吧,你什么类型的菜呀,蛋炒饭那几份呢,一份也就是加二,OK,是这意思吧,各位诶,然后服务员说了啊,那先生点什么呢?啊,发现你点的是啊加是吧?哎或者是蛋炒饭,那好在我这儿呢,我就知道了啊,你要做的动作是加,然后是几呢二,接下来呢,同学服务员就得使用手里边的那个点餐宝,哎,或者什么这个点餐软件,然后呢,就commit,就把你所点的这个蛋炒饭一份,哎,也就是我们的加二就交给了后厨团队,然后后厨团队说来吧,啊,做菜还得我呀,于是乎他拿着这些东西进行了一番加工,然后呢,就把菜给你做好了,最终呢菜再给你送上来,是不是这意思?哎,那你说同学生活中的例子就是,如果你跟一个餐厅足够熟了,你就比如说啊,餐厅后厨的那些厨师啊,跟你没事儿就出去喝酒去啊,你们是铁哥们,那你说是不是就意味着有一天你去餐厅吃饭的时候来,各位你是。
18:19
个人对吧,然后这服务员呢,刚要问你还说先生今天吃点什么呢,然后你就告诉哎,你边去吧,对吧,你家那菜谱我比你都熟,然后在这儿呢,同学,哎,后厨你那哥们儿在那儿呢,看一眼,哎呦,小张来了呀,你说老样子,直接就跟后厨对话了,所以说同学你说服务员这个环节能不能省略,能,但是有些时候不能省略,就比如说啊,客人呢,来到餐厅去吃饭了啊,然后这个服务员呢说哎,说这个先生你吃点什么呢?然后你说哎呀,不用你这菜单啊,我比你都熟,但是服务员补了一句,先生你不熟了,因为我们整个饭店换了菜系,对吧,之前那些菜呀都不见了,所以说呢,你还得求着我去给你点点菜才行,对吧,各位我得给你看菜单,你说那个菜单是什么呢?不就是另外一台服务器里面可能存着的数据吗?是不是各位,哎,也就是说这个环节是可以省略的是不?如果你不发加请求,当然可以省略呀,啊或者说你们有什么别的业务逻辑是不?还有就是同学服务员还有另外一个存在的这个意义。
19:19
你在生活中啊,你比如说举个例子啊,各位你点了A菜和B菜,那我问大家容易造成一个什么问题呢?就是食物的相克相宜,大家知道吧,就比如说哪两种东西不能一起吃,那服务员发现你点了A,点了B,结果这俩东西是有冲突的,那你说同学,服务员是不是有责任和义务告诉你一声,先生啊,你点这俩可能一起吃啊,要坏事儿是不?哎,所以说同学这个里面就是说如果你没有需要判断的业务逻辑,你就比如说我可单纯了,我就是想加啊,我加几就加二,那同学其实没有这个环节也可以,对不对,但是如果说你有要求,还说我得基数的时候再加,我得等一等再加,你说这些是不是都属于有业务逻辑对不对,不是说单纯的加二,而是基数再加二,那同学需不需要这服务员,那就需要呗,是吧,哎,这回怎么样,大家对这个图理解怎么样?哎,其实啊,同学现在你听我说吧,也只是一个大概的理解啊,也只是说啊有这么一个雏形是不啊,一会儿还得代码上见,然后在这儿呢,跟大家说一个特别重要。
20:19
的事情,就是这个图啊,咱不得不承认官方画的挺好的,但是呢,它没有体现出来一个地方,哪儿呢?这儿看着我们刚才说这个view X呀,是有三个组成部分的,分别是actions,哎,它的值是什么啊,本质数据类型是个对象,Mutations来,同学它的那个数据类型什么对象state来数据类型是什么,是不是一个对象啊同学我跟你讲啊,这个图里边没有体现出来的是这么一个环节,就是组成view X重要的三个部分,Actions mutations state,这三个东西得经过一个人的领导,这个人谁呢?就是store,哎,Store同学死道什么意思呀,道什么意思?哎,仓库的意思,或者有存储的意思,哎,得有一个死道去管理这三个人才行啊。图上的体现好像就是说我直接写个action对象,Mutations对象,再写个state对象,好了就能工作了。其实不是,这三个对象你都准备好。
21:19
好了之后啊,各位,你得去用一个死道管理他们三个,哎,图中没有体现,说老师为什么没有体现呢?其实啊,同学这就有点像你那个去4S店买车,不管你买的是几百万的车,几千万的车还是几十万的车,最终同学是不是得上牌子归车管所管啊,那在这儿的意思就是我不管你里边有多少个组成部分啊,我不管你写的多完美,就是最终这三个人必须得经过一个死道的管理啊,如果死道不管理他们三个同学,也就意味着你这车买完没上牌子,你不能上路,就这意思啊,然后他在这写这view X的意思就是说里边的这三个东西都是属于VX的组成部分,OK,各位啊,说老师那我不理解,你说为啥非得经过一个store的管理呢?就直接写在这不行吗?那他的设计我觉得不太好啊,这三个人还得经过一个道啊的管理,对吧,然后那个才能工作,是这么回事啊,之所以我们这么需要这个store,那是因为这个dispach就是在这儿,你调那方法啊。
22:19
Pach不是这个window给我们提供的,那是谁给我们提供的呢?是store给我们提供的,也就是说你调这个dispach的时候,同学你得是store stop.this patch,同理,你调这个commit的时候也得是store.commit对吧?哎,都是死道身上的,所以说同学觉不觉得死道才是一个隐姓埋名的这么一个人,表面上他们三个就能工作了,实际上脱离了道这个平台,他们三个是没有办法工作的,是吧?各位好了,同学,东西啊,说的挺多,我们快速的总结一下,你把哪些点把握住了,对一会儿我们写代码有帮助。首先第一个点,各位actions mutations,来换个颜色,Actions mutations state这三个东西的单词你得会写,还有就是他们三个都是什么数据类型,是对象,哎,这块你得知道,还有就是各位这些人都得。
23:19
经过一个人的领导,这个人谁呢?Store store这里边还有一个细节的问题,最后给大家说一下,同学你觉不觉得我得在任何一个组件里面都可以调dispach,都可以调commit,而这个dispach,这个commit都在谁身上啊,都在这个store身上,那也就意味着各位你得解决一个问题,你得让所有的组件实例对象VC都能看得见这个道,你说对不?哎,这个问题一会儿我们去解决,那么VIVO X的工作原理呢,我们就分析到这儿啊,他是迎宾,他是后厨,他是真正的菜,这是吃饭的客人。好,那这一小节呢,我们停。
我来说两句