Vue精髓面试题

一.Vue学习精髓

二.Vue面试题汇总

【一般】Vue的最大优势是什么?

【高频】MVVM和MVC区别是什么?

【一般】Vue常用修饰符有哪些?

【一般】对Vue渐进式的理解

【一般】说出至少4个Vue指令及作用

【一般】为什么避免v-for和v-if在一起使用

【高频】v-show和v-if的区别

【几乎必问】Vue中key值作用

         【几乎必问】v-for指令使用key值几种情况

【高频】Vue中:key作用, 为什么不能用索引

【高频】Vue中有时候数组会更新页面，有时候不更新，这是为什么?

【高频】 方法和计算属性和侦听器区别

【一般】请说下封装 vue 组件的过程

【几乎必问】vue组件传值

【高频】Vue 组件 data 为什么必须是函数

【一般】讲一下组件的命名规范

【高频】scoped作用与原理

  ==【百分百必问】==vue生命周期总共分为几个阶段？

【高薪必问】Vue 的 nextTick 的原理是什么?

【高薪必问】v-slot插槽与作用域插槽

【高薪必问】 自定义指令的方法有哪些?它有哪些钩子函数?还有哪些钩子函数参数?（必 会）

【高薪必问】vue路由作用与原理

【高频】路由之间是怎么跳转的？有哪些方式?

【一般】vue-router怎么配置路由（路由配置六个流程）

【高频】vue-router的钩子函数都有哪些（导航守卫）

【高频】路由传值的方式有哪几种

【几乎必问】Vue的路由实现模式：hash模式和history模式

【几乎必问】请说出路由配置项常用的属性及作用

【高频】$route和$router的区别?

【高频】跟keep-alive有关的生命周期是哪些？

【高频】vuex作用及五大组成部分

【一般】vuex中action工作流程

【几乎必问】说一下你在vue中踩过的坑

---

一.Vue学习精髓

1.数据驱动 : vue会自动渲染data中的数据, data中的数据变化了，页面会自动变化。

2.vue指令本质 : html标签自定义属性

作用：给html标签拓展功能（给原生html标签加buff）

语法：vue指令 v-指令名="指令值"

HTML自定义属性规范： 属性名="属性值"

3.vue组件本质：html自定义标签

作用： 实现盒子复用

传统html标签：例如 <a>,<button> (只有html结构,没有 )

vue组件： 例如 <good></good>    (有html结构，有css样式，有js逻辑 )

4.vue路由本质 : 监听hash，替换容器盒子(版心)

• 如果模式是hash,监听的是hash值变化

• 如果模式是history，监听的是路径变化。（需要后台配合）

5.学习vue路由，如何知道自己学的咋样？能分清下面几个单词，你的路由至少掌握了70%

• routes : 数组。 路由匹配规则

• router ： 对象。 路由对象

• $router ： 对象。 用于跳转路由 和 传递参数

• $route ：对象。 用于接收路由跳转参数

二.Vue面试题汇总

【一般】Vue的最大优势是什么?

• 比较轻量，中国人自己写的框架，文档易读（这里比较轻松，拿出平时和朋友聊天的语气）

• 下面几个,说的越多越好

  • 双向数据绑定,

  • 数据驱动视图,

  • 组件化开发

  • 数据和视图分离

  • 单页面应用可以实现页面数据局部刷新

【高频】MVVM和MVC区别是什么?

MVC ： 传统的设计模式。

• 设计模式： 一套广泛被使用的开发方式

• M： model 模型

  • 模型：就是数据的意思

• V ： view视图

  • 视图：就是页面的意思

• C：controller控制器

  • 控制器：在这里写js业务逻辑，把数据M 渲染到 视图 V （有点类似于我们之前学习的，把数据渲染到页面）

• MVVC： vue所使用的设计模式

• MVVM，一种软件架构模式，决定了写代码的思想和层次

  • M： model数据模型 (data里定义)

  • V： view视图 （页面标签）

  • VM： ViewModel视图模型 (vue.js源码)

• MVVM通过数据双向绑定让数据自动地双向同步 不再需要操作DOM

  • V （修改视图） -> M（数据自动同步）

  • M（修改数据） -> V （视图自动同步）

• 设计模式: 是一套被反复使用的、多数人知晓的、经过分类编目的、代码设计经验的总结。(代码分层, 架构设计)

• 1. 在vue中，不推荐直接手动操作DOM！！！

• 2. 在vue中，通过数据驱动视图，不要在想着怎么操作DOM，而是想着如何操作数据！！(思想转变)

【一般】Vue常用修饰符有哪些?

.prevent: 提交事件不再重载页面；

.stop: 阻止单击事件冒泡；

.once: 只执行一次这个事件

.enter:监听键盘enter键

【一般】对Vue渐进式的理解

• 官方专业答案

  • 主张最少,

  • 自底向上,

  • 增量开发,

  • 组件集合,

  • 便于复用

• 个人见解

  • 使用模块化规范，实现自助餐式开发，用什么导什么。 最大程度上节省资源。

【一般】说出至少4个Vue指令及作用

• v-on 给标签绑定函数，可以缩写为@，例如绑定一个点击函数 函数必须写在methods里面

• v-bind 动态绑定 作用： 及时对页面的数据进行更改, 可以简写成:分号

• v-slot: 缩写为#, 组件插槽

• v-for 根据数组的个数, 循环数组元素的同时还生成所在的标签

• v-show 显示内容

• v-if 显示与隐藏

• v-else 必须和v-if连用 不能单独使用 否则报错

• v-text 解析文本

• v-html 解析html标签

【一般】为什么避免v-for和v-if在一起使用

Vue 处理指令时，v-for 比 v-if 具有更高的优先级, 虽然用起来也没报错好使, 但是性能不高, 如果你有5个元素被v-for循环, v-if也会分别执行5次.

【高频】v-show和v-if的区别

• v-show和v-if的区别? 分别说明其使用场景?

• 相同点： v-show 和v-if都是true的时候显示，false的时候隐藏

• 不同点1：原理不同

  • v-show:一定会渲染，只是修改display属性

  • v-if:根据条件渲染

• 不同点2：应用场景不同

  • 频繁切换用v-show,不频繁切换用v-if

[v-if与v-show区别逐字稿]    

       面试官你好，我是这么理解v-if和v-show的。 v-if本质其实是动态的创建 或者 删除元素节点。一般不用频繁切换, 要么显示, 要么隐藏的情况, 我都会用 v-if。因为v-if 是惰性的, 如果初始值为 false, 那么这些元素就直接不创建了, 这样就可以节省一些初始渲染开销。v-show本质是在控制元素的 css 样式,display: none;，一般元素需要频繁的切换显示隐藏, 用 v-show。因为v-if在频繁切换会大量的创建和删除元素, 消耗性能。

【几乎必问】Vue中key值作用

• 1.vue在渲染的时候,会 先把 新DOM 与 旧DOM 进行对比， 如果dom结构一致，则vue会复用旧的dom。 （此时可能造成数据渲染异常）

• 2.使用key可以给dom添加一个 唯一标识符，让vue强制更新dom

[vue中key值作用逐字稿]

       面试官你好,我是这么理解key值的,key值的主要作用是给元素添加一个唯一标识符,用于提高vue渲染性能,当data发生变化的时候,vue会使用diff算法来对比新旧虚拟DOM.如果key值相同,才会考虑复用元素.如果key值不同,则会强制更新元素.一般通过给元素key设置为id,来保证vue更新数据的时候可以最大限度复用相同的key值的元素.

【几乎必问】v-for指令使用key值几种情况

[v-for指令使用key值几种情况逐字稿]

    1. 没有key值(默认是下标) :   不复用，就地更新

    2. key值为下标(相当于没设置) :  不复用，就地更新

    3. key值是id   :  复用相同的key，更新不同的key

    总结 ： key值优先设置id, 没有id就用下标

【高频】Vue中:key作用, 为什么不能用索引

• :key是给v-for循环生成标签颁发唯一标识的, 用于性能的优化

• 因为v-for数据项的顺序改变，Vue 也不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素

[key值为什么不能是下标逐字稿]

       因为数组的元素发生变化的时候,其他的元素下标会受到影响.而如果把下标作为key值的,由于其他的元素下标变化,所有vue会认为你key值也变化了,就会强制更新你的元素,从而影响性能.

【高频】Vue中有时候数组会更新页面，有时候不更新，这是为什么?

• 因为vue内部只能监测到数组顺序/位置的改变/数量的改变, 但是值被重新赋予监测不到变更, 可以用 Vue.set() / vm.$set()

这些方法会触发数组改变, v-for会监测到并更新页面

• push()

• pop()

• shift()

• unshift()

• splice()

• sort()

• reverse()

这些方法不会触发v-for更新

• slice()

• filter()

• concat()

【高频】 方法和计算属性和侦听器区别

面试点 : 侦听器和计算属性区别
         (1)计算属性有缓存机制,侦听器没有
         (2)计算属性不支持异步操作, 侦听器支持异步操作
         (3)计算属性是一个额外新增的属性， 侦听器只能侦听data中的属性
         (4)计算属性有返回值return,侦听器不需要return
         (5)计算属性可以监听多个数据变化(计算属性内部用到的数据变化了，就会执行计算属性方法),
         侦听器只能侦听一个数据的变化。

• 方法

  • 需要主动调用触发

  • 不会缓存

• 计算属性

  • 监听多个属性：只要计算属性内部数据变化就会触发

  • 有缓存机制（必须要说的）

• 侦听器

  • 监听一个属性

  • watch支持异步

  • 不会缓存（这个可以不用回答）

[计算属性和侦听器区别逐字稿]

    1.功能不同:计算属性解决模板语法冗余,侦听器监听data中某一个数据变化

    2.计算属性有缓存,侦听器没有缓存

    3.计算属性不支持异步操作,侦听器支持异步操作

    4.计算属性可以新增一个属性,而侦听器一定要是data中的属性

【一般】请说下封装 vue 组件的过程

高逼格答案： 有复用的地方就有封装
（js如此，vue也是如此）

• 1.先分析需求：确定业务需求，把页面中可以复用的结构，样式以及功能

  • 找出业务需求中存在复用的地方

• 2.具体步骤：Vue.component 或者在new Vue配置项components中, 定义组件名, 可以在props中接受给组件传的参数和值，子组件修改好数据后，想把数据传递给父组件。可以采用$emit方法

【几乎必问】vue组件传值

• 父传子

  • 1.子组件props定义变量

  • 2.父组件在使用子组件时通过行内属性给props变量传值

  • 特点：单向数据流

• 子传父

  • 1.子组件：$emit触发父的事件

  • 2.父在使用组件用@自定义事件名=父的方法 (子把值带出来)

  • 特点：事件监听

• 非父子组件

  • vuex

【高频】Vue 组件 data 为什么必须是函数

• 官方文档：Vue组件data一定是函数

• 因为组件是需要在多个地方使用的

  • 如果data是一个对象，对象是引用类型。 一旦某一个地方修改，就会全部修改

  • data是一个函数，每一次复用组件的时候就会从这个函数返回一个新的对象。 这样组件在复用的时候就可以做到数据互不干扰。

【一般】讲一下组件的命名规范

• 官方文档：官方-组件命名规范

• 给组件命名有两种方式(在Vue.Component/components时)，一种是使用链式命名"my-component"，一种是使用大驼峰命名"MyComponent"，

• 因为要遵循W3C规范中的自定义组件名 (字母全小写且必须包含一个连字符)，避免和当前以及未来的 HTML 元素相冲突

【高频】scoped作用与原理

• 作用：组件css作用域，避免子组件内部的css样式被父组件覆盖

  • 默认情况下，如果子组件和父组件css选择器权重相同，优先加载父组件css样式

• 原理：给元素添加一个自定义属性 v-data-xxxxx

  • 一针见血答案： 通过属性选择题来提高css权重值

==【百分百必问】==vue生命周期总共分为几个阶段？

四个钩子

• beforeCreate,

• created,

• beforeMount,

• mounted 这几个钩子函数

【高薪必问】Vue 的 nextTick 的原理是什么?

• 1为什么需要 nextTick

  • Vue 是异步修改 DOM 的并且不鼓励开发者直接接触 DOM，但有时候业务需要必须对数据更改--刷新后的 DOM 做相应的处理，这时候就可以使用 Vue.nextTick(callback)这个 api 了。

• 2.知识储备（可以不说，但是自己要知道，以防不测）

  • 事件循环中宏任务和微任务这两个概念

  • 常见的宏任务有 script, setTimeout, setInterval, setImmediate（一种执行更加频繁的定时器）

  • 常见的微任务有 ,Promise.then(), async

• 3.最终答案：

  • nextTick 的原理是 vue 通过异步队列控制 DOM 更新

    • nextTick底层是promise，所以是微任务。这个一定要知道

  • （这个是官方语言，说不说看你自己心情) ： nextTick 回调函数先后执行的方式。如果大家看过这部分的源码，会发现其中做了很多 isNative()的判断，因为这里还存在兼容性优雅降级的问题。可见 Vue 开发团队的深思熟虑，对性能的良苦用心。

【高薪必问】v-slot插槽与作用域插槽

• 1.插槽作用：父组件 传递 html结构 给 子组件

• 2.具名插槽作用：父组件 传递 多个html结构 给 子组件

• 3.作用域插槽作用：父组件 给 子组件 传递插槽 时，可以使用子组件内部的数据

【高薪必问】 自定义指令的方法有哪些?它有哪些钩子函数?还有哪些钩子函数参数?（必会）

• 全局定义指令：在vue对象的directive方法里面有两个参数，一个是指令名称，另外一个是函数。组件内定义指令：directives

• 钩子函数：bind(绑定事件触发)、inserted(节点插入的时候触发)、update(组件内相关更新)

• 钩子函数参数：el、binding

【高薪必问】vue路由作用与原理

• 路由作用： 实现单页面应用

• 原理：监听location的hash值

【高频】路由之间是怎么跳转的？有哪些方式?

• 1、<router-link to="需要跳转到页面的路径">

• 2、this.$router.push()跳转到指定的url，并在history中添加记录，点击回退返回到上一个页面

• 3、this.$router.replace()跳转到指定的url，但是history中不会添加记录，点击回退到上上个页面

• 4、this.$touter.go(n)向前或者后跳转n个页面，n可以是正数也可以是负数

【一般】vue-router怎么配置路由（路由配置六个流程）

• 1.引入组件

• 2.配置路由path和组件, 和生成路由对象routes

• 3.创建路由对象router

• 4.把路由对象挂载到new Vue()

• 5.页面使用<router-view></router-view> 承载路由

• 6.<router-link to="要跳转的路径"></router-link> 设置路由导航(声明式导航方式/编程式跳转)

【高频】vue-router的钩子函数都有哪些（导航守卫）

• 关于vue-router中的钩子函数主要分为3类

• 1.全局钩子函数beforeEach（全局前置守卫，所有路由生效）

  • beforeEach函数有三个参数,分别是:

    • to:router即将进入的路由对象

    • from:当前导航即将离开的路由

    • next:function,进行管道中的一个钩子，如果执行完了,则导航的状态就是 confirmed （确认的）否则为false,终止导航。

• 2.单独路由独享组件（只对这个路由生效）

  * beforeEnter,

• 3 组件内钩子

  • beforeRouterEnter，（渲染路由组件前）

  • beforeRouterUpdate,（路由改变）

  • beforeRouterLeave（路由离开）

【高频】路由传值的方式有哪几种

• Vue-router传参可以分为两大类，分别是编程式的导航 router.push和声明式的导航

• 1.编程式导航：router.push

  • 字符串：直接传递路由地址，但是不能传递参数

    • this.$router.push("home")

  • 对象：

    • 命名路由 这种方式传递参数，目标页面刷新会报错 - name+params

    • this.$router.push({name:"news",params:{userId:123})

  • 查询参数 和path配对的是query

    • this.$router.push({path:"/news',query:{uersId:123})

  • 接收参数 this.$route.query

• 2.声明式导航

  • 字符串 <router-link to:"news"></router-link>

  • 命名路由 <router-link :to:"{name:'news',params:{userid:1111}}"></route-link>

  • 还可以to="/path/值" - 需要提前在路由 规则里值 /path/:key

  • 查询参数 <router-link :to="{path:'/news',query:{userId:1111}}"></router-link>

    • 还可以to="/path?key=value

【几乎必问】Vue的路由实现模式：hash模式和history模式

1.路径不同

hash有#, history没有#

2.工作模式不同

hash : 修改当前页面hash,不需要服务器额外配置

history: 会给服务器发送请求，需要服务器配置

• 1.hash模式：在浏览器中符号“#”，#以及#后面的字符称之为hash，用 window.location.hash 读取。特点：hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用，hash不会重加载页面。

• 2.history模式：history采用HTML5的新特性；且提供了两个新方法： pushState()， replaceState()可以对浏览器历史记录栈进行修改，以及popState事件的监听到状态变更

【几乎必问】请说出路由配置项常用的属性及作用

路由配置参数：

• path : 跳转路径

• component : 路径相对于的组件

• name:命名路由

• children:子路由的配置参数(路由嵌套)

• props:路由解耦

• redirect : 重定向路由

【高频】$route和$router的区别?

• routes : 数组。 路由匹配规则

• router ： 对象。 路由对象

• $router ： 对象。 用于跳转路由 和 传递参数

• $route ：对象。 用于接收路由跳转参数

【高频】跟keep-alive有关的生命周期是哪些？

• 1.前言：在开发Vue项目的时候，大部分组件是没必要多次渲染的，所以Vue提供了一个内置组件keep-alive来缓存组件内部状态，避免重新渲染，在开发Vue项目的时候，大部分组件是没必要多次渲染的，所以Vue提供了一个内置组件keep-alive来缓存组件内部状态，避免重新渲染

• 2.生命周期函数：在被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 进入缓存组件(如果你进入的也是缓存路由)

【高频】vuex作用及五大组成部分

• vuex作用： 全局数据管理 解决复杂的父子组件传值

• state作用：存储数据

• getter作用：派生数据。相当于state计算属性

• mutations作用：修改state中的数据

• actions作用： 异步更新数据

• module作用：模块化处理vuex数据

【一般】vuex中action工作流程

• 1.组件给actions发送消息

• 2.actions异步请求数据

• 3.actions将请求到的数据提交给mutations

• 4.mutations同步更新state中的数据

【几乎必问】说一下你在vue中踩过的坑

• 1操作data中的数据，发现没有响应式

  • 原因： 数组中有很多方法，有的会改变数组（例如pop push）,有的不会改变数组（例如slice, filter）

  • 解决方案：通过Vue.set(对象，属性，值)这种方式就可以达到，对象新添加的属性是响应式的

• 2.在created操作dom的时候，是报错的，获取不到dom，这个时候实例vue实例没有挂载

  • 解决方案：Vue.nextTick(回调函数进行获取

• 3.其他的可以自由发挥，只要不是太低级就可以（比如，单词写错，代码位置写错，这种就是低级问题。其他的都可以说，千万别说这两个）