00:00
好嘞,各位,截止到目前呢,我们已经学会了组件的基本使用,而且呢还知道了几个特别重要的注意点,而且呢,嵌套式的组件怎么写呀,我们也学会了,并且呢,我们还知道了一个人的存在,谁呢?APP诶,咱开玩笑的说他是一人之下谁之下呀,VM之下,万人之上谁之上啊,所有其他组件之上,那也就是说咱把前三个呀,如果都掌握好了,各位你完全可以啊,就往那个单文件组件的写法上去过渡了,也就是说这一小节我要想给你讲单文件组件怎么写,咱们现在就可以开始讲了,分分钟呢就讲完了,但是各位如果你想对view里的组件理解的更加深入,而且想让你后期进行源码分析的时候呢,压力没那么大,那就必须啊,得给大家讲讲这个人了,View component,他在这个时间点讲是最合适的,OK啊,那打开它走,你说老师,那我能不能不听呢?我先跳过这一小节,同学不要跳过这一小节,跳过这一小节会造成两个问题,一。
01:00
后期呢,我去讲那个高级的一个组件间通信,叫做事件总线的时候,你可能就跟不上了,还有就是后期进行源码分析的时候,你的压力会很大的,OK,同学,这里的内容不多,一共就是五个点,而且都比较简单,一个一个过啊各位,这五个点里边呢,我说一下啊,有的是官网上直接写的,哎,有一些东西呢,也是我们看了这个底层源码然后才发现的,哎,觉得在这块儿把这五个点跟大家说一下,就能扫清很多的障碍,好,慢慢来,各位啊,甭管它几个点代码啊,咱得一点点写。同学,创建一个组件去啊,我直接粘了,好吧,不再写了啊,把这个给它复制过来,粘到这儿精简一下。同学,我不需要让这个school呢有子组件,你就把一个组件分析明白了,剩下其他的所有东西都是一样的,在这个里边呢,我也不写这个组件,什么APP组件是不是,哎说管理所有组件的那个人也不需要写这个,同学你把故分析明白了,APP都是同理的,OK,注册这块也不需要了。
02:00
删掉,好,这是结构,这是数据,接下来我得用,你想用就得创建一个VM好走,你里边呢,我也不需要data写成components,注册,我就一个也不换行了,School,然后在上边呢,就得写school,组键标签右键打开看效果,控制台呢,没报错,借助view开发者工具看一眼,这是VM,这是死故组件,对吧?各位好,我们开始分析第一个问题,回到代码中,就是这个死故组件的本质到底是一个什么东西?或者我再通俗点问,就是它的数据类型是哪一种数组啊,还是一般对象啊,还是布尔值啊,还是安顿饭的呀,还是什么呀,对吧,得研究一下。好各位,一个最简单的方式呢,就是consollo输出,我不知道你是啥,我输出看一看总可以吧,之前我们可是从来都没有输出过它,知道不,之前就是定义好了,诶我就注册,诶完了我就用,但是今天呢,我们要关注这儿了啊,来同学看看啊。
03:00
我前边呢,给你加个艾特符,你关注艾特符后边的输出个位走你控制台什么,我给你放大一点什么,你怎么告诉我这是啥?不是数组,不是一般对象所谓的组件,它的本质揍是个啥函数,但是我希望你加一个限定的词儿,叫构造函数,为什么呀?注意观察函数的首字母是不是大写的,而且你看看那个函数叫什么名字,来各位你看着,我再给你原封不动的写一遍,叫做view component component这个词我之前就跟大家聊过,叫什么意思呢?组建,那么这个view就不多说了,你学的是什么吗?对吧?各位,哎,那这个view component连起来念叫做view里的组件,而且同学我说的是构造函数,那就意味着以后如果你想用这个函数,你好像在它前边啊,必须得加上一个new关键字,然后是不是再。
04:00
去调用它是这意思不?哎,那我写到这儿啊,可能有一些同学啊就疑惑了,说老师目前来看吧,反正你说的是这意思,这死故一输出啊,嘿,它还真是一函数,而且这函数呢,还有自己的一个名字叫view component,但是说老师我没写过这段代码啊,然后呢,View component我没写过这个东西啊,说老师那我知道了,就是这个函数啊,压根儿没被调用,你看我也没调过它,对不?哎,你也没写过,那肯定那就是没调,同学你不能这么说呀,来看着我回到这个里边,找到view的源码里面去搜索一个人啊,搜索谁呢?就搜索这个view component在哪呢?在这儿同学看着啊,这个绿色的函数就是这个view component,我知道各位肯定会说一句话,哎,老师这函数啊,挺low啊,是吧,里边没干啥事儿啊,各位,我告诉你,人家把逻辑全都封装在这个下划线in ne里了,我们现在不是在分析源码,就是在给你铺。
05:00
一些事情,同学,我现在就想整明白这个绿色的view component这个函数到底调用了还是没调用,那你说怎么办?很简单,同学,你就在这个位置来个debug断点,或者来个conso输出,是不是都行?在这我就来个输出,输出谁呢?这个东西叫做view component,然后呢,被调用了,行吧,各位,哎,那你看一下效果,来到控制台,同学,啥也别说,嗯,调没调用,调用了,而且我还很负责任的告诉你,不仅仅掉了,还是用new关键字调用的。哎,那这样的话大家就不理解了,说老师这什么鬼啊,我没有写过它的调用啊,来,这就是我们总结的第一个事儿,各位我先把这个呢给它删了去啊,源码咱们看完了之后赶紧给人家再变回来啊,不要随便去改源码,好了,关掉,各位往上看,我们的第一个总结在这儿呢,来读读吧,我先把左侧的目录关掉啊,各位来读school组件本质是一个名为view component的构造函数,且不是程序员定义的,是view.instant生成的。同学,第11行这个总结没毛病吧,就目前在这儿能听懂吧?同学,是你定义的吗?哎,你咋那么厉害呢?你写的function view component view作者写的啊,那它咋出来的呢?我怎么能得到这个东西呢?是你得调view.extend人家给你生成对不对?同学,你再看看这来,你掉没掉view.extend掉没掉,掉了给没给你东西给了输没输出,输出了是啥?哎,是一个函数,叫什么名view component。好的,这不磨叽,同学进入第二句总结,我们只要写。
06:34
这种组件标签,或者是这么写组件标签,然后view解析时,View在解析模板时就会帮我们创建故组件的实例对象,为什么在这儿我敢说它是组件的实例对象呢?因为我们深深的知道一件事儿,所谓的故组件就是一个构造函数,那构造函数当然就可以有实例对象啊。哎,再读后半句g view呢,其实帮我们执行了粉色框里的这个代码,View帮你new的这个view component,而且呢,View还帮你传入了配置对象呢,还是老师的配置对象我写过吗?哎,这你写过,各位,所有绿色框里的东西,你觉不觉得都是配置对象,是不有内幕吧?有template吧,有data吧?
07:19
OK哎,说老师那听你这意思,如果我要再写一个,那他就拗了两次呗,是的,来看效果,各位,那这会儿的输出啊,我撤掉了,那所以说同学回来来找到这儿,咱们再给那个输出给它加上啊conslo,加上这个view component啊在这呢,写这个,然后叫做被调用了,好保存,回头看同学几次几次两次说老师那我要不写呢,嘿,不写同学那就不帮你调呗,删掉对吧,走保存回来是不?啊,OK,而且你看这同学咱改那个东西确实是view component,你看你把源码一改,诶这块也跟着变,对吧?各位,OK,好了,回来,那咱把哪句话过完了呢?就是第二句,所以说同学你体会体会,这就是框架,你没写,你写的是那种形式,人家给你翻译成了诶这种形式,对不?各位好了,我把这school呢重新给它写回来,我们再验证第三句话,啊,来走,特别注意,每次调用view.a ten时,返回的都是一个全新的view component,哎呀,同学,我跟你讲这句话可太重要了,这句话如果你搞不懂,到后期去讲那个全局事件总线的时候,你就总觉得像你那么写能行,然后一写你就失败,然后呢,你就陷入了一个深深的沉思,啊,我到底适不适合学编程是吧?所以说各位这句话一定得先搞明白啊,来,再读一遍,每次调用点instant,返回的都是一个全新的view component,这个全新的怎么理解呢?
08:52
诶同学想把这个全新的给它理解好,那最好你就再写一个组件,诶这回我写个谁呢?写一个hello,等于留点a stand传入配置对象走写一个模板,这块呢,我就怎么简单怎么来了啊,我就写一个H2,然后呢,差值语法读出MSG在这呢,配置一下走date return,好,MSG内容呢是你好啊对吧,OK,就写完了,同学我又定义了一个组件,这叫什么组件,Hello组件复制过来。
09:25
往这一写,想用不想,那就去注册去来在这儿写一逗号,注册了吧,那上边怎么办呀,各位是不是得写那个组建标签啊,走同学是吧,哎,Hello OK,那咱们呢,测试一个事儿,各位我不仅输出了school,这回呀,我再给你输出一个人谁呢?Hello,而且前边呢,不用艾特符了,给你用井号,然后回到这个源码里边,各位啊,我先把这输出呢给你注掉,防止它干扰咱们啊把它注掉好保存回来,我分别输出了school组件啊,还有这个hello组件,回头看一眼啊同学瞧是那意思是吧?这是谁呀?School组件,那这是谁呀?啊,Hello组件,哎,说老师啊,那他俩不是一个东西吗?老师,你看一模一样,你那个school啊是view component这个构造函数,哎,老师,你这个hello,也是这个component这个构造函数,它不就是一个东西吗?诶,然后大家呀,主观意识就开始猜了,说老师我算明白了,其实就是这么回事儿,View底层啊,有一个红色的东西,这东西是什么呢?
10:26
那这东西是一个函数,哎,就是这个函数叫做view component,说老师啊,我都能给你讲了,贼简单,就是啊,你只要调用这个view.extend诶,它就把这个view component啊拿过来,就作为返回值,哎,就给你了,School就是这个view component,如果你再用一次,说老师那也简单,就这东西一定要用啊,哎呦呵,就把这view component啊拿过来对吧,作为返回值的,然后呢,再给这个hello,哎,所以说老师你看这就解释清了呀,School是这个view component,那么hello也是这个view component,老师他俩呀,就是一个东西,这些东西都是你的主观意识,同学,我明确的告诉你啊,School确实是view component hello确实也是view component,但是各位他俩是两个view component,只不过长得一模一样,而已,只不过功能完全一样而已。说老师这啥意思呢?我跟你说了生活中的例子,同学说张三有一个亲弟弟叫李四,哎呀,这不对,张三有一个亲弟弟叫张四,同学张三。
11:26
咱和张四长得一模一样,哎,甚至咱就开玩笑的说这指纹都一样,那我问你各位,他俩是不是也是俩人对不?哎,行,同学,咱在这儿呢,不浪费过多的时间,我通过三种方式带你去验证,School的这个view component和hello的这个view component,它不是一个view component OK,第一个验证就是非常简单而又粗暴,如果它俩真是一个东西,同学什么也别说,这个输出一定是真,如果他俩是一个东西的话,对不对?嗯,看输出就得了呗,False,对吧,还可以通过一个方式验证,哎,我这么玩敲诈,我在上边呢,写个school.a等于99,那同学我问你,你说这块school.a我输出的时候能不能看到这个99,必须能,那如果school和hello真的是一个东西,那我问你,Hello,身上是不是也有这A了呀?哎,那你看一下效果各位,事实就是这有99,但是这却没有对吧?哎说老师,那你除了这两种方式验证,还有哪种方式能验证。
12:26
呢,那同学还有一种最最最最有说服力的一个验证方式,来瞧着啊,在这儿删掉,我上源码里啊,找到它,同学,我问你归根结底view component这个构造函数是谁给我的,谁给我的,是不是他给我的?我就去源码里边找到这个view.extend我就亲自问问你,你那里边到底咋写的对不?哎,好了,各位看着啊,把这个view.instant给它复制,哎,同学啊,你听我说,我先声明,不是说什么东西你到源码里边一搜都能搜到,也不是说什么东西你在源码里边看了一次全能看明白知道不?我这为啥带着你搜啊同学,咱说句实在话,是因为底层这块写的不难,所以说我带着你搜一下明白不?哎,复制来到这,同学,CTRLFCTRLV啊,这不是啊,这是注释,再往下找,这也不是,哎,这呢这呢,各位看好了点extend干嘛呢,是不是在这定义呢?同学,它的值,看这它的值整个大的绿色框里边老长老长的一个函数,同学,是不是一个函数是吧。
13:26
正是因为它是一个函数,所以我才能调用它嘛,对吧,各位好了,您瞧好了,接下来啊,我把整个函数都折叠,我把源码里边的5134行到5196行,整个全都复制出来,然后呢,找到我的这个文本编辑器里面,我呢把它整个粘过来,OK,说老师这么长,咱们怎么分析啊,各位听我说我们只关注我们想研究的东西啊,说老师那研究的东西在哪儿啊,来各位从这儿到这儿我全都给你删掉,然后写一个注释,用点点点代替,啥意思,就是这里边的东西我不去关注,他爱咋写咋写,跟我们分析view component没有关系,所以说就给它删掉,还有就是同学从这一直往下走,一直往下走到这儿我还是给你删掉,然后呢,写一个注释,我用点点点点点给你代替,好了,各位来,咱开始分析,同学,请问view.extend是不是函数?是的,正是因为它是函数,所以我才能view点调用。
14:26
你说对吗?好,同学,只要你一调用view.extend它就给你创建了一个函数里边的这么一个变量叫sub sub的值,各位你注意看是啥,是粉色的这个函数,你观察一下粉色的函数是谁呀?正是我们要研究的那个view component,随后同学观察黄色框里的代码,他干了一件事儿,Return了这个sub。所以说同学我问你看到这难道还不够清晰吗?是不是每一次调用view.extend确实都给你返回了一个view component,但是每一次的view component同学都是咋的,都是限定义的,然后再给你返回的,OK,可不是共用一个view component,是不是这意思?哎,那所以说各位其实说白了吧,就是在这儿,你看啊,你写这个结构的时候,你是不是写了一次school?那我问各位,其实底层啊,就帮你生成了一个人,谁呢?View component。
15:26
对不?哎,当你写这段代码的时候啊,同学底层啊也帮你生成了一个view component,但是我必须得换个颜色了,View component为啥换个颜色呀,因为黄色的诶和这个红色的它俩不是一个东西,OK,各位那就把这个呢说明白了,好,同学再说第四个就是关于this指向,同学先看第二个,哎,先看这这呢我们研究过啊,我在好早之前就给大家讲过了,同学你new view的时候,里边是不是得传入一个配置来在这给你写的完整一点,Options new view里边是是传一个配置,那么在这个配置当中,同学如果你把data写成了函数啊,或者是methods中的函数,或者是VO中的函数,或者是中的函数,他们的this是view实对象,View实力对象,我问你是谁,就是我们嘴中的谁,我们天天你跟我交流的时候,我们说的谁VM呀,对吧,各位,哎,再看这儿,各位你看好了组件配置中。
16:26
同学,我问你组件是不是也有一个配置options,那么组件里面能不能写data函数,能哎,然后methods中的函数,Watch中的函数,Computer中的函数,他们的this均事哎,你可看好了,叫做view component实例对象这块怎么去看呢?各位其实也很简单啊,来,我给故组件呢加个功能,哎,在这写一按钮,这按钮什么功能叫点我提示学校名写写啊at点我提示学校名是不是得给一个点击事件呢?起个名吧,Show name学校名嘛,展示name,那你说接下来怎么办呀,写个稍name呗,走各位好,里边干嘛呢?咱都写习惯了,是不是就写alert this点那个name呀,对不?各位之前这个东西咱解释过是不是?哎,咱看一下效果啊,回到这儿啊,说老师啊,这有一个问题,收name没有,那你看看呗,啊,回来检查一下收name不能直接写是吧,哎,咱说过得在这个method里面是吧。
17:26
写一个show nameme这回就对了啊,来走好了,回来看一下啊,一点击走,你是不是弹窗?哎,说老师这不就写完了吗?同学,我要问你的是这里的this是谁?哎,你可能会告诉我,老师this,那不就是view实例对象吗?诶各位你这么说可不对,为啥说不对呢?你看一下啊,你这个绿色的配置对象啊,它可是在创建组件的时候传入的,你这个绿色的对象,如果要是在new u的时候,在这个里边你写的那个函数,那我得承认,那this确实是谁啊,VM也就是这个view的实例对象,但是在这个里边,同学我跟你讲,它可不是view实例对象,说老师那是谁呢?看一下效果啊,输出意思,瞧好了,前边呢,给你加个分格吧,写上show name好,在这来一个逗号,好看效果啊,回来该清的呢,清掉,然后呢,提示学校名,走你同学show name,你看后边红色框里的是什么?就这什么同学输出的可不是view实例对象啊。
18:25
哥们,View实例对象,它得这么给你呈现view,然后里边什么什么乱七八糟的一堆,对不?那你看它输出的是谁呀?哎,View component的实例对象打开之后你就发现了,同学跟之前你所看到的VM长得一模一样,同学你看它也有啥有name address,哎,同学这个a address和name好像都是你配置在data里的,而且呢,你看它还有诶下划线data,而且同学你看什么也在,是不是那个数据监视也在呀,对吧,这叫啥数据代理吧,走走是不是都有?哎,所以说同学输出的这个东西啊,叫做view component的实例对象,只不过这个实力对象和我们所说的这个人VM长得一模一样,回来各位,那你说之所以在这儿你能通过this拿到这个name,本质是因为什么呀?本质是因为这个name最终的最终出现在了view component的实力对象身上。对不什么。
19:26
Name呀,什么address呀,最终都通过数据代理放在了view component的实力对象身上,而且这个里边的this还是component的实例对象,这样的话不就可以了吗?是不,同学你觉不觉得和咱们当年去给你讲new view的时候是一样的,咱们当年讲new view的时候,我是这么告诉大家的,我说同学们这个data里边写的东西啊,最终啊,都通过数据代理出现在VM身上了,哎,只要MYS里的这个方法啊,你好好写,你写成普通函数,这里的this都是谁呀?哎,都是VM,那你看这东西放在VM上了,那这呢,通过VM再取出来呗,vm.name那不就alert弹窗了吗?那只不过这就把这个this给它换成谁了,不是VM,哎,那叫做什么呢?叫做view component的实例对象。
20:16
VM是谁呀?VM是view的实力对象,OK,各位,哎,说老师,那他能不能也给他个简称呢?对吧?那view的实力对象叫VM,那view component,那能不能也给我个简称呢?同学可以在我们的课堂上,以后就管view component的实例对象叫VC,哎,取首字母VC,但是在你心里得明白,这个VC和VM功能是一样的,也有数据代理,也有数据监视,对不?OK,说完了,各位划到上边,把这个读一下,组件配置中你的data函数,Method中的函数,Watch中的函数中的函数,他们的this均是view component实例对象。最后补一句,View component的实例对象以后就简称VC了啊,也可以称之为组件的实例对象,组件归根结底是谁呀?哼,组件归根结底是不是它呀,就是这个构造函数,那组建的实例对象不就是它的实例对象吗?那它的实例对象以后在咱们的课堂上简称什么呀?VC啊,那VU的实例对象呢,以后简称什么VM。
21:16
OK,哎,体会体会,同学这五个点咱一个一个都过了,有些点吧,我得承认,现在咱读完了吧,感觉老师也没什么太大的这个影响是吧,我就不知道也行,先在这铺垫一下,以后他会让你轻松的好同学,我再说另外一个事儿,就是怎么能体现出来VM在管理着一个一个的VC呢?同学,这回我就可以说VC了,对不对?哎,你之前说啥,之前说是组件,那其实我问各位,那组件想用,那你不得new啊,那拗完了的东西,那不叫VC啊是不?各位哎,那怎么能体现出来这个VM在管理着这一堆组件呢?同学,很简单,你瞧着啊各位,我呢给你收到这个VM,然后呢,我把这个助调,这个助调好,回到这个页面里边,我输出VM,各位这啥也别说,肯定是的实力对象,这都明晃晃写着呢嘛,打开各位,这里边是不是有一个Dollar。
22:15
是不是有一个a Dollar for children children什么意思呢?孩子,同学,你打开Dollar for children,你就会发现有两个人,哎,他们都是view component的实力对象,那你知道他是谁吗?他就是你第一个写的这个人,School组建,那你知道他是谁吗?没有,Component就是你第二个写的谁呀,Hello,组建。所以说同学你看体内体现出来一个管理这种感觉,大哥是谁呀?VM下属管理的两个弟弟,一个是这个组件,一个是这个组件,组件归根结底都是view component的实例对象,说老师呢,如果我不写呢,我在这不注册这两个组件呢?可以呀,各位你如果不注册,那这儿啊,你干脆就也别写,你说对不,保存回来各位再给你输出VM,诶,你就神奇般的发现呀,Dollar夫children身上没东西了,确实嘛,VM光杆撕令一个对不?各位好回来啊,那再往下我们再深入的说一个事儿,同学,我把这个解开,然后你这不是有。
23:15
Hello组件吗?同学你看着啊,我再给你写一个组件,哎,这个组件呢,叫做test view,点这个呢,我写的就足够简单了,我就只写一个模板,它这里边呢,我就写一个SPA啊,诶,Span是吧,得写这个啊这个诶,这个span,哎,然后里边写一个什么呢,叫做艾特硅谷就得了,哎同学我想把这test呀,是作为这个hello的子组件出现,那我得怎么写,是不把这个test得放在它的上边去,提前给它准备好,然后在这儿呢?同学,其实这个配置项的顺序是无所谓的,就是接下来我要配置那个components啊,我写在这儿行,我写在这儿行,我写在这儿呢也行,哎,但一般来说呢,这个结构写在这儿,然后仅仅相邻的呢,是它的数据,然后在这儿呢,再写那个组件啊,Components,其实你怎么写都无所谓的啊,各位来在这儿写谁test,那然后怎么办,在这儿我想用一下,那你说怎么写,在这儿是不是给他来一个div,一个根元素嘛,走着把之前那HR的拿过来,然后再写一个谁呢?Test是得这么写呀。
24:15
嗯,各位来瞧一下效果啊,回来,嗯,当然了,我这里边的东西啊没写完,往下往下就是这儿,我得写上这个school和hello啊,要不什么都没有了嘛,划到上边这块解开这块解开各位school我用了,Hello我用了,但是你知我知hello里边还有一个子组件,谁呀?Test来看效果啊,借助view的开发者工具看一下,这是VM,这是school,这是谁呢?哈哈,里边还有一个test,哎,这是借助开发者工具看,同学你看我们从这再看一下VM来走,身上首先有两个组件,一个是第一个school,对吧?打开这个school你发现诶,它和VM那些配置呢,还基本上都一样,然后你再打开它的children准同学,你发现没了,请问为什么没了?很简单,因为死故组件没有子组件了,但是如果你打开这个人的Dollar符children准诶同学又看到了一个,你说的是谁呀?就是这个艾特硅谷,哎,就是刚才那个test的组件,OK,那说到这儿大家就能更加明白了一点,对不?哎,这些东西呢,大家下去自。
25:15
自己呢,也验证一下这五点咱们都得掌握好,各位这一小节我们听。
我来说两句