Vue前端面试题（主要Vue）

---

前言

春天是拿offer的好季节，这里有个人整理的一些关于vue的一些面试提问，希望能帮助到大家拿到自己想要的offer，主页还有js部分的一些可以结合一起看！！！！

提示：以下是本篇文章正文内容，下面案例可供参考

1、请简述你对vue的理解

Vue是一套构建用户界面的渐进式的自底向上增量开发的MVVM框架，核心是关注视图层，vue的核心是为了解决数据的绑定问题，为了开发大型单页面应用和组件化，所以vue的核心思想是数据驱动和组件化，这里也说一下MVVM思想，MVVM思想是 模型 视图 vm是v和m连接的桥梁，当模型层数据修改时，VM层会检测到，并通知视图层进行相应修改

2、请简述vue的单向数据流

父级prop的更新会向下流动到子组件中，每次父组件发生更新，子组件所有的prop都会刷新为最新的值
数据从父组件传递给子组件，只能单向绑定，子组件内部不能直接修改父组件传递过来的数据，（可以使用data和computed解决）

3、Vue常用的修饰符有哪些

修饰符：.lazy 改变后触发，光标离开input输入框的时候值才会改变
.number 将输出字符串转为number类型
.trim 自动过滤用户输入的首尾空格
事件修饰符：
.stop 阻止点击事件冒泡，相当于原生js中的event.stopPropagation()
.prevent 防止执行预设的行为，相当于原生js中event.preventDefault()
.capture 添加事件侦听器时使用事件捕获模式，就是谁有该事件修饰符，就先触发谁
.self 只会触发自己范围内的事件，不包括子元素
.once 只执行一次
键盘修饰符：
.enter 回车键 .tab 制表键 .esc返回键 .space 空格键
.up向上键 .down 向下键 .left向左建 .right向右键
系统修饰符：.ctrl .alt .shift .meta

4、v-text与{{}}与v-html区别

{{}} 将数据解析为纯文本，不能显示输出html
v-html 可以渲染输出html
v-text 将数据解析为纯文本，不能输出真正的html，与花括号的区别是在页面加载时不显示双花括号
v-text 指令：
作用：操作网页元素中的纯文本内容。{{}}是他的另外一种写法
v-text与{{}}区别：
v-text与{{}}等价，{{}}叫模板插值，v-text叫指令。
有一点区别就是，在渲染的数据比较多的时候，可能会把大括号显示出来，俗称屏幕闪动：

5、v-on可以绑定多个方法吗

可以 如果绑定多个事件，可以用键值对的形式 事件类型：事件名如果绑定是多个相同事件，直接用逗号分隔就行

6、Vue循环的key作用

Key值的存在保证了唯一性，Vue在执行时，会对节点进行检查，如果没有key值，那么vue检查到这里有dom节点，就会对内容清空并赋新值，如果有key值存在，那么会对新老节点进行对比，比较两者key是否相同，进行调换位置或删除操作

7、计算属性与watch区别

Computed watch 区别就是computed的缓存功能，当无关数据数据改变时，不会重新计算，直接使用缓存中的值。计算属性是用来声明式的描述一个值依赖了其他的值，当所依赖的值后者变量发生变化时，计算属性也跟着改变，
Watch监听的是在data中定义的变量，当该变量变化时，会触发watch中的方法

8、Vue的生命周期请简述

vue的生命周期就是vue实例创建到实例销毁的过程。期间会有8个钩子函数的调用。
beforeCreate（创建实例）
created（创建完成）、
beforeMount（开始创建模板）
mounted（创建完成）、
beforeUpdate（开始更新）
updated（更新完成）、
beforeDestroy（开始销毁）
destroyed（销毁完成）
1、beforeCreate
在实例初始化之后，数据观测和event/watcher时间配置之前被调用。
2、created
实例已经创建完成之后被调用。在这一步，实例已经完成以下的配置：数据观测，属性和方法的运算，watch/event事件回调。然而，挂载阶段还没开始，$el属性目前不可见。
3、beforeMount
在挂载开始之前被调用：相关的render函数首次被调用。　　该钩子在服务器端渲染期间不被调用。
4、mounted
el被新创建的vm.替换，并挂在到实例上去之后调用该钩子函数。如果实例挂载了一个文档内元素，当被调用时​el也在文档内。　　该钩子在服务端渲染期间不被调用。
5、beforeUpdate
数据更新时调用，发生在虚拟DOM重新渲染和打补丁之前。　　你可以在这个钩子中进一步第更改状态，这不会触发附加的重渲染过程。　　该钩子在服务端渲染期间不被调用。
6、updated
由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。　　当这个钩子被调用时，组件DOM已经更新，所以你现在可以执行依赖于DOM的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。　　该钩子在服务端渲染期间不被调用。
7、activated
keep-alive组件激活时调用。　　该钩子在服务器端渲染期间不被调用。
8、deactivated
keep-alive组件停用时调用。　　该钩子在服务端渲染期间不被调用。
9、beforeDestroy 【类似于React生命周期的componentWillUnmount】
实例销毁之间调用。在这一步，实例仍然完全可用。　　该钩子在服务端渲染期间不被调用。
10、destroyed
Vue实例销毁后调用。调用后，Vue实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。　　该钩子在服务端渲染不会被调用

9、Vue中路由跳转方式（声明式/编程式）

Vue中路由跳转有两种，分别是声明式和编程式
用js方式进行跳转的叫编程式导航 this.$router.push（）
用router-link进行跳转的叫声明式 router-view 路由出口，路由模板显示的位置
路由中name属性有什么作用？
在router-link中使用name导航到对应路由
使用name导航的同时，给子路由传递参数

10、DOM渲染在那个生命周期阶段内完成

DOM渲染在mounted周期中就已经完成
Vue路由的实现
前端路由就是更新视图但不请求页面，
利用锚点完成切换，页面不会刷新
官网推荐用vue-router.js来引入路由模块

11、定义路由组件

定义路由，使用component进行路由映射组件，用name导航到对应路由
创建router实例，传入routes配置
创建和挂载根实例
用router-link设置路由跳转

12、Vuex是什么？怎么使用？在那种场景下使用

Vuex是一个专为vue.js应用程序开发的状态管理模式，通过创建一个集中的数据存储，方便程序中的所有组件进行访问，简单来说 vuex就是vue的状态管理工具
Vuex有五个属性 state getters mutations actions modules
State就是数据源存放地，对应一般vue对象的data，state里面存放的数据是响应式的，state数据发生改变，对应这个数据的组件也会发生改变 用this.$store.state.xxx调用Getters相当于store的计算属性，主要是对state中数据的过滤，用this.$store.getters.xxx调用
Mutations 处理数据逻辑的方法全部放在mutations中，当触发事件想改变state数据的时候使用mutations，用this.$store.commit调用，给这个方法添加一个参数，就是mutation的载荷（payload）Actions异步操作数据，但是是通过mutation来操作用this.$store.dispatch来触发，actions也支持载荷
使用场景：组件之间的状态，登录状态，加入购物车，音乐播放

13、Vue路由模式hash和history，简单讲一下

Hash模式地址栏中有#，history没有，history模式下刷新，会出现404情况，需要后台配置
使用 JavaScript 来对 loaction.hash 进行赋值，改变 URL 的 hash 值可以使用 hashchange 事件来监听 hash 值的变化
HTML5 提供了 History API 来实现 URL 的变化。其中最主要的 API 有以下两个：history.pushState() 和 history.repalceState()。这两个 API 可以在不进行刷新的情况下，操作浏览器的历史纪录。唯一不同的是，前者是新增一个历史记录，后者是直接替换当前的历史记录。

14、Vue路由传参的两种方式，params和query方式与区别

动态路由也可以叫路由传参，就是根据不同的选择在同一个组件渲染不同的内容
用法上：query用path引入，params用name引入，接收参数都是类似的，分别是this.$route.query.name和this.$route.params.name
url展示上:params类似于post，query类似于get，也就是安全问题，params传值相对更安全点，query通过url传参，刷新页面还在，params刷新页面不在了

15、自定义指令

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

如果想注册局部指令，组件中也接受一个 directives 的选项：

directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}
//使用的时候 即可

16、Vue中指令有哪些

v-for：循环数组，对象，字符串，数字
v-on：绑定事件监听
v-bind：动态绑定一个或者多个属性
v-model：表单控件或者组件上创建双向绑定
v-if v-else v-else-if 条件渲染
v-show 根据表达式真假，切换元素的display
v-html 更新元素的innerhtml
v-text 更新元素的textcontent
v-pre 跳过这个元素和子元素的编译过程
v-clock 这个指令保持在元素上知道关联实例结束编译
v-once 只渲染一次

17、 vue如何定义一个过滤器

过滤器本质就是一个有参数有返回值的方法
new Vue({
　　　　filters:{
　　　　　　myCurrency:function(myInput){
　　　　　　　　return 处理后的数据

　　　　　　}

　　　　}

})
//使用方法：
{{表达式 | 过滤器}}
过滤器高级用法：可以指定参数，告诉过滤器按照参数进行数据的过滤

18、 Vue的路由钩子函数/路由守卫有哪些

全局守卫：beforeEach（to，from，next）和afterEach（to，from）
to: 即将要进入的目标
from: 当前导航正要离开的路由

可选的第三个参数 next 这是一个常见的错误来源，可以通过 RFC 来消除错误。然而，它仍然是被支持的，这意味着你可以向任何导航守卫传递第三个参数。在这种情况下，确保 next 在任何给定的导航守卫中都被严格调用一次。它可以出现多于一次，但是只能在所有的逻辑路径都不重叠的情况下，否则钩子永远都不会被解析或报错。

// next 使用
router.beforeEach((to, from, next) => {
  if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
  else next()
})

路由独享守卫：beforeEnter
组件内的守卫：路由进入/更新/离开之前 beforeRouterEnter/update/leave

const router = createRouter({ ... })

router.beforeEach((to, from) => {
  // ...
  // 返回 false 以取消导航
  return false
})

19、对vue 中keep-alive的理解

概念：keep-alive是vue的内置组件，当它动态包裹组件时，会缓存不活动的组件实例，它自身不会渲染成一个DOM元素也不会出现在父组件链中
作用：在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间以及性能消耗，提高用户体验。
生命周期函数：Activated在keep-alive组件激活时调用，deactivated在keep-alive组件停用时调用

20、Vue中组件传值

正向：父传子 父组件把要传递的数据绑定在属性上，发送，子组件通过props接收
逆向：子传父 子组件通过this.$emit（自定义事件名，要发送的数据），父组件设置一个监听事件来接收，然后拿到数据 也可以在dom元素上绑定ref 然后用refs接收
兄弟：eventbus 中央事件总线 通过Vuex 缓存也可以达到效果

21、Vue插槽的使用

首先槽口（插槽）可以放什么内容？放在哪？什么作用？可以放任意内容，在子组件中使用，是为了将父组件中的子组件模板数据正常显示。
具名插槽和匿名插槽，作用域插槽，说白了就是在组件上的属性，可以在组件元素内使用，
可以在父组件中使用slot-scope从子组件获取数据

22、Vue双向绑定的原理

Vue双向绑定就是：数据变化更新视图，视图变化更新数据
Vue数据双向绑定是通过数据劫持和观察者模式来实现的，
数据劫持，object.defineproperty它的目的是：当给属性赋值的时候，程序可以感知到，就可以控制改变属性值观察者模式 当属性发生改变的时候，使用该数据的地方也发生改变

23、Vuex中action如何提交给mutation的

Action函数接收一个与store实例具有相同方法和属性的context对象，可以调用context.commit提交一个mutation，或者通过context.state和context.getters获取state和getters

24、Route与router区别

1.router是VueRouter的一个对象，通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象，这个对象中是一个全局的对象，他包含了所有的路由包含了许多关键的对象和属性。
2.route是一个跳转的路由对象，每一个路由都会有一个route对象，是一个局部的对象，可以获取对应的name,path,params,query等

25、v-for与v-if优先级

首先不要把v-if与v-for用在同一个元素上，原因：v-for比v-if优先，如果每一次都需要遍历整个数组，将会影响速度，尤其是当之需要渲染很小一部分的时候。
v-for 比 v-if 具有更高的优先级

26、vue请求数据放在created好还是mounted里好？

答：created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。
如果在mounted钩子函数中请求数据可能导致页面闪屏问题
其实就是加载时机问题，放在created里会比mounted触发早一点，如果在页面挂载完之前请求完成的话就不会看到闪屏了

27、vue懒加载的方法？

答:常用的懒加载方式有两种：即使用 ES中的import 和 vue异步组件
export default new Router({
routes: [{
path: ‘/’,
name: ‘HelloWorld’,
component: () => import("@/components/HelloWorld")
}]
})
使用VUE中的异步组件进行懒加载
export default new Router({
routes: [{
path: ‘/’,
name: ‘HelloWorld’,
component: resolve => { require([’@/components/HelloWorld’],resovle); }
}]
}

28、v-if和v-show区别

v-if针对条件切换，可以做异步判断 触发组件的、、、钩子，由变为的时候触发组件的、方法falsetruebeforeCreatecreatebeforeMountmountedtruefalsebeforeDestorydestoryed 性能消耗：有更高的切换消耗
v-show用来做频繁的切换，类似display：none/block
v-show由变为的时候不会触发组件的生命周期falsetrue
相同点：v-if与v-show都可以动态控制dom元素显示隐藏
不同点：v-if显示隐藏是将dom元素整个添加或删除，而v-show隐藏则是为该元素添加css–display:none，dom元素还在。

29、Vue里面的虚拟dom怎么理解？

虚拟DOM 就是在 真实DOM的基础上建立的一个抽象层 (把存储在javascripts 内存 中描述DOM节点的数据 叫做 虚拟DOM)

30、Vue2.0和Vue3.0的区别

1.项目目录结构
vue-cli2.0与3.0在目录结构方面，有明显的不同
vue-cli3.0移除了配置文件目录，config 和 build 文件夹
同时移除了 static 静态文件夹，新增了 public 文件夹，打开层级目录还会发现， index.html 移动到 public 中
2.配置项
3.0 config文件已经被移除，但是多了.env.production和env.development文件，除了文件位置，实际配置起来和2.0没什么不同
没了config文件，跨域需要配置域名时，从config/index.js 挪到了vue.config.js中，配置方法不变
3.渲染
Vue2.x使用的Virtual Dom实现的渲染
Vue3.0不论是原生的html标签还是vue组件，他们都会通过h函数来判断，如果是原生html标签，在运行时直接通过Virtual Dom来直接渲染，同样如果是组件会直接生成组件代码
4.数据监听
Vue2.x大家都知道使用的是es5的object.defineproperties中getter和setter实现的，而vue3.0的版本，是基于Proxy进行监听的，其实基于proxy监听就是所谓的lazy by default，什么意思呢，就是只要你用到了才会监听，可以理解为‘按需监听’，官方给出的诠释是：速度加倍，同时内存占用还减半。
5.按需引入
Vue2.x中new出的实例对象，所有的东西都在这个vue对象上，这样其实无论你用到还是没用到，都会跑一变。而vue3.0中可以用ES module imports按需引入，如：keep-alive内置组件、v-model指令，等等。