vue笔试题——整理三十一道常见题

1.vue中的v-if和v-show是做什么用的，两者区别是什么？

• v-if 是“真正的”条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
• v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
• 相比之下， v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
• 一般来说， v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件不太可能改变，则使用 v-if 较好。

2. 如何让css只在当前组件中起作用？

在当前组件的<style>修改为<style scoped>
题外话：（scoped是局部样式，scss: 用npm install sass-loder node-sass --save 下载；stylus: 用npm install stylus stylus-loader --save 下载）
想要改变ui框架原有样式scss可以用/deep/或::v-deep

3.v-model是什么？怎么使用？ vue中标签怎么绑定事件？

• 可以实现双向绑定，指令（v-class、v-for、v-if、v-show、v-on），使用地方:文本域，select框，input配合value使用。
• vue的model层的data属性。绑定事件：<input @click=doLog() />

题外话：（移动端click有300ms延迟问题，可以引入fastClick，下载：npm install fastclick,引入：import FastClick from “fastclick” ; FastClick.attach(document.body); ）

4.vue-loader是什么？使用它的用途有哪些？

• 解析.vue文件的一个加载器，跟template/js/style转换成js模块。
• 用途：js可以写es6、style样式可以scss或less、template可以加jade等。

5.NextTick是做什么的？

$nextTick是在下次DOM更新循环结束后之执行迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的DOM。
场景：需要在视图更新之后，基于新的视图进行操作

6.Vue组件data为什么必须是函数？

• 因为js本身的特性带来的，如果data是一个对象，那么由于对象本身属于引用类型，当我们修改其中的一个属性时，会影响到所有的Vue实例的数据。如果将data作为一个函数返回一个对象，那么每一个实例的data属性都是独立的，不会相互影响。

7.keep-alive的了解

keep-alive是vue内置的一个组件，可以使被包含的组件保留状态，避免重新渲染dom，使用场景几乎和渲染有关系

8.vue中key的作用

• key的特殊属性主要用在Vue的虚拟dom算法，在新旧nodes对比时辨识VNodes.如果不使用key，Vue会使用一种最大限度减少动态运算并且可能的尝试修复/再利用相同元素的算法，使用key,它会基于key的变化重新排列元素顺序，并且会移除key不存在的元素。
• 有相同父元素的字元素必须具有独特的key，重复的key会造成渲染错误。
• 

9.Vue的双向数据绑定原理是什么？

vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
具体步骤：

• 第一步：需要observe的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter

这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化

• 第二步：compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图
• 第三步：Watcher订阅者是Observer和Compile之间通信的桥梁，主要做的事情是:
  1、在自身实例化时往属性订阅器(dep)里面添加自己 2、自身必须有一个update()方法
  3、待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。

第四步：MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据model变更的双向绑定效果。

10.在vue中使用插件的步骤

1. 下载npm install xxx
2. 引入（根据api文档引入），use
3. 根据api在组件中使用和配置

11. watch和computed差异

• watch是进行数据监听，然后进行相应操作，执行方法等computed和methods的合体使用，比较耗性能，与vue性能优化相背而驰，尽量少使用！
• computed是数据改变进行相应的数据变化，由老数据引发新的数据（return返回），会利用缓存机制对数据进行缓存，只有当依赖书据变化的时候才会进行相应变化。

12.你们vue项目是打包了一个js文件，一个css文件，还是有多个文件？

根据vue-cli脚手架规范，一个js文件，一个css文件。

13.vue组件之间如何传值通信？

父到子：

• 子组件在props中创建一个属性，用来接收父组件穿过来的值；
• 在父组件中注册子组件；
• 在子组件标签中添加props中创建props中创建的属性；
  
  

14.vue-cli项目中src目录每个文件夹和文件的用法？

- main.js：入口文件
- router.js：前端路由的配置文件
- store.js：vuex的配置文件
- app.vue：根组件
- views：路由组件
- components：在路由组件中引入的其他组件
- asssets：在vue文件中使用相对路径引入的资源文件

15. axios是什么？怎么使用？描述使用它实现登录功能的流程？

请求后台资源的模块。npm install axios -S装好，
然后发送的是跨域，需在配置文件中config/index.js进行设置。
后台如果是Tp5则定义一个资源路由。js中使用import进来，
然后.get或.post。返回在.then函数中如果成功，
失败则是在.catch函数中

16.vue跨域请求接口代理方式

在config/index.js配置一下
然后重启服务
axios.get("/api/xxx")就可以了

17.vue页面的生命周期？

1. beforeCreate
2. created
3. beforeMount
4. mounted
5. beforeUpdate
6. updated
7. activated
8. deactivated
9. beforeDestroy
10. destroyed

18.详细说一下你对vue生命周期的理解？

总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。

• 创建前/后： 在beforeCreated阶段，vue实例的挂载元素 $
  el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，$el还没有。
• 载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。
• 更新前/后：当data变化时，会触发beforeUpdate和updated方法。
• 销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在

19.Dom渲染在哪个周期中就已经完成？

• Dom渲染在mounted中就已经完成了

20.单页面应用的优缺点

21.路由的跳转方式

一般有两种：

1. < router-link to=“home”> router-link标签会渲染为< a >标签，在tamplate中跳转都是这种；
2. 另一种变成是导航，也就是通过js跳转，比如router.push（“home”）

22.$router 和 $route的区别

• $router 为VueRouter实例，想要导航到不同的url，则使用 $router.push方法；
• $route 为当前router跳转对象里面可以获取name、path、query、params等。

23.怎么定义vue-router的动态路由？怎么获取传过来的动态参数？

在router目录下的index.js文件中，对path属性上加上/：id ,使用router对象的params.id

24.vue-router有哪几种导航钩子？

有多种方式可以在路由导航发生时执行钩子：
1.全局钩子；
2.单个路由独享的；
3.组件级的

25.对于vue了解多少，什么是Vuex，VueRouter

vuex为状态管理，它集中存储管理应用的所有组件的状态，可以理解成一个全局仓库
VueRouter是路由（spa）单页面应用的方式
为什么通过vuex的mutation修改state中的参数就不会报错，而直接更改state中的参数就会报错
vue 2取消冒泡全部$emit 用vuex 定义全局state组件修改state 父组件访问state值

26.为什么通过Vuex的motution修改state中的参数就不会报错，而直接修稿state中的参数就会报错？

1.使用vuex修改state时，有两种方式：
（1）可以直接使用this.$store.变量=xxx；
（2）this. $store.dispatch、this. $store.commit;
2.异同点：
（1）共同点：能够修改state里的变量，并且时响应式的（能触发视图更新）
（2）不同点：若将vue创建store的时候传入strict true，开启严格模式，那么任何修改state的操作，只要不经过mutation的函数，vue就会throw error：[vuex] Do not mutate vuex store outside mutation handlers.

27.使用vuex只需执行Vue.use(Vuex)，并在vue的配置中传入一个store对象的实例，store是如何实现注入的？

28.vuex原理

29.vuex有哪几种属性？

有五种，分别是 State、 Getter、Mutation 、Action、 Module

30.对比jquery，vue有什么不同？

• jquery专注视图层，通过dom去实现页面的一些逻辑渲染；vue专注于数据层，通过数据的双向绑定，最终表现在dom层面，减少了dom操作。
• vue使用组件化思想，使得项目子集职责清晰，提高了开发效率，方便重复利用，便于协同开发

31.MVVM框架是什么？它和其他框架（jquery）的区别是什么？哪些场景合适？

一个model+view+viewModel框架，数据模型model，viewModel连接两个 区别：vue数据驱动，通过数据来显示视图层而不是节点操作。
场景：数据操作比较多的场景，更加便捷