前端面试题总结

答题思路

1. 总分的逻辑
2. 结合实际

(1)history和hash模式区别：

1. 它们都实现页面的跳转功能（跳转页面）

2. 它们的区别体现在3个方面:

   a.外观 : history模式的path路径不带#号，hash有#号
   
   b.原理 : hash模式使用onhashchange , history使用pushState , 导致有兼容性差异。hash模式兼容性好(对浏览器的兼容性好,onhashchange) , history的兼容性比hash模式差一些 (底层使用的API是html5的API :pushState ,对浏览器有一定要求)
   
   c.项目上线后有区别。history开发的项目,在打包上线之后,需要后端配置来支持,不然就会出现404页面。官网上有介绍
   

3. 我在开发中,没有特殊的要求,一般就用hash(默认值)。如果要修改模式,就改mode:"history"

4. 为啥会有404页面?

   a.history访问这个地址时 , http://www.xxx.com/find , 后端收到的req.url 是/find , 但是我们是单页面应用程序 , 我们只有一个资源是index.html ,没有资源叫/find , 所以就会报404
   
   b.hash访问这个地址时 , http://www.xxx.com/#/find , 后端收到的req.url 是/ , 有一个资源是index.html ,能正常显示
   

(2)v-if 和v-show的区别

相同点:

都是控制元素的显示和隐藏

区别:

体现在3个方面

1. 原理不同:

v-if 是通过向 DOM 树内创建和销毁来达到元素的显示和隐藏(触发生命周期,挂载前挂载后)

v-show 是通过控制元素的css样式display:none;来达到元素的显示和隐藏

2. 应用场景不同

如果元素需要频繁的显示和隐藏则使用v-show

切换不频繁,需要把组件销毁掉则使用v-if (不能和v-for连用)

3. v-if 可以配合其他指令来使用

v-if 可以配合的else,if else一起来使用