VUE前端面试题集合.pdf

Vue面试题集合

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

（）仅在页面初始化时加载相应的、和。

SPAsingleapplicationWebHTMLJavaScriptCSS

一旦页面加载完成，不会因为用户的操作而进行页面的重新加载或跳转；取而代之的是

SPA

利用路由机制实现内容的变换，与用户的交互，避免页面的重新加载。优点：

HTMLUI

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

基于上面一点，相对对服务器压力小；

SPA

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

缺点：

初次加载耗时多：为实现单页Web应用功能及显示效果，需要在加载页面的时候将

、统一加载，部分页面按需加载；

JavaScriptCSS

前进后退路由管理：由于单页应用在一个页面中显示所有的内容，所以不能使用浏览器的前

进后退功能，所有的页面切换需要自己建立堆栈管理；

SEO难度较大：由于所有的内容都在一个页面中动态替换显示，所以在SEO上其有着天然

的弱势。

2、v-show与v-if有什么区别？

v-if是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地

被销毁和重建；也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一

次变为真时，才会开始渲染条件块。v-show就简单得多——不管初始条件是什么，元素总

是会被渲染，并且只是简单地基于的“”属性进行切换。所以，适用于

CSSdisplayv-if

在运行时很少改变条件，不需要频繁切换条件的场景；v-show则适用于需要非常频繁切换

条件的场景。

3、Class与Style如何动态绑定？

Class可以通过对象语法和数组语法进行动态绑定：

对象语法：

divv-bind:class={active:isActive,text-danger:hasError}/div

data:{

isActive:true,

hasError:false

}

数组语法：

divv-bind:class=[isActive?activeClass:,errorClass]/div

data:{

activeClass:active,

errorClass:text-danger

}

Style也可以通过对象语法和数组语法进行动态绑定：

对象语法：

divv-bind:style={color:activeColor,fontSize:fontSize+px}/div

data:{

activeColor:red,

fontSize:30

}

数组语法：

divv-bind:style=[styleColor,styleSize]/div

data:{

styleColor:{

color:red

},

styleSize:{

fontSize:23px

}

}

4、怎样理解Vue的单向数据流？

所有的prop都使得其父子prop之间形成了一个单向下行绑定：父级prop的更新会向下

流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而

导致你的应用的数据流向难以理解。额外的，每次父级组件发生更新时，子组件中所有的

prop都将会刷新为必威体育精装版的值。这意味着你不应该在一个子组件内部改变prop。如果你这样

做了，会在浏览器的控制台中发出警告。子组件想修改时，只能通过派发一个

Vue