❗❗❗❗❗❗❗❗❗据国内第三方数据统计，未来五年我国信息化人才总需求高达1500万-2000✔万人。其中“网络工程”“UI设计”“Web前端”等人才的缺口最为突出，中小型公司和创业公司也急需专业的Web前端工程师。所有我这里有一份《葵花宝典(vue面试题)》传授给你，习得此功 ┗|｀O′|┛ 嗷~~ 3000包吃住它不就稳了吗？

1.【基础（自宫）】Vue的最大优势是什么?

比较轻量，中国人自己写的框架，文档易读（这里比较轻松，拿出平时和朋友聊天的语气）
下面几个，能说的越多越好
- 双向数据绑定,
- 数据驱动视图,
- 组件化开发
- 数据和视图分离
- 单页面应用可以实现页面数据局部刷新

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

这道题可能只问MVVM，也可能两个一起问

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，而是想着如何操作数据！！(思想转变)

正在上传…重新上传取消

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

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

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

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

.enter:监听键盘enter键

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

官方专业答案
- 主张最少,
- 自底向上,
- 增量开发,
- 组件集合,
- 便于复用
个人见解
- 使用模块化规范，实现自助餐式开发，用什么导什么。最大程度上节省资源。

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

这道题还有一种问法：说出几个常用的vue指令

v-on 给标签绑定函数，可以缩写为@，例如绑定一个点击函数函数必须写在methods里面
v-bind 动态绑定作用：及时对页面的数据进行更改, 可以简写成:分号
v-slot: 缩写为#, 组件插槽
v-for 根据数组的个数, 循环数组元素的同时还生成所在的标签
v-show 显示内容
v-if 显示与隐藏
v-else 必须和v-if连用不能单独使用否则报错
v-text 解析文本
v-html 解析html标签

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

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

7.【高频】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
8.【几乎必问】Vue中key值作用
- 高逼格答案：提升vue渲染性能
- 1.vue在渲染的时候,会先把新DOM 与旧DOM 进行对比，如果dom结构一致，则vue会复用旧的dom。（此时可能造成数据渲染异常）
- 2.使用key可以给dom添加一个唯一标识符，让vue强制更新dom
- 9.【高频】Vue中:key作用, 为什么不能用索引
  - 最高逼格答案：因为用了索引和没用，没啥区别（用了等于没用）
  - :key是给v-for循环生成标签颁发唯一标识的, 用于性能的优化
  - 因为v-for数据项的顺序改变，Vue 也不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素

10.【高频】Vue中有时候数组会更新页面，有时候不更新，这是为什么
- 因为vue内部只能监测到数组顺序/位置的改变/数量的改变, 但是值被重新赋予监测不到变更, 可以用 Vue.set() / vm.$set()
- 这些方法会触发数组改变, v-for会监测到并更新页面
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()
- 这些方法不会触发v-for更新
- slice()
- filter()
- concat()
- 11.【高频】方法和计算属性和侦听器区别
- 方法
  - 需要主动调用触发
  - 不会缓存
- 计算属性
  - 监听多个属性：只要计算属性内部数据变化就会触发
  - 有缓存机制（必须要说的）
- 侦听器
  - 监听一个属性
  - 不会缓存（这个可以不用回答）
- 12.【一般】请说下封装 vue 组件的过程
  
  高逼格答案：有复用的地方就有封装
  
  （js如此，vue也是如此）
- 1.先分析需求：确定业务需求，把页面中可以复用的结构，样式以及功能
  - 找出业务需求中存在复用的地方
- 2.具体步骤：Vue.component 或者在new Vue配置项components中, 定义组件名, 可以在props中接受给组件传的参数和值，子组件修改好数据后，想把数据传递给父组件。可以采用$emit方法
13.【几乎必问】vue组件传值
父传子
- 1. 子组件props定义变量
- 2.父组件在使用子组件时通过行内属性给props变量传值
- 特点：单向数据流
子传父
- 1.子组件：$emit触发父的事件
- 2.父在使用组件用@自定义事件名=父的方法 (子把值带出来)
- 特点：事件监听

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

因为组件是需要在多个地方使用的
- 如果data是一个对象，对象是引用类型。一旦某一个地方修改，就会全部修改
- data是一个函数，每一次复用组件的时候就会从这个函数返回一个新的对象。这样组件在复用的时候就可以做到数据互不干扰。

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

给组件命名有两种方式(在Vue.Component/components时)，一种是使用链式命名"my-component"，一种是使用大驼峰命名"MyComponent"，
因为要遵循W3C规范中的自定义组件名 (字母全小写且必须包含一个连字符)，避免和当前以及未来的 HTML 元素相冲突

16.【高频】scoped作用与原理

作用：组件css作用域，避免子组件内部的css样式被父组件覆盖
- 默认情况下，如果子组件和父组件css选择器权重相同，优先加载父组件css样式
原理：给元素添加一个自定义属性 v-data-xxxxx
- 一针见血答案：通过属性选择题来提高css权重值

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

核心：四个阶段8个勾子

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

1**）beforeCreate**

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

2**）created**

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

3**）beforeMount**

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

4**）mounted**

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

5**）beforeUpdate**

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

6**）updated**

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

7**）activated**

keep-alive 组件激活时调用。该钩子在服务器端渲染期间不被调用。

8**）deactivated**

keep-alive 组件停用时调用。该钩子在服务器端渲染期间不被调用。

9**）beforeDestroy**

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

10**）destroyed**

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

11**）errorCaptured（2.5.0+ 新增）**

当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。

18.==【百分百必问】==第一次加载页面会触发哪几个钩子函数？

四个钩子
- beforeCreate,
- created,
- beforeMount,
- mounted 这几个钩子函数

19.【高薪必问】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 开发团队的深思熟虑，对性能的良苦用心。
4.小科普：其实vue在版本更新的时候。时而将nextTick封装成宏任务，时而将nextTick封装成微任务。不过目前vue2最新的版本，nextTick底层是微任务

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

1、<router-link to="需要跳转到页面的路径">
2、this.$router.push()跳转到指定的url，并在history中添加记录，点击回退返回到上一个页面
3、this.$router.replace()跳转到指定的url，但是history中不会添加记录，点击回退到上上个页面
4、this.$touter.go(n)向前或者后跳转n个页面，n可以是正数也可以是负数

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

1.引入vue-router.js
2.配置路由path和组件, 和生成路由对象routes
3.创建路由对象router
4.把路由对象挂载到new Vue()
5.页面使用<router-view></router-view> 承载路由
6.<router-link to="要跳转的路径"></router-link> 设置路由导航(声明式导航方式/编程式跳转)

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

关于vue-router中的钩子函数主要分为3类
1.全局钩子函数beforeEach（全局前置守卫，所有路由生效）
- beforeEach函数有三个参数,分别是:
  - to:router即将进入的路由对象
  - from:当前导航即将离开的路由
  - next:function,进行管道中的一个钩子，如果执行完了,则导航的状态就是 confirmed （确认的）否则为false,终止导航。
2.单独路由独享组件（只对这个路由生效）

* beforeEnter,
3 组件内钩子
- beforeRouterEnter，（渲染路由组件前）
- beforeRouterUpdate,（路由改变）
- beforeRouterLeave（路由离开）

23.【几乎必问】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事件的监听到状态变更.

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

路由配置参数：
- path : 跳转路径
- component : 路径相对于的组件
- name:命名路由
- children:子路由的配置参数(路由嵌套)
- props:路由解耦
- redirect : 重定向路由

25.【高频】`$route和$router的区别？`

routes : 数组。路由匹配规则
router ：对象。路由对象
$router ：对象。用于跳转路由和传递参数
$route ：对象。用于接收路由跳转参数

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

vuex作用：全局数据管理解决复杂的父子组件传值
state作用：存储数据
getter作用：派生数据。相当于state计算属性
mutations作用：修改state中的数据
actions作用：异步更新数据
module作用：模块化处理vuex数据

会了它+稳定发挥=3000包吃住相关推荐

OSChina 周二乱弹 ——宅女喵租男友包吃住 100一天
2019独角兽企业重金招聘Python工程师标准>>> Osc乱弹歌单(2018)请戳(这里) [今日歌曲] @锦湖 :回家分享陶笛-犹豫的泥巴的单曲<风动草>. & ...
为什么有些工厂，3000块一个月不包吃住还能招到工人？
一个月3250块,到手只有2700多块钱!没有工作日和周末之分,一个月只休息两天,晚上加班费按一比一进行核算.工厂有集体宿舍,但是要扣水电费,中餐.晚餐六块钱一顿,从工资里扣除! 你没有看错,这就是我 ...
安徽大别山农家乐包吃住
大别山农家乐位于安徽大别山区,风景优美,空气新鲜,天然氧吧!夏季非常的凉快,适合避暑. 丰富的娱乐项目,棋牌麻将.钓鱼篝火.卡拉OK. 品尝正宗农家土菜,体验山野风光.
互联网行业薪资现状，月薪2万属于低收入？ 6千外派包吃住
互联网校招应届生薪资待遇不断刷新,总结了各大互联网名企的应届生校招待遇.上汽与华为不能算纯互联网企业,但是应届生待遇上毫不逊色互联网企业的应届生待遇. 从以上列表可以看出,百度作为老牌BAT的领军人物 ...
包吃包住包机票的培训你见过吗？云南高通量条形码培训班，截止5月31日
文章目录 2019年中国云南高通量条形码培训班划重点简介日程申请授课教师课程安排培训地点旅行要求参考文献猜你喜欢写在后面 2019年中国云南高通量条形码培训班 2019年云南高 ...
三星Android Pie软件,三星开始向欧洲Galaxy S9用户推送Android Pie稳定版更新包
在经过近两个月的测试后,三星终于开始向欧洲市场推送 Galaxy S9 / S9+ 的 Android 9.0 Pie 稳定版更新包.上个月,随着 Android Pie 公众测试的开启,这家韩国科技 ...
乌镇步入“一脸游”时代：刷脸完成景区入园和吃住游
乌镇西栅景区刷脸入园. 供图摄中新网杭州1月16日电 (赵小燕黄慧)1月16日,记者从阿里巴巴获悉,今年元旦期间,飞猪与乌镇景区合作推出"一脸游",游客在飞猪购买景区套餐,授 ...
口碑网发布2010吃住玩消费风向指数
当在淘宝网上买衣服.买电器.买--都变得司空见惯,下一步我们会在网上完成什么消费? 通过网购等电子商务模式的带动,电子商务平台对于老百姓日常消费.生活的影响逐渐深化.原本更多依靠传统手段完成的吃住玩等 ...
每天开豪车跟随老板出入高档会所，吃住高档酒店，这样的职场生活，有必要坚持下去吗？
我以前经常开老板140多万的大奔驰,偶尔还能摸上法拉利跑车的方向盘,整天跟着老板出入高档场所,顶级茶叶.顶级酒水,每天接触的也是各个企业的老板,可后来发生了一件事,让我突然意识到自己需要改变这样的职场 ...

会了它+稳定发挥=3000包吃住

1.【基础（自宫）】Vue的最大优势是什么?

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

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

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

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

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

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

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

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

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

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

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

13.【几乎必问】vue组件传值

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

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

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

16.【高频】scoped作用与原理

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

18.==【百分百必问】==第一次加载页面会触发哪几个钩子函数？

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

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

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

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

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

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

25.【高频】`$route和$router的区别？`

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

会了它+稳定发挥=3000包吃住相关推荐

最新文章

热门文章

会了它+稳定发挥=3000包吃住

1.【基础（自宫）】Vue的最大优势是什么?

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

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

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

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

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

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

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

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

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

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

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

13.【几乎必问】vue组件传值

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

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

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

16.【高频】scoped作用与原理

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

18.==【百分百必问】==第一次加载页面会触发哪几个钩子函数？

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

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

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

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

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

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

25.【高频】$route和$router的区别？

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

会了它+稳定发挥=3000包吃住相关推荐

最新文章

热门文章

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

25.【高频】`$route和$router的区别？`