这篇文章可以入选评委评选的最佳手记吗?期待ing…
✔(15) 2-12 生命周期函数的新写法 ✔(16) 2-13 Provide,Inject,模版 Ref 的用法 ✔(17)3-2 VueCLI 的使用和单文件组件(1) ✔(18)3-3 VueCLI 的使用和单文件组件(2) ✔(19) 3-4 使用单文件组件编写 TodoList ✔(20)3-5 Vue-Router 路由的理解和使用(1) ✔(21)3-6 Vue-Router 路由的理解和使用(2) |
|
我们始终围绕是什么+为什么+怎么用 来输出所学收获 (1)是什么: import 这种语法叫做一个懒加载的语法,异步加载路由 (2)怎么玩: 写法参考demo示例。 |
|
主要内容:----------------------good start----------------------
还有一个问题要给大家解答:
我们可以看到上面 路由的配置里面,当访问根路径的时候直接就展示Home组件,
而下面为什么会有一个import这样的语法,【第19行】
实际上 import 这种语法叫做一个懒加载的语法,或者叫做异步加载路由。
什么意思?
回到页面上刷新。
比如说我现在在首页,我点开控制台:
点开 Network,然后清一下,然后选中 All这个选项。
当我点击About的时候:
大家看 about路径 ta用了这种异步加载的一个写法,当我点About的时候,
大家可以看到这个时候它会加载about点js这块的代码,
异步加载路由的意思是什么呢?
About页面,一开始当我进到Home这个页面的时候,实际上没有必要加载About页面的代码,
只有当我跳转到About页面的时候,才需要去把About页面的代码加载过来,
那么这个时候我们就可以用异步的这种import的写法去加载 About组件的代码,它可以做到什么呢?
这种写法可以做到,当我访问首页的时候,我并不会去加载About页面的代码,而只有你访问About页面的时候,我才会去加载About页面的代码,
没用的一些代码,如果我们访用访问不到的一些页面的代码,一开始我是可以不加载的,
只有你真正访问到这个页面的时候,我再去加载这样的代码,想要做到这一点,就得使用这种import这样的一个异步的语法了。
比如说像Login这种语法:
我并没有使用import对不对?直接写了组件,那就会有一个什么样的问题?
这种语法写出来的代码,一开始我虽然在首页,我刷新的时候在首页:
但是这个时候实际上你Login的代码也已经被下载下来了,你点Login你会发现它不会加载额外的任何代码:
也就是说当你访问首页的时候,虽然你现在用不到Login,但是你把Login的代码其实已经下载到你的浏览器的本地了,
这样做,
实际上在这个页面做加载的时候,
只访问首页的时候,
它是多加载了很多没有必要加载的内容的,
所以有的时候我们去写路由的时候,我们可以通过这种异步的写法去降低我们首屏需要加载代码的量,
让我们的首页或者说第一个访问的页面打开的速度更快。
但是如果你通过这种异步加载代码的方式,比如说用了这种import的语法,也会带来额外的一个问题就是说,
比如你现在在首页当你跳到About页的时候,它要去加载about点js,
然后再展示页面,
所以页面跳转的时候可能速度会有一些慢,会有一些卡顿,
所以这也是它所带来的一个不是特别好的点,
到底使用这种同步的路由,直接写这种路由,还使用异步的路由,
还是要根据大家的项目的具体要求来做。
比如说我们写一个后台项目,
页面之间切要求不是特别高,可以有一点卡顿,我们就可以使用这种 import异步的路由加载的这种方式,
而比如说你做一个C端很小的项目,它其实总共的代码量就没有多大,那么你做这种同步路由的方式也没有任何的问题,
它会让你切换页面的时候速度可能会更快一些,
具体怎么选择,大家可以根据自己的项目来去使用,适合于你的方式。