一、vue样式style层次分析
1、样式可以在main.js、模块js文件、组件style、组件script标签内，index.html文件内引入，不同位置引入的样式有什么关系。
2、总结：
（1）样式从main.js的入口处开始顺序加载（注意顺序的意思），
（2）遇到组件则加载组件script标签内引入的样式，
（3）先处理完所有script中引入的样式，
（4）再处理style，style按包含关系从外到内加载（注意这个从外到内的意思）
3、这些页面都是固定的，如果是异步加载页面，当路由切换到另一个页面时，此页面原来的样式是否会删除，当前页面的样式会添加到哪里？
先只会加载到app.vue的style，再点击那个页面就先加载页面的js文件，然后再执行script加载script里引入的css，再加载style里的css
4、如果都是异步加载组件，会怎么样？
如果ComA和ComB都是异步组件，则先打开哪一页就加载哪一页的script和style
总结：
（5）异步组件先显示的先加载，
（6）没有显示的页面或组件不加载style
5、一个组件内可以定义不止一个style，并且有scoped的style和没有scoped的style可以并存，它们会按照所定义的顺序加载（注意顺序加载的意思），并跟普通CSS拥有一样的权重优先机制。
6、通过main.js进入的样式是在head中显示，所以如果我们再body中定义样式是可以把head标签内的同名样式覆盖掉的，但是要注意的是在body内引入的样式，因为已经不在main.js控制范围内，也就是不参与打包，所以必须定义在static静态资源目录内。
二、性能优化
1、v-show、v-if使用：权限问题使用v-if；频繁使用用v-show，不频繁使用用v-if；v-if减少了页面中dom总数
2、不要在模板中写过多的表达式
3、循环调用子组件时使用key：key可以唯一标识一个循环个体，key不能重复，当vue使用v-for更新已渲染元素时，就会默认采用“就地复用”策略。
4、对路由进行懒加载
三、路由模式解析
1、路由是由多个url组成，使用不同的url可以相应的导航到不同的位置
2、浏览器中对页面的访问是无状态的，所以我们在切换不同的页面时都会重新进行请求，而实际使用vue和vue-router开发就会明白，在切换页面时是没有重新进行请求的，使用起来就好像页面是有状态的，这是什么原因呢。这其实是借助了浏览器的History API来实现的，这样可以使得页面跳转而不刷新，页面的状态就被维持在浏览器中了
3、hash模式原理：window.onhashchange事件
关键的一点是：因为hash发生变化的url都会被浏览器记录下来，从而你会发现浏览器的前进后退都可以用了，同时点击后退时，页面字体颜色也会发生变化。这样一来，尽管浏览器没有请求服务器，但是页面状态和url一一关联起来，后来人们给它起了一个霸气的名字叫前端路由，成为了单页应用标配。
4、history模式：切换（back / forward / go）和修改（pushState / replaceState）
通过pushstate把页面的状态保存在state对象中，当页面的url再变回这个url时，可以通过event.state取到这个state对象，从而可以对页面状态进行还原，这里的页面状态就是页面字体颜色，其实滚动条的位置，阅读进度，组件的开关的这些页面状态都可以存储到state的里面。