vue面试题

一.v-if 和 v-show 的区别？        

共同：v-if 和 v-show 都是控制一个元素是否显示。

区别 当条件为假的时候 v-if通过创建或删除DOM节点来实现元素的显示隐藏，v-show通过css中的display属性来控制

使⽤场景分别是什么?

v-if更适合数据的筛选和初始渲染 v-show更适合元素的切换

二.说说你对vuex的理解？

1.vuex是⼀个状态管理⼯具，主要解决⼤中型复杂项⽬的数据共享问题，主要包括state,actions,mutations,getters和modules 5个要素

2.主要流程：组件通过dispatch到 actions，actions是异步操作，在actions中通过commit到mutations，mutations再通过逻辑操作改变state，从⽽同步到组件，更新其数据状态

延伸 :

1. state：所有的数据都存储在state中 state是一个对象

2. mutations：可以直接操作state中的数据

3. actions：只能调用mutations的方法

4. getters：类似计算属性实现对state中的数据做一些逻辑性的操作

5. modules：将仓库分模块存储

6. plugins : 插件

   延伸:vuex如何实现数据持久化（即刷新后数据还保留）

解决⽅案有：

第⼀种：利⽤H5的本地存储(localStorage,sessionStorage)

第⼆种：利⽤第三⽅封装好的插件，例如：vuex-persistedstate

三.请描述下你对vue⽣命周期的理解？

• beforeCreate 数据创建前触发，这个时候数据在内存中还未挂载到Vue实例上，这个时候无法访问data中的数据。

• created 数据创建完成，数据已经挂载到Vue实例上，它是最早可以访问data中数据的钩子函数。

• beforeMount DOM挂载之前调用，这个时候DOM节点数据在内存中，还未渲染到真实的DOM树结构上。

• mounted DOM挂载完成之后调用，这个时候DOM节点已经完成渲染，他是最早可以进行DOM操作的钩子函数。

• beforeUpdate 数据更新前的阶段，数据发生改变，还没有影响真实的DOM树结构，只是更新虚拟DOM树结构的内容，这个时候还可以获取旧的DOM节点

• updated 数据更新完成，数据更新完成，更新的结果已经渲染到真实的DOM结构，html结构已经发生改变。

• beforeDestroy 实例销毁前调用，这个时候实例还可以使用

• destroyed Vue实例销毁，数据已经无法使用

四.Vue 中的 key 是干什么用的？

在做循环时 Vue 要求我们必须要加上 key 属性，并且要为循环的数据设置不一样的 key 值，这样的目的是用来区分和识别一个元素是否有改变的，有了这个 key 时在后续的排序、修改等更新操作时性能更快。

五.Vue中的过滤器了解吗？过滤器的应⽤场景有哪些？

过滤器主要用来对数据进行格式的修改，在变量后通过 管道符（|） 来使用

过滤器分为 全局过滤器 和 局部过滤器。

全局过滤器：使用 Vue.filter 在创建 new Vue 之前执行定义全局过滤器，全局过滤器在任何一个组件中可以直接使用。

局部过滤器：只能在注册了的组件中使用。组件中使用时需要先引入过滤器，然后再注册到组件的 filters 属性中，然后才能使用。

六. 你有写过⾃定义指令吗？⾃定义指令的应⽤场景有哪些？

全局： vue.directive:{"",{}} 局部：directives:{指令名：{钩子函数}} bind(){} 只调用一次，指令第一次绑定到元素时调用 inserted(){} 被绑定元素插入父节点时调用

update(){} ：所在组件的 VNode 更新时调⽤，但是可能发⽣在其⼦VNode 更新之前。

componentUpdated(){} ：指令所在组件的 VNode 及其⼦ VNode 全部更新后调⽤

unbind(){}只调用一次， 指令与元素解绑时调用

使用场景 :  防抖 、图⽚懒加载

延伸:

一张图片就是一个img标签，浏览器是否发起请求图片是根据img的src属性，所以实现懒加载的关键就是，在图片没有进入可视区域时，先不给img的src赋值，这样浏览器就不会发送请求了，等到图片进入可视区域再给src赋值

七.Vue组件之间的通信⽅式都有哪些?

组件间传值分为三种：父向子、子向父、兄弟间。

第一种：父传子：主要通过 props 来实现的

具体实现：父组件通过 import 引入子组件，并注册，在子组件标签上添加要传递的属性，子组件通过 props 接收，接收有两种形式一是通过数组形式[‘要接收的属性’ ]，二是通过对象形式{ }来接收，对象形式可以设置要传递的数据类型和默认值，而数组只是简单的接收

第二种：子传父：主要通过$emit 来实现

具体实现： 子组件通过通过绑定事件触发函数， 在其中设置this.$emit(‘要派发的自定义事件’，要传递的值)，$emit 中有两个参数一是要派发的自定义事件，第二个参数是要传递的值

第三种：兄弟之间传值有两种方法：

方法一：通过 event bus 实现

具体实现:创建一个空的 vue 并暴露出去，这个作为公共的 bus,即当作两个组件的桥梁，在两个兄弟组件中分别引入刚才创建的bus，在组件 A 中通过 bus.$emit（’自定义事件名’，要发送的值）发送数据，在组件 B中通过 bus.$on（‘自定义事件名‘,function(v) { //v 即为要接收的值 }）接收数据

方法二：通过 vuex 实现

具体实现：vuex 是一个状态管理工具，主要解决大中型复杂项目的数据共享问题，主要包括 state,actions,mutations,getters 和 modules 5 个要素，主要流程：组件通过 dispatch 到 actions，actions 是异步操作，再 actions中通过 commit 到 mutations，mutations 再通过逻辑操作改变 state，从而同步到组件，更新其数据状态

八. 为什么data属性是⼀个函数⽽不是⼀个对象？

1. 跟按引用传值有关。

2. Vue 中的 data 是一个对象类型，对象类型的数据是按 引用传值 的。这就会导致所有组件的实例都 共享 同一份数据，这是不对的，我们要的是每个组件实例都是独立的

3. 所以为了解决对象类型数据共享的问题，我们需要将 data 定义成一个函数，每个实例需要通过调用函数生成一个独立的数据对象

九.说说你对keep-alive的理解是什么？

keep-alive 是 vue 中内置的⼀个组件

一个路由在切换时会被销毁，之前的数据全部丢失，下次再访问这个组件时，需要重新创建，重新调接口，重新渲染，为了提高性能我们可以使用 keep-alive 把组件缓存起来，这样在组件切换时，这个组件并没有被销毁，下次访问时，可以就可以显示出来，而且原组件中数据还在

• 如何用

  把需要缓存的组件使用 keep-alive 套起来即可。比如：把所有路由页面都缓存起来，在切换时不销毁：

  • 两个参数

    • include：字符串或正则表达式，只有匹配的组件会被缓存

    • exclude：字符串或正则表达式，任何匹配的组件都不会被缓存

延伸 : keep-alive的生命周期函数

1.activated：页面第一次进入的时候，钩子触发的顺序是created->mounted->activated 2.deactivated ：页面退出的时候会触发deactivated，当再次前进或者后退的时候只触发activated

十.Vue中的$nextTick有什作⽤？

this.$nextTick是一个回调函数，这个回调函数会在下次 DOM 更新结束之后执行。

Vue的数据更新是采用延迟异步更新的，就是说当我们修改了数据之后，页面并不会马上就更新,如果这个时候我们通过DOM操作来获取数据的话，获取的还是之前的旧的数据，这个时候我们就可以使用$nextTick方法，因为这个方法知道什么时候DOM更新完成。

总的来说，nextTick方法的作用就是让代码延迟执行