总结一些前端面试题（解析）

1.vue的优点

1. 轻量级框架：只关注视图层，是一个整理数据的视图集合，整理后大小只有几十KB
2. 简单易学：国人开发，中文文档，不存在语言障碍，方便学习和理解。
3. 渐进式框架：你想用是什么功能特性就可以按需使用，你不想使用的部分功能可以先不使用。所以有以下三种场景：
   1. 场景一：公司刚开始一个项目，技术人员对Vue的掌握也不足够。那么我们就不能使用VUE了么？当然不是，如果你只是使用VUE做些基础操作，如：页面渲染、表单处理提交功能，那还是非常简单的，成熟技术人员上手也就一两天。完全可以用它去代替jquery。并不需要你去引入其他复杂特性功能。
   2. 场景二：我们项目用了VUE，使用的效果也挺好。那么我们想逐渐实现代码组件化，实现代码的复用，或者是基于组件原型的跨项目的代码复用。那么我们就可以引入VUE的components组件特性了
   3. 场景三：我们的项目规模逐渐的变大了，我们可能会逐渐用到前端路由、状态集中管理、并最终实现一个高度工程化的前端项目。这些功能特性我们可以逐步引入，当然不用也可以。

4.  视图、数据、结构分离：Vue将数据与视图分开处理，使数据修改更加简洁，只需要修改数据就能完成相关操作。

5.  操作虚拟DOM：DOM操作是非常耗费性能的， 不再使用原生的DOM操作节点，极大解放DOM操作，但具体操作的还是DOM不过是换了另一种方式。

6. 数据双向绑定：保留了angular的特点 在数据处理方面更加简单

7. 组件化：保留了react的优点，实现了html的封装和重用，在构建单页面应用方面有着独特的优势；

8. 运行速度快，这才是vue立于三大框架中最为骄傲的一点 在运行性能和效率上就算是和世界使用了第一的react相比 vue依旧占据着先天优势

2. Vue组件间传值 

Vue2与Vue3组件间通信方式总结_Magic_baby的博客-CSDN博客

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

共同点：都能控制元素的显示和隐藏

不同点：实现本质方法不同

        v-show：本质就是通过控制css中的display属性值设置block（显示）为none（隐藏），只会编译一次；

        v-if：是动态的向DOM树内添加或者删除DOM元素，若初始值为false，就不会编译了。而且v-if不停的销毁和创建比较消耗性能。
总结：如果要频繁切换某节点     ---->  v-show    (切换开销比较小，初始开销较大)。

           不需要频繁切换节点使用  ---->  v-if        （切换开销比较大，初始开销比较小）。

4. 如何让css只在当前页面有效

通过在组件中的style 标签加上 scoped 属性

5. keep-alive 的作用是什么

        在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性

一文彻底弄懂scoped的原理,导致的问题及解决的办法_麦兜:)的博客-CSDN博客_scoped原理

6.  说出几种Vue当中的指令和它们的用法

v-model双向数据绑定；
v-for循环；
v-if v-show 显示与隐藏；
v-on事件，可以监听多个方法；v-once: 只绑定一次。

7. 在Vue中获取DOM节点的方法（共三种）

        1. vue官方方法：ref（推荐指数：★★★★★）：

        vue中的ref是把当前dom元素 “ 抽离出来 ” ，只要通过 this.$refs就可以获取到（注意this指向），此方法尤其适用于父元素需要操作子组件的dom元素，这也是子传父传递数据的一种方法

        2.  原生js操作dom（推荐指数：★★★★☆）：

        原生js获取dom就很简单了，例如：根据id、class、当前元素的上一个元素等等

        3.  jQuery操作dom（推荐指数：★☆☆☆☆）：        

        只要拿jQuery的选择器，选中相应的dom进行操作就可以了，但是大家都知道jQuery获取元素是查找页面所有，相当于“循环”所有元素直至找到需要的dom，但是vue是单页面的，jQuery获取dom并不只是获取vue当前页面，而是从根路由开始查找所有，当其他页面出现相同的元素，也会被获取到，而且jQuery操作的dom，如果是根据动态获取数据渲染的，那么写在mounted里的操作方法将会失效，必须放到updated里，这样会导致有些操作被执行多遍，所以还是不建议在vue中使用jQuery。

 8. vue-loader 是什么， 使用它的用途有哪些

Loader直译为"加载器"。Webpack将一切文件视为模块，但是webpack原生是只能解析js文件，如果想将其他文件也打包的话，就会用到loader。 所以Loader的作用是让webpack拥有了加载和解析非JavaScript文件的能力。

Vue-loader 是vue文件的一个加载器，可以将template、js、style转换成js模块

用途：JS中可以写ES6的语法，style样式可以scss或less、template可以加jade等。

9.  为什么使用key

key的作用是为了在diff算法执行时更快的找到对应的节点，提高diff速度。

vue中循环需加 :key=“唯一标识” ，唯一标识可以是item里面id index 等，因为vue组件高度复用增加key可以标识组件的唯一性，为了更好的区别各个组件，key的作用主要是为了高效的更新虚拟DOM。

10. v-model 的使用

v-model是用于表单数据的双向数据绑定，是一个语法糖。