00:00
好嘞,各位从这一小节开始呢,咱们跟大家说说view里的这个最新版本VIEW3,给大家呢,整理好了一个笔记,叫VIEW3快速上手笔记呢,放在这儿了,给大家的这个资料里面,哎,有一个零一课件在这儿呢,快速上手,好,咱回来说一下啊,不见得你学完了VIEW2,马上就学V3,你完全可以把V2里的一些东西啊,再消化消化,再多练习一下,甚至你可以完全看一下,咱们上硅谷之前拿V2讲的那个vu项目,看完了之后,回头还说老师我再把这个VIEW3过一遍是完全可以的,也就是说目前出去干开发呀,二还是一个主流的版本,但是三也一定是未来的趋势,是吧,各位你可以作为一个扩展的知识去了解一下,就目前啊,以后肯定会有那么一天,咱们去讲view的时候,上来直接讲三,哎,然后跟大家说二太老了,咱们都不学了是不?这是事物的发展的一个定律,OK,不墨迹了。同学看一下VIEW3的简介,二零年的9月18日凌晨,View团。
01:00
对,发布了三里边的第一个版本啊,也是公开的第一个版本叫做VI3.0版本,对吧?第一个公开版本不可能是3.1,肯定是3.0啊,代号呢是one piece,翻译过来呢,就是海贼王,哎,并且官方呢,给他匹配了这么一个图案,哎,像海贼王一样,这东西不是说咱们老师做的啊,也不是谁做的,是官方写的这么一个图啊,然后VIEW3呢,一共是耗时两年多,2600多次提交30多个请求,修改意见稿,以及600多次拉取请求啊,融合了99位贡献者的这个力量啊,然后打造的这么一个东西,所有的这些都不是咱瞎说,来自于官方的描述,比如说啊,这99位贡献者都是谁呀?啊,咋不一百位呢?咋不是102呢?因为它就99位是吧,你点击一下哎,看一下就可以了,跳到的是github,他那个主页往下看,同学,每一个贡献者是谁啊,根据他的一些贡献进行了一个排名是吧?都在这儿呢,比如说这就是第24位,那么打头的一定是谁呀?诶尤雨西是不?哎主要。
02:00
的作者吗?好,回来,然后剩下这些东西吧,大家也可以自己去看一下,是不?2600多次提交啊,什么这个pro request拉取请求这些东西大家肯定熟悉这个呀,有一些小伙伴可能不知道,说老师30多个RFC,这RFC是啥呀?这东西呢,叫做请求修改意见稿,哎,就是一个开源的库吧,他想维护的更好,得几百家之长是不是?诶,团队内部得琢磨,然后也得看看社区里面人们的呼声,对吧?然后这30多个意见稿吧,可能有些同学说老师这有点少吧,这5U3耗时两年多就整出30多个意见稿,各位,这个意见稿是他团队内部维护的,不是说你也能发一个意见稿,不是那意思啊,你打开看一下各位啊。你看这不都在这儿呢吗?是不是,然后有雨欣呢去操作,比如说移除哪个意见稿,采纳哪个意见稿对不对?你看有的是十几个月前的,就比如说这个composition API,就是人家所提出的这么一个请求意见稿,我们也会讲到这部分的知识是不?你打开看一下,一般都是一个markdown文档啊,你打开看一下,各位走,你看同学他从什么时候开始啊,就研究这个composition API了,看这start date是不是开始时间,哎,同学你想想啊,一九年的7月10号,各位开没开始学习view呢?各位开没开始接触前端呢?是不?从那个时候各位人家就已经开始为以后铺路了,人家团队内部就已经形成这个意见稿了,已经发现之前哪块设计的可能不是很好了,是不?各位,诶,你就包括现在可能说view里边的更高版本的东西已经在开始筹备了,OK啊,然后在这里面呢,是他的一些描述啊,原来怎么不好建议怎么修改,甚至还写出了一些代码,还形成了一些对比图,OK,这个我们其实不太关心啊,给它关了吧,来回到我们的笔记里,剩下这些大家也可以去点一点,然后在这呢。
03:42
贴了这么一个地址啊,就是github上啊VIEW3的这个tag地址,Tag是什么意思呢?就是一个公开的这么一个开源的库啊,他想发新版本都得把目前所写的代码呢,形成这么一个里程碑版本,啥意思呢?比如说各位啊,我写了啊100多个文件啊,200多次修改等等很多东西吧,说哎呀,终于啊,我把五三呢给写完了,那最终得把这些东西同学进行一次打包,哎,得形成一个版本,哪年哪月哪日我发的是哪个版本,包含什么功能,哎,这叫taxi,诶就有点这个里程碑的意思啊,来同学这个地址,这才是官宣的地址,明白不?诶当然你可以说老师我打开旅U3的官网,那是官宣,那也行,但这个一定是最及时的一个官宣啊,我们打开看一下各位,这就是当年人家发布3.0.0的时候,哎,进行了一次说明,我们所有上课讲的东西,哎呀,比原来快了多少,慢了多少,多少位贡献者同学,我咋知道的呀,这不都在这儿呢吗?30多次RFC 2600多次提交,600多次这个pro request。
04:42
99位贡献者说都在这儿呢,不是我说的是人说的是不,哎我们讲课呢,也参考人家这里边儿很多的东西,为啥各位,因为理由三呢,没有进行什么大规模的应用,是不,你不经历时间的检验,你没有没有这个这个资格去说一些事情,但人官方就有资格说,因为人家写的嘛,对吧,各位,哎都在这儿呢,你看这是3.0.0one piece海贼王,然后你打开它这个选项T啊,你能看到很多其他的版本,你就比如说同学,诶六小时之前,诶出了一个V 3.1.3里边怎么办?肯定是多了一些东西呗,说老师那我想打开看一看,那看呗,在这就没啥说明了,就给你两个压缩包,诶源码在这儿呢,你看source code源码在这呢,你去研究去吧,啊,你去用去吧,说老师怎么不进行一些说明呢?改动都是微乎其微的改动,没有什么大改动,也就没有什么说明了,但是同学你回来你往前翻啊走。
05:32
别看三点一点几,你就找那3.0.0是不是在这儿呢,他跟谁都不一样,你比如说你打开3.0.1没啥说明源码给你玩去吧,对吧,回来你看这个3.0.0,你看它是一个大版本,里边有很多的改动,同学,这是一个二到三的一个跨大版本的一个升级,那肯定得有一些描述是不?哎这儿呢,咱就不说了,来顺着笔记呢,再往下看,我们关注的是VIEW3呢,给我们带来了什么,首先呢是性能上的提升,来看看官方怎么描述的啊说。
06:03
打包大小减少41%,初次渲染速度快了55%,更新渲染速度快了133%,同学这比一倍还多是不?哎,内存减少了54%,说老师你这些东西你咋算出来的?同学还是那句话,不是我说的来自于官方,你像这些量化的东西,同学你就比如说啊,我拿比U2写,我在拿比U3写,我写十遍取平均值,我发现减少的不是41%,好像是40%对吧?所以说这些东西同学就知道这么回事就得了,就这些文字过完了,同学俩字你记住了就得了。一是啥快对吧,速度比原来快,二啥少都哪少了,打包体积减少了,内存占用减少了就完了,至于说多少无所谓的,是不来。同学比如说呢,拿这个41,你回到这儿搜索一下,41这儿呢,五十四一百三十三,55都在这儿呢,是不?各位诶好了,来咱接着往下看啊,还有就是呢,它源码上有一些升级,你比如说实现响应式的原理变了,不再是用那个object。
07:03
了说老师我的妈呀,这可咋整啊,那咱原来分析那些东西,你做那PPT画的图那不都废了吗?各位你有了之前viewr的那个基础啊,你再来听这个proxy去实现响应式,同学你发现如出一辙啊,是很类似的对不?也就是说同学你要是会骑自行车,你要学电动车,它也没那么难是不?所以说你之前学的东西没有白费啊,对你现在还是有帮助的。还有就是呢,这个VI呢,它重写了这个虚拟盗的实现,就是能让这个虚拟盗的对比啊更快了啊,他升级了一下这个算法,还有就是呢,他重新写了下这个tree shaking tree shaking是啥呢?各位这东西吧,总有人误会它,哎,总觉得好像tree shaking是一个库啊,Shaking是一个方法,同学这玩意儿,它就是一名词,哎,你把它复制一下,回到咱们这个MDN里面,哎你就搜tree shaking出来了吧,点击同学你看这来来来来来啥术语表,它不是window上的一个什么属性方法就是一个术语,明白不?哎tree什么意思呀,大树。
08:03
Shaing呢?摇起来是吧?摇起来那tree shaing就是树摇,被树摇啥意思呀?哎,同学想象这么一个场景是吧?哎,一棵大树上啊,很多年了,这树上边有一些枯枝败叶,然后呢,你抱着这个树疯狂的摇动,那我问你落下来的是什么?落下来的都是没有用的东西,对吧?那都是枯枝败叶吗?那么那些健壮的树枝是不是留在了大树上啊?所以说同学你看生活中的tree shaking是干掉那些枯枝败叶,那我们编码里的tree shaking呢?哎,其实就是剔除掉那些你没有用到的代码,比如说啊,你为了实现某个功能,哗一下,你把这么大的一个库啊给它引进来了,但是其实呢,嘿,你只用到了这里面一丢丢的东西,哎,那经过这个tree筛之后,同学,他就把整个橙色区域,就是那些无关的代码,你没有用到的代码就摇掉了,诶能让你的打包体积呢更小,OK哦,也就是说同学这东西啊,是一个术语,你想实现你得自己写下去,是不?谁支持这个tree shaking呢?同学,其实啊,你要学会咱上硅谷的这个东西啊,你就知道web。
09:03
本身就支持tree shaking是吧?各位,哎,回到笔记里咱再往下说啊,第三个就是view u3所带来的什么呢?就是拥抱TS。哎,同学,这可以说啊,是VI3众多亮点中最打眼的一个,哎,拥抱TS,我们一直拿GS写东西是不是?哎,但你要知道还有一个脚本语言,哎叫TS是微软出的是不?哎,如果说没有学过TS小伙伴,我给你个建议,去看看咱上硅谷的TS教程是吧?同学你放心,以后肯定是一个拥抱TS的前端时代啊,现在写GS终归写以后,肯定是这东西有趋势对吧,它是强类型的啊,然后VU3里呢,可以去更好的支持这个TS,说老师V2就不支持呗,不是的,各位V2里边也能写TS,但是配置呢,就有点麻烦,也没有什么官方给我们的一些渠道,你知道吧,得自己配一些loader,反正也能写,也能配出来,但是就麻烦,但是比如三呢,它里边能够更好的去支持这个TS了,但是有一个事儿啊,我得先跟各位说明白,我们这套教程对标的是入门view的人员,知道不就你没学过框架,没学过TS,我们面对的是这些同学是不?所以说在这儿呢,我不会在我的课堂里面去拿TS给你。
10:12
接VIEW3的东西,哎,就接下来我给你讲的这么多东西啊,这六大点我都不会拿TS去写的啊,说老师那我就想看看,那怎么办?咱之前上硅谷是不是发过一个TS加三的这么一个教程啊,哎,自己呢可以去看一看好吧各位这儿呢我就不多聊了,说老师TS难不难,怎么说呢?同学用心去体会他也没多难是吧,其实就是对类型进行了一番更严格的校验,什么接口泛型啥的是吧,也不是很难,可以去看一下,OK啊,这是众多亮点中的最打眼的一个,来同学第四个才是我们的课堂上更关注的是吧?各位就说这个吧,打包体积减少41%,你是41 31 21跟我都没关系,对吧,我就知道你快,哎,你少就得了是吧,甚至咱说啊,你源码里边怎么改的,我也不去关心,你爱咋实现咋实现呗,反正就是响应式的,我一改数据页面就变就得了呗,是不各位啊,但是在这这么说啊,回头咱还得说说啊,他这个pro是怎么实现的,咱还会拿这个代码给大家手写一下呢,是不?诶,但是咱说应用上来说,更关注的就是第四个了,是不是说白了各位。
11:12
这配置不是这个了,那叫什么名字呀?那这东西不写了,那替代者是谁呀?我们更关注的是这些是不是从编码的角度,首先第一个他提出了一个东西,叫做compos API,什么意思呢?叫做组合API,先不用理解这概念,说老师怎么就组合了,为啥不叫分散API呢?为啥不叫小猪佩奇API呢?一会儿我会给大家解释的啊,那这里面包含什么setup呀,Ref reactive啊,什么watch watch effect等等这些吧,是吧,咱都会讲到。还有就是他提出了一些新的内置组件,那比如说fragment文档碎片啊,TE part,还有这个suspens这些我们也会说到,还有一些其他的改变,就是新的生命周期钩子啊啊,以及这个date的修改啊,你看人家说了,Date选项应该始终被声明为一个函数,大家记不记得我们在讲比U2的时候,当年我们没有学组件的时候,我那date可是直接就拿一对象怼出来的是不是?但是现在video u3里边变了,就这种写法不存在了,你组不组建我也不允许你这样写了,Date就是个函数是不?还有就是移除了什么呢?Key code啊,作为v on的这。
12:12
个修饰符同学还记得吗?咱们写一个那个按下回车啊,那怎么写的这at符,然后呢,Keep up之前你咋写的,是不是点enter完,咱还有一个写法,我那也说过是不是可以点13呀,当时咱就说了这种方式不推荐大家用,结果你看看VIEW3里咋的移除了,也就是说VIEW3里边你在k up点13不可以了是不?各位哎,这些都算是一些其他的小改变啊,来吧各位,我们整体看一下啊,VIEW3的简介呢,咱给他说完了,带来了什么?性能的提升,源码的升级,拥抱了TS以及新特性,这些东西是需要我们重点关注的啊,出去跟面试官聊,各位你聊的也是这个源码咋升级的,用pro是咋实现这个响应式的,有什么优势,对吧?人家为什么要这么做啊?还有就是这个面试官可能会问你啊,说那你说说新特性吧,都有啥呀,哎,你可以再跟他聊聊,这个面试官能问你这个吗?来打包大小减少多少,不闲的吗?是不?各位哎,OK,这个说完了,就是VI3的这么一个简介啊,那么从下一条。
13:12
小节开始呢,咱们就真正的去上手玩一玩,它就进入第一个,哎,创建view3.0的这么一个工程,那这一小节呢,我们先听。
我来说两句