前端编程课件06-Vue3全家桶实战.pdf

Vue常⻅⾯试题

1.Vue基础

Vue(读⾳/vjuː/，类似于view)是⼀套⽤于构建⽤户界⾯的渐进式JavaScript框架。

全称是Vue.js或者Vuejs；

它基于标准HTML、CSS和JavaScript构建，并提供了⼀套声明式的、组件化的编程模型；

帮助你⾼效地开发⽤户界⾯，⽆论任务是简单还是复杂；

1.1Vue.js的特点

易⽤：Vuejs是⼀个渐进式的框架，相⽐于其它框架，它更简单，易学，上⼿快。

灵活：（渐进式）不断繁荣的⽣态系统，可以在⼀个库和⼀套完整框架之间⾃如伸缩。

⾼效：20kBmin+gzip运⾏⼤⼩；超快虚拟DOM；最省⼼的优化。

双向绑定：开发效率⾼。

基于组件的代码共享

Web项⽬⼯程化，增加可读性、可维护性

1.2什么是MVVM？

MVC和MVVM都是⼀种软件的体系结构

MVC是Model–View–Controller的简称，是在前期被使⽤⾮常框架的架构模式，⽐如iOS、前

端；

MVVM是Model-View-ViewModel的简称，是⽬前⾮常流⾏的架构模式；

通常情况下，我们也经常称Vue是⼀个MVVM的框架。

Vue官⽅其实有说明，Vue虽然并没有完全遵守MVVM的模型，但是整个设计是受到它的启发的。

1.3说说你对SPA单⻚⾯的理解，它的优缺点分别是什么？

SPA（singleapplication）仅在Web⻚⾯初始化时加载相应的HTML、JavaScript和CSS。⼀旦

⻚⾯加载完成，SPA不会因为⽤户的操作⽽进⾏⻚⾯的重新加载或跳转；取⽽代之的是利⽤路由机制实

现HTML内容的变换，UI与⽤户的交互，避免⻚⾯的重新加载。

优点：

⽤户体验好、快，内容的改变不需要重新加载整个⻚⾯，避免了不必要的跳转和重复渲染；

基于上⾯⼀点，SPA相对对服务器压⼒⼩；

前后端职责分离，架构清晰，前端进⾏交互逻辑，后端负责数据处理；

缺点：

初次加载耗时多：为实现单⻚Web应⽤功能及显示效果，需要在加载⻚⾯的时候将JavaScript、

CSS统⼀加载，部分⻚⾯按需加载；

前进后退路由管理：由于单⻚应⽤在⼀个⻚⾯中显示所有的内容，所以不能使⽤浏览器的前进后退

功能，所有的⻚⾯切换需要⾃⼰建⽴堆栈管理；

SEO难度较⼤：由于所有的内容都在⼀个⻚⾯中动态替换显示，所以在SEO上其有着天然的弱

势。

1.3v-show与v-if有什么区别？

⾸先，在⽤法上的区别：

v-show是不⽀持template；

v-show不可以和v-else⼀起使⽤；

其次，本质的区别：

v-show元素⽆论是否需要显示到浏览器上，它的DOM实际都是有存在的，只是通过CSS的display

属性来进⾏切换；

v-if当条件为false时，其对应的原⽣压根不会被渲染到DOM中；

开发中如何进⾏选择呢？

如果我们的原⽣需要在显示和隐藏之间频繁的切换，那么使⽤v-show；

如果不会频繁的发⽣切换，那么使⽤v-if；

1.4数组中的哪些⽅法会触发视图的更新？

Vue将被侦听的数组的变更⽅法进⾏了包裹，所以它们也将会触发视图更新，这些被包裹过的⽅法包

括：

push()

pop()

shift()

unshift()

splice()

sort()

reverse()

上⾯的⽅法会直接修改原来的数组，所以它们会触发视图更新。

其它数组的⽅法:

但是某些⽅法不会替换原来的数组，⽽是会⽣成新的数组，⽐如filter()、concat()和slice()，使⽤

这些⽅法将不会触发视图更新。

1.5Vue中v-for的key有什么作⽤？

在使⽤v-for进⾏列表渲染时，我们通常会给元素或者组件绑定⼀个key属性。

这个key属性有什么作⽤呢？

key属性主要⽤在Vue的虚拟DOM算法，在新旧nodes对⽐时辨识VNodes。

如果不使⽤key，Vue会使⽤⼀种最⼤限度减少动态元素并且尽可能的尝试就地修改/复⽤相同类型

元素的算法

使⽤key时，它会基于key的变化重新排列元素顺序，并且会移除/销毁key不存在的