vue面试题总结

1.v-show和v-if的区别

相同点：

v-show和v-if都能控制元素的显示和隐藏

不同点：

①实现本质方法不同

v-show本质是通过设置css中的display设置为none，控制隐藏

v-if是动态的向DOM树内添加或者删除DOM元素

②编译的区别

v-show是在控制css

v-if切换有一个局部编译/卸载的过程，切换过程中合适的销毁和重建内部的事件监听和子组件

③编译的条件

v-show都会变，初始值为false，只是将diaplay改为none

v-if初始值为false时，不会编译

④性能比较

v-show只编译一次，后面就是控制css，而v-if不停的销毁和创建，因此v-show的性能更好

注意点：

因为v-show实际是 *** 作display：" "或者none，当css本身有display：none时，v-show无法让显示

适用场景：

如果要频繁切换某节点时，使用v-show，如果不需要频繁切换某节点时，使用v-if

2.v-for中key的作用

key的作用主要是为了高效的更新虚拟DOM

3.vue中data为什么是function

①每个组件都是Vue的实例

②组件共享data属性，当data的值是同一个引用类型的值时，改变其中一个会影响其他

③组件中的data写成一个函数，数据以函数返回值定义，这样每复用一次组件，就会返回一份新的data，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。而单纯的写成对象形式，就使得所有组件实例共用了一份data，就会造成一个变了全都会变的结果

4.vue中双向绑定的原理

①Object.defineProperty(obj, prop, descriptor) ，这个语法内有三个参数，分别为 obj （要定义其上属性的对象） prop （要定义或修改的属性） descriptor （具体的改变方法）

②当调用时我们使用了它里面的get方法，当我们给这个属性赋值时，又用到了它里面的set方法；

5.keep-alive的作用和被keep-alive声明的组件的生命周期

作用：

keep-alive包裹动态组件时，会缓存不活动的组件实例，主要用于保留组件状态或避免重新渲染

生命周期：

生命周期函数：在被 keep-alive 包含的组件/路由中，会多出两个生命周期的钩 子:activated 与 deactivated。

①activated 钩子：在在组件第一次渲染时会被调用，之后在每次缓存组件被激活时调用。

②Activated 钩子调用时机： 第一次进入缓存路由/组件，在 mounted 后面， beforeRouteEnter 守卫传给 next 的回调函数之前调用，并且给因为组件被缓存了，再次进入缓存 路由、组件时，不会触发这些钩子函数，beforeCreate created beforeMount mounted 都不会触发

③deactivated 钩子：组件被停用（离开路由）时调用：deactivated 钩子调用时机： 使用 keep-alive 就不会调用 beforeDestroy(组件销毁前钩子)和 destroyed(组件销毁)，因为组件没被 销毁，被缓存起来了，这个钩子可以看作 beforeDestroy 的替代，如果你缓存了组件，要在组件销 毁的的时候做一些事情，可以放在这个钩子里，组件内的离开当前路由钩子 beforeRouteLeave => 路由前置守卫 beforeEach =>全局后置钩子 afterEach => deactivated 离开缓存组件 => activated 进入缓存组件(如果你进入的也是缓存路由）

6.说一下vue的生命周期，以及生命周期都做了什么事情？

vue生命周期是从vue实例创建到销毁的过程。从开始创建、初始化数据、编译模 板、挂载 Dom→渲染、更新→渲染、卸载等一系列过程。

①beforeCreate

在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用

②created

在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见

③beforeMount

在挂载开始之前被调用：相关的 render 函数首次被调

④mounted

el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子，如果 root 实例挂载了一 个文档内元素，当 mounted 被调用时 vm.$el 也在文档内

⑤beforeUpdate

数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM， 比如手动移除已添加的事件监听器，该钩子在服务器端渲染期间不被调用，因为只有初次渲染会 在服务端进行

⑥updated

由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子

⑦beforeDestroy

实例销毁之前调用。在这一步，实例仍然完全可用。该钩子在服务器端渲染期间不被调用

⑧destroyed

Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监 听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用

7.vue什么时候 *** 作DOM比较合适？ *** 作时发现有的组件获取不到，怎么办？

在 mounted 中可以访问 *** 作 DOM。
因为在钩子函数 mounted 被调用前，Vue 已经将编译好的模板挂载到页面上。

mounted不能保证所有子组件被挂载，因此需要使用$nexttick

8.发送网络请求在哪个函数中？

一般在 created（或beforeRouter） 里面就可以，如果涉及到需要页面加载完成之后的话就用 mounted。

9.vue组件间传值有哪些方式

①父组件向子组件传递数据

父组件内设置要传的数据，在父组件中引用的子组件上绑定一个自定义属性并把数据 绑定在自定义属性上，在子组件添加参数 props就收即可

②子组件向父组件传递数据

子组件通过 vue 实例方法$emit 进行触发并且可以携带参数，父组件监听使用@（v-on） 进行监听，然后进行方法处理

③非父子组件之间传递数据

两个组件的关系非常的复杂，通过父子组件通讯是非常麻烦的。这时候可以使用通用的组件通讯方案：事件总线（event-bus)

10.vue中改变数组内索引的值，数据不更新，如何处理

push()、pop()、shift()、unshift()、splice()、sort()、reverse()这些方法会改变被 *** 作的数组，filter()、concat()、 slice()这些方法不会改变被 *** 作的数组，并且返回一个新的数组，并更新视图

11.讲一下vuex

vuex 可以理解为一种开发模式或框架。通过状态集中管理驱动组件的变化

1、应用级的状态集中放在 store 中

2、改变状态的方式是提交 mutations，这是个同步的事物

3、异步逻辑应该封装在 action 中

vuex的5个核心属性分别是State、 Getter、Mutation、Action、Module