vue面试题，知识点汇总(有答案)

一. Vue核心小知识点

1、vue中 key 值的作用

key 的特殊属性主要用在 Vue的虚拟DOM算法，在新旧nodes对比时辨识VNodes。如果不使用key，Vue会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用key，它会基于key的变化重新排列元素顺序，并且会移除key不存在的元素。

有相同父元素的子元素必须有独特的key。重复的key会造成渲染错误。

最常见的用例是结合 v-for:

1 2 3

<ul>   <li v-for="item in items" :key="item.id">...li> ul>

它也可以用于强制替换元素/组件而不是重复使用它。当你遇到如下场景时它可能会很有用:

完整地触发组件的生命周期钩子
触发过渡

1 2 3

<transition>   <span :key="text">{{ text }}span> transition>

   当 text 发生改变时， 会随时被更新，因此会触发过渡。

2、vue中子组件调用父组件的方法

     子组件调用父组件的方法可以使用this.$emit() 

3、vue等单页面应用及其优缺点

优点：
1、具有桌面应用的即时性、网站的可移植性和可访问性。
2、用户体验好、快，内容的改变不需要重新加载整个页面。
3、基于上面一点，SPA相对对服务器压力小。
4、良好的前后端分离。SPA和RESTful架构一起使用，后端不再负责模板渲染、输出页面工作，web前端和各种移动终端地位对等，后端API通用化。
5、同一套后端程序代码，不用修改就可以用于Web界面、手机、平板等多种客户端；

缺点：
1、不利于SEO。（如果你看中SEO，那就不应该在页面上使用JavaScript，你应该使用网站而不是Web应用）
2、初次加载耗时相对增多。
3、导航不可用，如果一定要导航需要自行实现前进、后退。
 

 

---

 

二. v-show和v-if指令的共同点和不同点?
 

• v-show指令是通过修改元素的displayCSS属性让其显示或者隐藏

• v-if指令是直接销毁和重建DOM达到让元素显示和隐藏的效果（注意：v-if 可以实现组件的重新渲染）

   

---

 

三. 如何让CSS只在当前组件中起作用?
 

将当前组件的