Vue面试88题，备战面试金选题库（欢迎补充）

VUE简介：

vue是一个构建数据驱动的web界面的渐进式框架。vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。vue.js借鉴了angular以及react的一些核心思想，总和各自的长处进行了操作以及性能等方面的优化，vue比angular简单，小，运行速度快，都有数据双向绑定，vue与react都使用virtualDOM虚拟DOM，都是提供了组件的视图组件，都有丰富的插件库，react使用jsx渲染页面，vue使用简单的模板。vue也提供了丰富的指令进行操作，同时也有生命周期（常问的面试题）所有的生命周期钩子自动绑定this上下文到实例中，因此可以访问数据，对属性和方法进行运算。vue.js使用了基于HTml的模板语法，允许开发者声明式地讲DOM绑定至底层vue实例的数据。所有的VUE.js模板都是合法的HTml，所以能被遵循规范的浏览器和HTML解析器解析，components进行组件模板加载。他还提供了动画插件，可以结合animate，css进行动画设置。还有自定义指令，过滤器等。然后就是vuex是一个转为vue.js的状态管理模式，vuex解决了组件之间同一状态的共享问题。当我们的应用遇到多个组件共享状态时，会需要多个组件依赖于同一状态，之后使用vuex就可以很好地解决。同时vue可以配合mint-ui这个ui框架快速构建移动端引用

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

在组件中的style前面加上scoped。

2.<keep-alive></keep-alive>标签的作用。

keep-alive是vue的内置组价，可以是被包含的组件保留状态，或避免重新渲染。它自身不会渲染DOM元素，也不会出现在父组件链中；使用keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁他们。include定义缓存白名单，keep-alive会缓存命中的组件；exclude定义缓存黑名单，被命中的组件将不会被缓存；max定义缓存组件上限，超出上限使用LRU的策略置换缓存数据。（内存管理的一种页面置换算法，对于内存中但又不用的数据快或者内存快叫做LRu，操作系统会根据那些数据属于LRU而将其移除内存而腾出空间来加载另外的数据）

3.vue组件中如何获取dom元素？

使用ref属性获取，在组件模板元素中添加ref属性，在js中使用this.$ref获取。

4.常用的vue指令有哪些和他的用法？

v-model 双向数据绑定（实现表单输入和应用状态之间的双向绑定）

v-for 循环；（基于一个数组或者对象渲染一个列表，vue2.0以上必须配合key使用）

v-if  显示与隐藏（根据表达式的值得真假条件渲染元素，在切换元素及他的数据绑定/组件被销毁并重建）

v-show显示与隐藏（根据表达式值得真假 切换元素的displayCSS属性）

v-bind动态绑定属性（一个或多个动态属性，或一个组件prop到表达式）；

v-on事件绑定（用于舰艇指定元素的DOM事件，比如：点击事件或者绑定事件监听器）；

v-once 适用于优化更新性能（只渲染元素和组件一次，随后的重现渲染，元素/组件及其所有的子节点将被视为静态内容并跳过，这可以）；

5.v-on指令可以同时监听多个函数吗？

可以的，v-on的事件监听类似于DOM原生api添加事件监听addEventListenter。可以用键对值得形式。事件类型：事件名  如果绑定多个相同事件，直接用逗号分割就行。

6.vue循环中为什么要是用key？

每次循环中要是用key给每个节点做唯一标识，保证一个循环中key的值各不相同，以避免vue中的重用机制造成可能的渲染异常，从底层来看，key属性主要为了diff算法就可以正确的识别此节点。并高效的更新细腻DOM。当vue中用v-for更新已渲染过的元素列表时,默认就地复用策略,如果数据项的数据被改变,vue 将不会移动 dom 元素来匹配数据项的顺序,而是简单的复用此处每个元素,并且确保它在特定的索引下显示已被渲染过的每个元素

7.vue组件配置对象中都偶有那些常用字段？分别是什么作用？

data 组建中的数据

props 组件的属性数据，接受父组件的传值

computed 计算属性

components 定义或引用子组件

methods 自定义函数

watch 属性监听

filters 数据过滤器

mounted 生命周期函数

8. 分别简书computed和watch 的使用场景。
（1）watch中的函数不需要调用，computed内部的函数调用时不需要加()

（2）watch的属性是监听，监听属性的变化。computed是计算属性，通过属性计算得来的

（3）computed是当一个属性受多个属性影响时用computed，像购物车结算，watch是当一条数据影响多条数据的时候用watch 像搜索数据

9.vue声明周期函数有哪些？

beforeCreate （组件刚刚实例化，data methods都还没被创建）

create（此时data和methods已经被创建 可以使用 末班还没被编译）

beforeMount （created的下一阶段 模板已经被编译 但还没挂载）

mounted（模板代码已经被加载在网页中 所有事情都已经准备好了 网页开始运行）

beforeUpdate（在网页运行期间data中的数据随时会因为需要更新 在这个阶段数据只是data中更新了但并没与在模板中进行更新所有还是网页显示之前的）

update（数据在data中更新逐渐更新在网页中）

keep-alive相关：

（activated：被keep-alive缓存的组件激活时调用

deactivated：被keep-alive缓存的组件停用时调用）

beforeDestroy（vue实例或者组件在销毁之前执行的函数 ，在这个函数中vue或者组件中所有的属性都是可以使用的）

destroy（vue实例或者组件被销毁后执行的函数 此时所有的东西都会被解绑所有子元素都会被销毁）

10.vue路由的钩子函数有哪些？

全聚德路由钩子函数：beforeEach ,afterEach

单个的路由狗子函数：beforeEnter

组件内的路由钩子函数：beforeRouteEnter ，beforeRouteleave ，beforeRouteUpdate

11.介绍以下vue中组件内的路由守卫（即路由的生命周期/钩子函数），有哪些参数（to，from，next）
vue 组件中的路由钩子方法有

beforeRouterEnter （进入路由前调用，这里组件还未创建，不能使用this）

beforeRouterUpdate（路由更新之前被调用，组件不会重新初始化。可以使用this）

beforeRouterleave（离开路由之前被调用，可以访问里面的this属性）

方法里面都有是哪个参数：

to:即将要进入的目标路由对象；

from ：当前导航即将要离开的路有对象

next：调用该方法后，才能进入下一个路由钩子函数

12.vue中数据绑定是怎么实现的？双向绑定指令v-model本质是什么？

vue组件data中的数据在组件创建时，都会被改造为set,get类型的属性，当数据发生改变时set方法就会调用，set方法中添加了冲新渲染的代码。

view层输入值影响data的属性值，data的属性值，data属性值改变会更新view的数值变化

v-model相当于 v-bind:value加v-on:input

13.vue中怎么实现非父子组件之间的传值？

在项目规模不是特别大时，可以创建一个空组件作为总线，项目中其他组件都可以通过总线进行传值。

在大型项目中，可以使用vuex进行数据管理，将数据统一房早store中进行管理。
也可以在路由跳转时，通过路传值。

14.vue中路由如何进行传值？

（1）使用url 拼接字符串的形式传值，使用$route.query接收

（2）使用友好URl传值 使用$route.params 接收

（3）使用命名路由params字段传值 使用$route.params接收

（4） 使用query对象传值 使用$route.query接收

15.vue中有哪些数据传递方式？

（1）组件传值：父传子，通过props属性或slot 插槽传递。子传父，通过$emit发射自定义事件传递。非父子，通过bus总路线传递。

（2）路由传值 可通过url 路径传值和编程式导航对象传值

（3）vuex 状态管理传值

16.vuex如何使用？

首先在项目中 npm install vuex 安装

新建vuex状态管理文件，导入vuex 并添加状态数据

在组件中使用mapState()函数映射状态数据并使用

在组件中使用commit()函数提交申请修改状态数据

下载vuex

在src下创建store以及index.js

引入vue和vuex，使用vuex，导出实例对象

在main.js中引入，在.vue文件中使用

17.vuex 的核心概念有哪些？组件如何使用store中的数据如何改变store中的数据？

state=>基本数据 在组件中使用mapState()函数把状态数据映射入组件即可使用

getters=>从基本数据派生的数据 我们在组件中$store.getters获取数据

mutations=>提交更改数据的方法，同步 我们在组件中使用$store.commit('',params)修改数据

actions=>像一个装饰器，包裹mutations，使之可以异步。使用mapAction()映射入组件使用

modules=>模块化vuex

18.vue中如何处理跨域请求？

vue中处理跨域请求 一般要设置代理服务器实现跨域

在vue 项目的根目录中手动创建 vue.config.js配置文件，在devSever字段中哦诶之服务器代理使用axios请求数据时直接使用代理地址。

19.axios和ajax的区别

axios是通过promise实现对ajax技术的一种封装，就像jquery实现ajax邓庄一样。

简单说：ajax实现了网页的局部数据刷新，axios实现了对ajax的封装。

20.vue和react有那些异同点？

react整体是函数式的思想，把组件设计成纯组件，状态和逻辑通过参数传入，所以在react中，是单项数据流。react在setState之后会重新走向渲染的流程，入股shouldComponentUpdate返回的是true，就继续渲染。如果返回false就不会重新渲染。

vue的思想是响应式的，基于是数据可变的，通过每一个属性建议wacher来监听，当属性变化的时候响应式的更新对应的虚拟DOM

相同点：

（1）都是通过虚拟DOM实现了视图的渲染与更新

（2）都是组件化编程，把真个项目分割成一个个的组件来实现

（3）都有单项数据流的规则执行数据流动，父组件通过props属性向子组件传值。

不同点：

（1）vue常规用html标签当模板，使用js实现逻辑，视图与逻辑分离。react使用jsx语法实现模板，html和js相结合。

（2）vue组件中的data数据可以直接调用并更新 而react中的state数据需要使用setState()函数执行更新

（3)vue属于渐进式框架，更适用于开发小型灵活的项目，react生态丰富，适用于开大专业，大型的项目。

（4）vue组件中提供了指令，过滤器，属性监听等，可以方便快捷间操作DOM

（5）实现方式：

react的思路是all in js 通过js来生成html所以设计jsx 还有js来操作css

vue 是把html，css js组合到一起。用各自的方式处理，vue有单文件组件可以把三件套写到一个文件中，html提供了模板引擎来处理

（6）代码书写：

react采用面向对象制作组件，api要求很少，书写比较随意

vue采用声明写法，通过大量的固定 options appi 生成页面
例如：methods，data，filter...

（7）外援

react本身提供很少的功能，大多数高阶功能都依赖于社区，如状态管理要用redux

vue本身集成了超多功能，使用方便。例如状态管理的vuex

总之，react的性能优化需要手动去做，而vue的性能优化是自