Vue面试题以及实际项目中经常遇到的知识点（高频使用）

写在前面

最近一次更新时间：2023/04/23

$这篇博客会随着技术的深入持续更新的。本篇博客默认为2.0版本的，遇到3.0的会特殊标识，没有标识就说明是2.0的$

---

之前有提到，在经历了前端转型之后，一场技术变革的到来，小程序，h5移动端，对性能优化的要求越来越高，受面向对象思想编程方式的影响，前端现在主流的技术框架就是Vue,React,Angular.他们的数据驱动模式，MVVM模式，很受欢迎，这种spa单页面应用，组件思维对一个庞大的web应用很有帮助提升加载速度，减少Dom操作，随之而来的也就是不断地学习，对技术员的技术要求也开始偏向于vue,小程序，公众号，由于智能手机的普及，app端比网页更受欢迎，所以就要不断地学习新的知识，否则会被淘汰。

---

以上为总结的常见的面试问题，有不全的希望简友多多提供宝贵的意见，在评论区评论。

• 有关前端面试题总结请查看前端面试题总结心得
• 有关小程序的面试题以及项目中遇到的坑总结请查看小程序面试题总结心得
• 有关es6面试题以及一些常用的知识点的总结请查看es6语法的一些知识点和面试题总结
• 有关前端安全问题详情请移步前端安全问题小结

---

好了，不说废话了，总结一下使用vue开发项目过程中遇到的坑以及面试经验。

这里关于v-model(vue 响应式)原理的仅限于vue3.0以下版本，听说vue3.0不在采用Object.defineProperty,具体的还有待学习，完了了解了再来更新。

vue3.0原理已经更新，详情移步vue2.0和3.0的响应式原理以及区别

step一，Vue3.0的路由模式有哪些以及原理，Vue2.0和Vue3.0路由模式的区别

目前官方文档介绍的是有两种模式：1，Hash 2，HTML5模式
3.0的路由创建跟2.0还是有区别的，下边列出3.0的

• 1, 首先要安装vue-router

npm install vue-router@4

• 2,在src目录下新建文件夹router文件夹，在router文件夹下新建index.js文件，内容如下

//vue3.0的路由模式需要先引入
import {createRouter,createWebHashHistory,createWebHistory} from 'vue-router';
import home from '../pages/home/index.vue';
const routes = [{
    path: '/',
    name: 'index',
    component:home,
    meta: { keepAlive: false },
}];
//3.0和2.0的区别就在这
const router = createRouter({
	history:createWebHashHistory(),   //hash模式
	// history:createWebHistory(),   //HTML5模式    原 vue2.x的history模式
	routes,
})
export default router;

接下来看看vue2.0的路由

2.0的两种模式：1，Hash 2，history模式

const Router = require('vue-router');
const router = new VueRouter({
  mode: 'history', //直接输入history或者hash即可
  routes: [...]
})
export default router;

两个版本的变化列一下子啊

• 1， 由2.0的new Router变化为3.0的createRouter，Vue Router不再是一个类，而是一组函数，需要调用
• 2，mode: ‘history’ 配置已经被一个更灵活的 history 配置所取代

"history": createWebHistory()
"hash": createWebHashHistory()
"abstract": createMemoryHistory()

其他的具体的区别和变化，请移步官方文档vue2.0到vue3.0的路由变化

两种模式的实现原理，不是很具体，后期会慢慢更新

• 1, hash 模式：利用浏览器Api hashChange事件来管理当前渲染的视图

window.addEventListener('hashchange', () => {
 console.log('The hash has changed!')
}, false);

• 2,history模式:通过监听浏览器的pushState()和replaceState()事件管理当前渲染的视图

step二，vue路由传参的方式

$回答关键字$

• router.js 后边跟:id配置参数
• query 方法传参
• name 方法传参
• vue自带标签标签传参
• 详情请看Vue $router 路由传参的4种方法详解

step三，vue组件之间的传参

$回答关键字$

• 父传子 props
• 子传父 this.$emit
• 非父子组件 eventHub 中转站 this.$on
• vuex state 存的变量，mutations改变的状态 actions 触发的行为（方法）
  组件传参具体的传参请参考vue2.0父子组件以及非父子组件通信传参详解
  vuex stroe 具体的请参考vuex原理，用法踩坑小计
• vue3.0 依赖注入方式传参 传送门 ## 标题vue3.0 依赖注入使用教程

step四，vue-router有哪几种导航钩子？

答案

• 第一种是全局导航钩子（全局守卫）：router.beforeEach(to,from,next)，作用：跳转前进行判断拦截。
• 第 二种：全局解析守卫router.beforeResolve,在导航被确认前，所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。（2.5.0新增）。
• 第三种：单独路由独享的守卫beforeEnter,在路由配置时定义，与全局守卫的方法是一样的。
• 第四种：组件内的守卫。直接在路由组件内定义守卫，
  以下为官网文档的介绍：

  beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  },
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }

step五，请写出几种常用的vue指令

v-once、v-for、v-if、v-show、v-on,v-model、v-text、v-html、v-bind、v-slot

step六，请详细解释一下vue(2.0)的生命周期？

答案：

生命周期	阶段	描述
beforeCreated	创建前	vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。
created	创建后	vue实例的数据对象data有了，$el还没有。
beforeMount	模板载入前	vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换
mounted	模板载入后	vue实例挂载完成，data.message成功渲染。
beforeUpdate	组件更新前	组件更新之前调用
updated	组件更新后	组件更新之后调用
beforeDestroy	组件销毁前	调用$destroy方法后，立即执行beforeDestroy
pdestroyed	组件销毁后	组件销毁后调用，此时只剩下dom空壳

这里需要注意的是vue3.0销毁前后生命周期已经更改

生命周期	阶段	描述
beforeUnmount	组件销毁前	组件销毁之前要做什么但是3.0之后----官方文档:用户不应该再手动管理单个Vue组件的生命周期
unmounted	组件销毁后	组件销毁后调用，此时只剩下dom空壳

step七，slot是什么？并说一下详细的用法？

答案：
vue官网解释：slot 插槽，-------（Vue 实现了一套内容分发的 API，这套 API 基于当前的 Web Components 规范草案，将 <slot> 元素作为承载分发内容的出口。
）是不是看完稀里糊涂的，反正我是稀里糊涂的，再来说说我自己的理解:
slot就是为了实现真正的灵活的单页组件，在组件外部灵活控制组件内部的内容一种形式或者是入口，就是将组件内所需要的内容以插槽（slot）的形式插入到公共组件中，以达到灵活控制。
当组件渲染的时候，这个 元素将会被替换为“Your Profile”。插槽内可以包含任何模板代码，包括 HTML：详情请看vue 带动画效果的NavBar这里边有详细介绍到<slot>的使用方法。

step八，谈谈你对vue响应式原理的理解?

详情移步vue2.0和3.0的响应式原理以及区别
。

step九，直接对对象属性进行添加和删除会不会直接响应到视图中？也就是说数组的更新方法？并说明原因？

答案：
直接对对象属性进行添加和删除是不会响应到视图中的，需要用到this.$set()方法
举个例子

var vm = new Vue({
  data:{
      myjson:{
    name:"张三"     
}
  }
})
vm.myjson.age= "12";    //这样直接对对象属性进行增加是不会直接响应到视图中的。
需要这么写：
this.$set(this.myjson,'age',12);//才会生效

原因
受现代 JavaScript 的限制 (以及废弃 Object.observe)，Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。

step十，如何创建一个公共的全局组件，并在每个页面中调用以及如何创建并调用公共的方法？

答案:
$回答关键字$
将创建好的组件或者js方法导出并挂载到vue实例上。
详情请参考关于vue全局引用公共的js和公共的组件的折腾

step十一，请说明v-if和v-show的异同？

同：两者都是达到显示隐藏的功能
异：

• v-if指令是直接销毁和重建DOM达到让元素显示和隐藏的效果
• v-show指令通过修改元素的display属性让其显示或者隐藏

step十二，<keep-alive></keep-alive>的作用是什么?

答案：
<keep-alive></keep-alive> 包裹动态组件时，会缓存不活动的组件实例,主要用于保留组件状态或避免重新渲染。
用自己的理解说
比如有一个列表和一个详情，那么用户就会经常执行打开详情=>返回列表=>打开详情…这样的话列表和详情都是一个频率很高的页面，那么就可以对列表组件使用进行缓存，这样用户每次返回列表的时候，都能从缓存中快速渲染，而不是重新渲染，这样就会减轻服务器压力，提高性能。

step十三，<router-link>属性以及方法？

答案：

• :to 相当于a标签中的"herf"属性，后面跟跳转链接所用 ，会渲染成a标签–

<router-link :to="/home">Home</router-link>
<!-- 渲染结果 -->
<a href="/home">Home</a>

• replace属性，加上该属性页面切换不会留下历史纪录。

<router-link :to="/home" replace></router-link>

• tag属性，具有tag属性的router-link会被渲染成相应的标签

<router-link :to="/home" tag="li">Home</router-link>
<!-- 渲染结果 -->
<li>Home</li>
此时页面的li同样会起到a链接跳转的结果，vue会自动为其绑定点击事件，并跳转页面

• active-class属性：设置链接激活时的class属性：默认值为router-link-active,所以如果没有设置，就会被渲染为这个class，我们可以在router.js里边配置这个属性

const router = new VueRouter({
  mode: 'hash',
  linkActiveClass: 'u-link--Active', // 这是链接激活时的class
})
<router-link :to="/home" active-class="u-link--Active">Home</router-link>

• exact属性：严格模式

// 这个链接只会在地址为 / 的时候被激活 
<router-link to="/" exact>Home</router-link>

<router-link to="/user">USER</router-link>

<router-link to="/user/userinfo">USER-info</router-link>

// 如果不设置exact，则当路由到了/user/userinfo 页面时，USER也是被设置了router-link-active样式的！

• 方法：

 router-link默认是触发router.push(location)，如果设置的replace 则触发router.replace(location)，这有啥区别呢?
　　router.push() ：导航跑到不同的URL,这个方法会向history栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的url.
　　router.replace(): 跟router.push作用是一样的，但是，它不会向history添加新记录，而是跟它的方法名一样替换掉当前的history记录.
　　router.go(n): 这个方法的参数是一个整数，意思是在history记录中向前或者后退多少步，类似window.history.go(n)

step十四，v-once的作用和用法？

只渲染元素和组件一次，随后的渲染，使用了此指令的元素/组件及其所有的子节点，都会当作静态内容并跳过，这可以用于优化更新性能。
举个例子：一看便知

<template>
  <div>
    <div>{{count}}</div>
    <button v-on:click="addCount">改变count的值</button>
  </div>
</template>
<script>
  export default {
    name: "VueOnce",
    data() {
      return {
        count: "我是不可改变的"
      }
    },
    methods: {
      addCount: function () {
        this.count = "我就要改变你";
       此时这个操作dom里边的count是不会变化的
      }
    }
  }
</script>
<style scoped>
</style>

step十五，如何解决在加载页面时出现的闪烁问题。

v-cloak详情请移步v-cloak详解

step十六，vue如何兼容ie的问题。

答案：
回答关键字 - babel-polyfill插件
详情请移步vue-cli 解决ie兼容性问题

step十七，vue-cli如何解决跨域？

答案：常见的后台加请求头以及jsonp就不详细解释了，若要看详细教程请移步前端面试题总结。
这里主要介绍的是 npm模块之http-proxy-middleware的解决跨域的办法。详情移步vue-cli如何解决跨域

step十八，vue如何在父组件中调用子组件的方法。

答案：
回答关键字 - ref
详情请移步vue如何在父组件中调用子组件的方法

step十九，谈谈你对minxins混入的理解以及使用方法

详情请移步深入浅出之vue-cli混入(mixins)的理解和使用

step 二十，谈谈你对watch（侦听器）和 computed (计算属性)理解以及二者的区别。

详情请移步vue watch - 侦听器和computed - 计算属性 的理解和使用

step 二十一， 你知道为什么 vue 或者 react ,angular这些mvvm框架 比传统的操作dom渲染速度要快么？

• 答案就是vue用的是虚拟dom.
• 不了解虚拟dom的同学请移步vue之虚拟dom的认识与理解

step 二十二， vue 父子组件的mounted加载顺序，子组件的mounted要先于父组件的mounted加载。

我自己的解决方案：

• 1， 判断父组件传给子组件的数据加载完成后在加载子组件，这样就能保证传给子组件的数据永远有效了。
• 2，或者再父组件使用ref调用子组件的方法，再展示子组件之前就先调用子组件初始化的方法（为了避免子组件mounted先与父组件mounted先加载而拿不到参数的问题）。

step 二十三，v-model 的实现原理

这里要注意的是不是上边的vue双向绑定和响应式的原理，，是如何实现一个v-model的原理

总结一句话就是绑定数据并且监听(input事件)数据改变然后再赋值给变量
详细的原理请移步vue v-model 的实现原理

step 二十四， v-for中key的作用

v-for的默认方式就是尝试更新元素而不去移动他们，要强制其重新排序元素，需要提供一个唯一的key.
而且还可以保证元素的唯一性

step 二十五，v-if 和 v-for谁的优先级比较高

这边直接给到官方文档最权威的解读

step 二十六，v-on可以同时绑定多个方法吗？

答案是可以

  <div v-on="{click:testClick,mouseleave:testMouseLeave}">
        测试v-on绑定多个方法
    </div>

step 二十七，使用v-html有哪些缺点或者有什么安全性问题？

答案再官方文档就有说明

看到这有不了解xss攻击的请移步前端安全问题小结

step 二十八，你是如何优化首页加载速度和首页白屏问题的？

答案和详细讲解请移步vue 项目单页应用首页加载速度优化以及解决首页白屏问题

step二十九，谈谈你对MVVM 的理解？

• MVVM 由 Model,View,ViewModel 三部分构成，Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑
• View 代表UI 组件，它负责将数据模型转化成UI 展现出来，ViewModel 是一个同步View 和 Model的对象。
• 在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的， 因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。
• ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

结束语

• 1，觉得写的不错的就点个关注吧、会一直更新有用的知识。
• 2，如果觉得还需要补充的知识，请留言，我会及时更新。