前端vue精简版面试题(个人理解篇）

1.vue组件中为什么data必须是一个函数

如果组件中data不是一个函数，首先vue是会报错的，因为它的内部规范组件中的data必须是个函数，组件实例对象data必须为函数，目的是为了防止多个组件实例对象之间共用一个data，产生数据污染，采用函数的形式，构造data时会将其作为工厂函数都会返回全新data对象

2.vue常用的指令

• v-model：用来实现双向绑定
• v-for：用于数据循环
• v-show：显示内容（dom元素的display=block/none来控制元素的显示隐藏）
• v-hide：显示隐藏
• v-if：显示隐藏（dom元素的删除、添加）
• v-bind：动态绑定
• v-on：给元素绑定事件
• v-text：解析文本
• v-html：解析html元素
• v-cloak 防止闪烁
• v-once 进入页面时 只渲染一次

3.生命周期共有几个？分别在什么时候使用？

1.创建
beforeCreate() 创建前的阶段，这个时候data中的数据，还未定义，所以不能使用
created() 最早开始使用 data和methods中数据的钩子
2.挂载
beforeMount() 指令已经解析完毕内存中已经生成dom树，还没有渲染到本地
mounted()dom已经渲染完毕 页面和内存的数据已经同步
3.更新
beforeUpdate() 当data的数据发生改变会执行这个钩子 内存中数据是新的 页面是旧的
updated() 数据更新完成以后触发的方法，DOM节点已经更新
4.销毁
beforeDestroy()即将销毁 data和methods中的数据此时还是可以使用的可以做一些释放内存的操作
destroyed()已经销毁完毕
activated 被 keep-alive 缓存的组件激活时调用。该钩子在服务器端渲期间不被调用。
deactivated被 keep-alive 缓存的组件停用时调用。该钩子在服务器端渲染期间不被调用。
errorCaptured （2.5.0新增）当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。

4.路由守卫

什么是导航守卫：
概念：导航守卫又称路由守卫，实时监控路由跳转时的过程，在路由跳转的各个过程执行相应的操作

一、全局守卫
router.beforeEach（全局前置守卫）
router.afterEach（全局后置守卫）
二、路由独享守卫
beforeEnter(给单独的路由加)
三、组件内守卫
beforeRouteEnter(进入该路由时执行)
beforeRouteUpdate（该路由参数更新时执行）
beforeRouteLeave(离开该路由时执行)

5.Vue中双向数据绑定是如何实现的

采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。
主要分为三部分：
observer主要是负责对Vue数据进行数据劫持，使其数据拥有get和set方法
Compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数
watcher负责数据监听，当数据发生改变通知订阅者，调用视图更新函数更新视图

6.keep-alive

keep-alive是动态组件，他是vue的内置组件，能在组件切换过程中将状态保存在内存中，防止重复渲染DOM，作用是缓存组件内部状态。避免重新渲染，不会出现在父组件中

7.vue中的$nextTick

在下次DO更新循环结束之后执行延迟回调，在修改数据之后立即使用这个方法，获取更新后的DOM，vue在更新DOM时是异步更新队列，视图需要等队列中所有数据变化完成之后，再统一进行更新
使用场景：修改数据之后，可以立即获取修改后的数据，主要体现在beforeCreat和update两个生命周期中

8.v-for中为何要使用key

在列表渲染的时候使用key属性，更新组件时判断两个节点是否相同，相同就使用，不相同就删除就的创建新的，key值也是一个唯一的标识

9.vue中数组中的某个对象的属性发生变化，视图不更新如何解决

因为vue的检查机制在进行视图更新时无法检测数组中某个对象的属性值的变化，解决方案有两种
方案一：利用this.set(this.obj,key,val)
三个参数的意思为：目标对象，下标，更新后的值
方案二：利用object.assign({},this.obj) 创建新对象
如果是数组第一个参数就用[ ],如果是对象第一个参数就用{ }
assign用于对象合并

10.prop验证和默认值

props：会接收不同的数据类型，常用的数据类型的设置默认值的写法
常用的验证类型有：Number，String，Boolean，Array，Function，Object
prop数据单项传递，父不影响子，子影响父，不能在组件中直接修改prop传递的值，vue会发出警告

11.虚拟dom

用JS来模拟DOM结构，把DOM的变化操作放在JS层来做，尽量减少对DOM的操作，然后对比前后两次的虚拟DOM的变化，只渲染一次

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

都可以动态控制dom元素的显示隐藏
v-if可以直接控制元素的添加删除，v-if有更高的切换消耗，适合运行条件很少改变的情况
v-show只会给元素的display属性设置为block/none，有更高的初始渲染消耗，适合频繁切换

13. vuex的核心概念和运行机制

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储和管理程序的所有组件的数据
1.state 所有的数据都存储在state中，state是一个对象 ,所有共享的数据都要统一放到store的state中进行存储
2.mutations 可以直接操作state中的数据 ​，只能通过mutation变更store的数据，不可以直接操作 store中的数据
3.actions 只能调用mutations的方法 ​，用于处理异步任务，如果通过异步操作变更数据，必须通过action，而不能使用mutation，但是在action中还是要通过触发mutation的方法间接更改数据
4.getters 类似计算属性实现对state中的数据做一些逻辑性的操作
getter用于对store中的数据进行加工处理形成新的数据，getter可以对store中已有的数据加工处理后形成新的数据，类似vue的计算属性
5.modules 将仓库分模块存储，vuex允许我们将store分割成模块，每个模块拥有自己的state、mutation、action、getter、甚至是嵌套子模块一一从上至下进行同样方式的分割
vuex的运行机制：在组件中通过dispatch来调用actions中的方法在actions中通过commit来调用mutions中的方法，在mutions中可以直接操作state中的数据，state的数据只要一发生改变立马响应到组件中