记录一个应届前端小白在面试中遇到的问题（vue）| 持续更新

记录一个应届前端在面试中遇到的问题（vue）| 持续更新

vue.js

Q: v-show和v-if指令的共同点和不同点
A:v-show指令是通过修改元素的display的CSS属性让其显示或者隐藏
v-if指令是直接销毁和重建DOM达到让元素显示和隐藏的效果
可以说v-if才是真正的条件渲染

Q:组件之间的传值
A:父组件与子组件传值
父组件通过标签上面定义传值
子组件通过props方法接受数据
子组件向父组件传递数据
子组件通过$emit方法传递参数

Q:非父子组件间的数据传递，兄弟组件传值
A:eventBus，就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件。也可使用vuex

Q:vue-router路由之间跳转有哪几种方式
A:声明式（标签跳转） 编程式（ js跳转）

Q: 如何让CSS只在当前组件中起作用
A:将当前组件的

Q:请列举出3个Vue中常用的生命周期钩子函数
A:created；mounted:；activated

Q:vue生命周期总共有几个阶段
A:总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。

Q:为什么避免 v-if 和 v-for 用在一起
A:当 Vue 处理指令时，v-for 比 v-if 具有更高的优先级，通过v-if 移动到容器元素，不会再重复遍历列表中的每个值。取而代之的是，我们只检查它一次，且不会在 v-if 为否的时候运算 v-for。

Q:VNode是什么？虚拟 DOM是什么？
A:Vue在 页面上渲染的节点，及其子节点称为“虚拟节点 (Virtual Node)”，简写为“VNode”。“虚拟 DOM”是由 Vue 组件树建立起来的整个 VNode 树的称呼。

Q:为什么使用key
A:当有相同标签名的元素切换时，需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们，否则 Vue 为了效率只会替换相同标签内部的内容。

Q:vue几种常用的指令
A:v-for 、 v-if 、v-bind、v-on、v-show、v-else

Q:什么是js的冒泡？
A:当父元素内多级子元素绑定了同一个事件，js会依次从内往外或者从外往内（？）执行每个元素的该事件，从而引发冒泡

Q:为什么要进行前后端分离？前后端分离的优势在哪里？劣势在哪里？
A:优点：前端专门负责前端页面和特效的编写，后端专门负责后端业务逻辑的处理，前端追求的是页面美观、页面流畅、页面兼容等。后端追求的是三高（高并发、高可用、高性能）让他们各自负责各自的领域，让专业的人负责处理专业的事情，提高开发效率
缺点：1 、当接口发生改变的时候，前后端都需要改变
2、 当发生异常的时候，前后端需要联调–联调是非常浪费时间的

Q:v-model作用是什么？
A:可以实现双向绑定

Q:Vue的双向数据绑定原理是什么
A:vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

Q:为什么要封装vue组件？
A:首先，组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块，解决了我们传统项目开发：效率低、难维护、复用性等问题。

Q:的作用是什么?
A:keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。

Q:分别简述computed和watch的使用场景
A:computed:当一个属性受多个属性影响的时候就需要用到computed
　例如： 购物车商品结算的时候
watch:当一条数据影响多条数据的时候就需要用watch
　例如：搜索数据

Q:nextTick的使用
A:当你修改了data的值然后马上获取这个dom元素的值，是不能获取到更新后的值，
你需要使用$nextTick这个回调，让修改后的data值渲染更新到dom元素之后在获取，才能成功。

Q:vue的两个核心点
A:数据驱动、组件系统

Q:单页面应用SPA首屏加载慢如何解决
A:安装动态懒加载所需插件；使用CDN资源

Q:vue和jQuery的区别
A:jQuery是使用选择器选取DOM对象，对其进行赋值、取值、事件绑定等操作，其实和原生的HTML的区别只在于可以更方便的选取和操作DOM对象，而数据和界面是在一起的。比如需要获取label标签的内容：$(“lable”).val();,它还是依赖DOM元素的值。
Vue则是通过Vue对象将数据和View完全分离开来了。对数据进行操作不再需要引用相应的DOM对象，可以说数据和View是分离的，他们通过Vue对象这个vm实现相互的绑定。这就是传说中的MVVM。

Q:mvvm 框架是什么
A:vue是实现了双向数据绑定的mvvm框架，当视图改变更新模型层，当模型层改变更新视图层。在vue中，使用了双向绑定技术，就是View的变化能实时让Model发生变化，而Model的变化也能实时更新到View。

Q:vue-router 是什么?它有哪些组件
A:vue用来写路由一个插件。router-link、router-view

Q:vue-router的两种模式
A:hash模式：即地址栏 URL 中的 # 符号；
history模式：window.history对象打印出来可以看到里边提供的方法和记录长度。利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定浏览器支持）。

Q:vuex是什么？
A:vue框架中状态管理。

Q:vuex有哪几种属性？
A:有五种，分别是 State、 Getter、Mutation 、Action、 Module