vue常见的一些面试题

以你之姓@ 2022-08-28 05:54 201阅读 0赞

1.**对于**Vue**是一套渐进式框架的理解**

渐进式代表的含义是：主张最少。
    Vue可能有些方面是不如React，不如Angular，但它是渐进
    的，没有强主张，你可以在原有大系统的上面，把一两个组
    件改用它实现，当jQuery用；也可以整个用它全家桶开发，
    当Angular用；还可以用它的视图，搭配你自己设计的整个下
    层用。你可以在底层数据逻辑的地方用MVVM和设计模式的
    那套理念，也可以函数式，都可以，它只是个轻量视图而
    已，只做了自己该做的事，没有做不该做的事，仅此而已。

2.**请列出至少****4**个**vue基本指令，并简要说明其作用。**

v-model 多用于表单元素实现双向数据绑定
    v-for 格式： v-for="字段名 in(of) 数组json" 循环数组或
    json,需要注意从vue2开始取消了$index
    v-show 显示内容
    v-if 显示与隐藏
    v-else 必须和v-if连用 不能单独使用 否则报错 模板编译错
    误
    v-bind 动态绑定 作用： 及时对页面的数据进行更改,可以简
    写成:
    v-on:click 给标签绑定函数，
    v-text 解析文本
    v-html 解析html标签

3.**v-show** **与** **v-if** **有什么区别？**

v-if 是真正的条件渲染，因为它会确保在切换过程中条件块内
    的事件监听器和子组件适当地被销毁和重建；也是惰性的：
    如果在初始渲染时条件为假，则什么也不做——直到条件第
    一次变为真时，才会开始渲染条件块。
    v-show 就简单得多——不管初始条件是什么，元素总是会被
    渲染，并且只是简单地基于 CSS 的 “display” 属性进行切换。
    所以，v-if 适用于在运行时很少改变条件，不需要频繁切换条
    件的场景；v-show 则适用于需要非常频繁切换条件的场景

4.**说说你对** **SPA** **单页面的理解，它的优缺点分别是什么？**

SPA（ single-page application ）仅在 Web 页面初始化
    时加载相应的 HTML、JavaScript 和 CSS。一旦页面加载
    完成，SPA 不会因为用户的操作而进行页面的重新加载或
    跳转；取而代之的是利用路由机制实现 HTML 内容的变
    换，UI （视图template的内容）与用户的交互，避免页
    面的重新加载。
    
    优点：用户体验好、快，内容的改变不需要重新加载整个
    页面，避免了不必要的跳转和重复渲染；基于上面一点，
    SPA 相对对服务器压力小；前后端职责分离，架构清晰，
    前端进行交互逻辑，后端负责数据处理；
    
    缺点：初次加载耗时多：为实现单页 Web 应用功能及显
    示效果，需要在加载页面的时候将 JavaScript、CSS 统一
    加载，部分页面按需加载；前进后退路由管理：由于单页
    应用在一个页面中显示所有的内容，所以不能使用浏览器
    的前进后退功能，；SEO 难度较大：由于所有的内容都在一个页面中动态替换显示，所以在 SEO 上其有着天然的弱势

5.**单页应用和多页应用的区别** 【了解】

<table> 
 <thead> 
  <tr> 
   <th></th> 
   <th>单页面（SPA）</th> 
   <th>多页面（MPA）</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>刷新方式</td> 
   <td>页面局部刷新或更改</td> 
   <td>整页刷新</td> 
  </tr> 
  <tr> 
   <td>url 模式</td> 
   <td><a href="http://a.com/#/pageone" title="a.com/#/pageone" rel="nofollow">a.com/#/pageone</a>&nbsp;<a href="http://a.com/#/pagetwo" title="a.com/#/pagetwo" rel="nofollow">a.com/#/pagetwo</a></td> 
   <td><a href="http://a.com/pageone.html" title="a.com/pageone.html" rel="nofollow">a.com/pageone.html</a>&nbsp;<a href="http://a.com/pagetwo.html" title="a.com/pagetwo.html" rel="nofollow">a.com/pagetwo.html</a></td> 
  </tr> 
  <tr> 
   <td>用户体验</td> 
   <td>页面片段间的切换快，用户体验良好</td> 
   <td>页面切换加载缓慢，流畅度不够，用户体验比较差</td> 
  </tr> 
  <tr> 
   <td>转场动画</td> 
   <td>容易实现</td> 
   <td>无法实现</td> 
  </tr> 
  <tr> 
   <td>数据传递</td> 
   <td>容易</td> 
   <td>依赖 url传参、或者cookie 、localStorage等</td> 
  </tr> 
  <tr> 
   <td>搜索引擎优化(SEO)</td> 
   <td>需要单独方案、实现较为困难、不利于SEO检索 ，可利用服务器端渲染(SSR)优化</td> 
   <td>实现方法简易</td> 
  </tr> 
  <tr> 
   <td>适用范围</td> 
   <td>高要求的体验度、追求界面流畅的应用</td> 
   <td>适用于追求高度支持搜索引擎的应用</td> 
  </tr> 
  <tr> 
   <td>开发成本</td> 
   <td>较高，常需借助专业的框架</td> 
   <td>较低 ，但页面重复代码多</td> 
  </tr> 
  <tr> 
   <td>维护成本</td> 
   <td>相对容易</td> 
   <td>相对复杂</td> 
  </tr> 
 </tbody> 
</table>