Vue面试题（个人总结版吖）

太过爱你忘了你带给我的痛 2022-12-26 00:51 126阅读 0赞

1、简述MVVM和MVC

MVC: Model（模型） View（视图） Controller（控制器） 简单的理解：视图请求数据，将请求发送至控制器，控制器再将请求发送给模型，模型去查找数据，找到之后传给控制器，控制器再传给视图进行渲染。

MVP：

全称：Model-View-Presenter ；MVP 是从经典的模式MVC演变而来，它们的基本思想有相通的地方Controller/Presenter负责逻辑的处理，Model提供数据，View负责显示。

MVVMA Model 代表数据模型 View 代表UI视图 ViewModel 负责监听 Model 中数据的改变并且控制视图的更新(桥梁，可以理解成mvc中的控制器) 简单理解：视图请求数据，将请求发送至控制器，在控制器的两端具有监听机制，直接调用模型的数据，一端改变全部改变，利用数据劫持，结合订阅者和发布者模式，实现数据的双向绑定

2、简述虚拟DOM和diff算法

虚拟dom是利用js描述元素与元素的关系。 好处：是可以快速的渲染和高效的更新元素，提高浏览器的性能

diff算法

优点：最终表现在DOM上的修改只是部分的变更，可以保证高效的渲染，提高网页的性能

缺点：首次渲染大量DOM时，由于多了一层虚拟DOM的计算，会比innerHtml慢一点

3、怎么创建vue的实例

new Vue({
           el: "#app",
           data:{
     
           },
           methods:{
     
           }
      })

4、列举常用指令以及作用· v-html 解析输出变量 能解析html  v-text 解析输出变量  v-bind 给标签绑定属性 可以简写为 :属性名=“变量”  v-on 给元素绑定事件 用法 v-on:事件名=“方法名” 可以简写为@事件名=“方法”  v-pre 跨过当前的标签不解析 用法 ：<标签 v-pre></标签>  v-cloak 解决差值表达式闪烁的问题  v-model 实现数据的双向绑定 只能适用于表单元素  v-for 可以循环遍历数据  v-if 条件输出  v-show条件输出

5、列举出常用的修饰符 .stop 阻止事件冒泡 .capture 设置事件捕获 .self 只有当事件作用在元素本身才会触发 .prevent 阻止默认事件，比如超链接跳转 .once 事件只能触发一次 .keyup.enter .keyup.space 6、v-if和v-show的区别及使用场景

区别： 1、当条件为真的时候 没有区别 当条件为假的时候 v-if是不创建元素 v-show 渲染元素然后隐藏掉 2、v-if更适合数据的筛选和初始渲染 v-show更适合元素的切换

7、vue怎么绑定事件？以及常用的事件修饰符

绑定： v-bind:属性名=“变量” ：属性名=“变量”

语法：@事件名.修饰符=“方法名” .stop 阻止事件冒泡 .capture -事件捕获 .self 只是监听触发改元素的事件 .once - 只触发一次 .prevent - 阻止默认事件

8、methods computed watch的区别

computed具有缓存性，依赖于属性值，只有属性发生改变的时候才会重新调用 methods是没有缓存的，只要调用，就会执行 watch没有缓存性 监听属性 属性值只要发生变化就会执行 可以利用他的特性做一些异步的操作

9、vue中怎么动态的绑定class样式

<标签 v-bind:class="\{类名:变量\}">

10、什么是过滤器？怎么定义全局和局部过滤器

过滤器是实现变量的格式化输出 。过滤器分为局部过滤器还有全局过滤器 全局过滤器 是在多个实例中可以使用的过滤器 语法： Vue.filter(“名”，function(value)\{ // value是调用过滤器的属性的值 \}) 调用： 在v-bind中或者\{ \{ 属性|过滤器名\}\}

局部过滤器 只是在当前的组件或者实例中使用 filters:\{ 名：function(val)\{

}

\} 注意：过滤器可以串联 但是后面的肯定是以前面的为基础 变量|过滤器1|过滤器2

11、[自定义指令的][Link 1]语法是什么？请举例说明一个带参数的自定义指令怎么定义

bind(){} 只调用一次，指令第一次绑定到元素时调用
      inserted(){}被绑定元素插入父节点时调用
      update(){}被绑定元素所在的模板更新时调用，而不论绑定值是否变化
      componentUpdated(){}被绑定元素所在模板完成一次更新周期时调用
      unbind(){}只调用一次， 指令与元素解绑时调用

12、渐进式框架的理解

Vue是一个MVVM的渐进式框架，，渐进式指的是先使用Vue的核心库，然后再根据需求逐渐增加所需要的插件，慢慢的组织成自己的项目，
      我们在使用过程中主张最小化，Vue没有强主张，插件使用比较灵活，也就是没有做职责之外的事。

13丶Vue中双向数据绑定是如何实现的 笛梵 跑破瑞 vue中的v-model可以实现双向绑定，其核心思想通过Object.definePropery来对Vue的数据进行数据劫持， 主要分为三部分 observer主要是负责对Vue数据进行数据劫持，使其数据拥有get和set方法 指令解析器负责绑定数据和指令，绑定试图更新方法

watcher负责数据监听，当数据发生改变通知订阅者，调用视图更新函数更新视图

14丶单页面应用和多页面应用区别及优缺点

单页面应用： 优点：跳转速度快 缺点：首屏加载慢 多页面应用： 有点：首屏加载快 缺点：跳转的效率不高

15丶自定义指令 有哪些钩子函数，及自定义指令的使用场景

bind(){} 只调用一次，指令第一次绑定到元素时调用
     inserted(){}被绑定元素插入父节点时调用
     update(){}被绑定元素所在的模板更新时调用，而不论绑定值是否变化
     componentUpdated(){}被绑定元素所在模板完成一次更新周期时调用

unbind()\{\}只调用一次， 指令与元素解绑时调用

16丶v-clock有什么作用

v-cloak 解决差值表达式闪烁的问题

17、组件特性及好处

特性：重用性，可指定性，互操作性，高内聚性，低耦合度

好处：组件可以拓展HTML元素、封装可重用代码

18、组件的基本组成

一个vue页面主要包括3个部分：界面展示代码template、业务实现代码script、界面布局代码style

19、父传递子如何传递 （1）在父组件的子组件标签上绑定一个属性，挂载要传输的变量 （2）在子组件中通过props来接受数据，props可以是数组也可以是对象，接受的数据可以直接使用 props:\["属性 名"\] props:\{属性名:数据类型\} 20、子传递父如何传递

（1）在父组件的子组件标签上自定义一个事件，然后调用需要的方法
     （2）在子组件的方法中通过 this.$emit("事件")来触发在父组件中定义的事件，数据是以参数的形式进行传递的

21、兄弟组件如何通信

（1）在src中新建一个Bus.js的文件，然后导出一个空的vue实例
           （2）在传输数据的一方引入Bus.js  然后通过Bus.$emit(“事件名”,"参数")来派发事件，数据是以$emit()的参数形式来传递
           （3）在接受的数据的一方 引入 Bus.js 然后通过 Bus.$on("事件名",(data)=>{data是接受的数据})

22、Props验证类型都有哪些

Boolean  布尔
     String   字符串
     Number   数字
     Array   数组
     Function  函数
     Object  对象
     Symbol

23、keep-alive是什么？

keep-alive是vue提供给我们的一个组件，用来在路由切换的时候保存我们的组件状态
    
    当我们在切换路由需要保存失活组件的状态的时候需要用到,比如我浏览淘宝滑动的中间位置，然后又去购物车页面，再回到首页的时候能够保存住我刚才滑动的位置
    
          1. 全局保存在App.vue中  <keep-alive>把routerView保存起来
    
          2. 部分缓存  
               1、router.js中设置要缓存的页面
               {
                         path: '/child1',
                         name: 'Child1',
                         component: Child1,
                         meta:{
                              keepAlive:true
                         }
               }
               },
               2、用v-if来显示router-view是否在keep-alive中出现
               <keep-alive>
                    <router-view v-if="$route.meta.keepAlive"></router-view>
               </keep-alive> 
               <router-view v-if="!$route.meta.keepAlive"></router-view>

24、生命周期共有几个？分别在什么时候使用？ 1.创建 beforeCreate() 在执行这个钩子的时候 只有一些实例本身的事件和生命周期函数 用户自定义不能使用 created() 最早开始使用 data和methods中数据的钩子 2.挂载 beforeMount() 指令已经解析完毕 内存中已经生成dom数 mounted()dom已经渲染完毕 页面和内存的数据已经同步 3.更新 beforeUpdate() 当data的数据发生改变会执行这个钩子 内存中数据是新的 页面是旧的 updated() 内存和页面都是新的 4.销毁 beforeDestroy()即将销毁 data和methods中的数据此时还是可以使用的，可以做一些释放内存的操作 destroyed()已经销毁完毕

activated(组件激活时)：和上面的beforeDestroy和destroyed用法差不多，但是如果我们需要一个实例，在销毁后再次出现的话，用 beforeDestroy和destroyed的话，就太浪费性能了。实例被激活时使用，用于重复激活一个实例的时候

deactivated(组件未激活时)：实例没有被激活时。

errorCaptured(错误调用)：当捕获一个来自后代组件的错误时被调用

25、created和mounted区别

created()是最早使用data中数据的钩子函数 mounted()是最早可以操作dom元素的钩子函数

26、安装脚手架的步骤

vue init webpack mypro  
    
     cd mypro 
    
     cnpm install 
     
     npm run dev

27、为什么要使用脚手架

vue脚手架指的是vue-cli，它是一个专门为单页面应用快速搭建繁杂项目的脚手架
     vue脚手架的作用是用来自动一键生成vue+webpack的项目模版，包括依赖库，免去你手动安装各种插件，寻找各种cdn并一个个引入的麻烦

28、Vue-cli中如何使用sass

cnpm install node-sass --save 
     cnpm install sass-loader@7.3.1 --save 
     
     标签使用 
     <style lang="scss" scope> </style>

29、Vue-cli打包命令是什么？打包后会导致路径问题，应该在哪里修改（面试真题）

npm run build -环境 -域名 -打包文件夹 -平台
     打包后会生成一个dist文件夹
    
     在打包之前，需要将文件中config文件夹下的index.js中的 assetsPublicPath:"" 中的 / 改为 ./

30、Vue-router共有几种模式？默认是哪种？

history模式  hash模式  默认  hash模式

31丶params和query的区别？

1.用法上的

query要用path来引入，params要用name来引入，接收参数都是类似的，分别是this.$route.query.name和this.$route.params.name 2.展示上的 query更加类似于我们ajax中get传参，params则类似于post，说的再简单一点，前者在浏览器地址栏中显示参数，后者则不显示 3.params是路由的一部分,必须要有。query是拼接在url后面的参数，没有也没关系

32、重定向用哪个属性？ redirect属性

33、assets和static的区别（面试真题）

assets目录中文件在打包的时候会进行打包压缩然后上传到打包好的目录 static目录中的文件直接拷贝到打包好的目录中 不会进行压缩

34、请写出嵌套路由的配置规则 \{ path:"", name:"", compoent: ()=>\{\}, children:\[ \{ 子路由配置 \} \] \} 35、有列表页进入到详细页的思路

1. 列表页面点击元素，传递id参数
          2. 详情页面通过query或者params获取id参数，通过id查询数据信息
          3. 渲染详情页面的数据信息

36丶路由钩子函数共有几种？分别是什么？参数to、from、next分别是什么意思？

路由钩子函数有三种分别为 全局守卫  单个路由守卫  组件内部守卫
    全局守卫钩子 beforeEach
    单个路由守卫  beforeEnter
    组件内部守卫 
    	beforeRouteEnter
    	beforeRouteUpdate
    	beforeRouteLeave
    to 对象 去哪儿
    from 对象 从哪来
    next 函数  next()==next(true) 继续执行
    		  不写next==next(false)终止执行
    		  next(path)跳转

37、Vuex是什么？ Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储和管理程序的所有组件的数据

38、Vuex有什么好处？及使用场景

在大型的程序中如果多个组件中用到的数据我们可以存储到vuex,如果小型项目我们可以适当的使用vuex

39、介绍Vuex的核心概念及其作用

state 存储数据   在组件中的使用  this.$store.state.属性名
    mutations 直接操作state中的数据  在组件中的使用 this.$store.commit("方法名",参数)
    actions 可以实现异步操作  在actions中操作mutations中的数据  在组件使用 this.$store.dispatch("方法名"，参数)
    getters getters类似于计算属性可以对state中数据进行逻辑计算 在组件中 this.$store.getters.方法名
    modules 将state分模块

40、详述Vuex运行机制

在组件中通过dispatch来调用actions中的方法在actions中通过commit来调用mutations中的方法，在mutations中可以直接操作state中的数据，state的数据只要一发生改变立马响应到组件中

41、vuex中如何异步修改数据（面试真题）

在vue的组件中通过dispatch来调用actions中的方法，在actions中通过commit来调用mutations中的方法，在mutations可以直接操作state中的数据，state中数据只要发生改变就立马会响应到组件中

42、axios安装步骤

cnpm install axios --save 
    
     main.js 中配置
     import axios from "axios"
     Vue.prototype.$axios = axios;

43、axios常用的请求方式有哪些？

get方法 ，post方法， all() 方法

44、简述axios并发请求

axios我们可以通过all方法完成并发请求，
     在 .then中通过axios.spread拿到all中请求回来数据，在进行数据操作即可

45、Axios创建实例

import  axios from "axios"
     var instance=axios.create({
          baseUrl: "",
          timeout: 3000
     })

46、简述拦截器是什么，共有几个拦截点，分别是什么

拦截器axios发送出去请求或者数据响应回来赋值之前进行数据的拦截或者过滤
    
     主要有请求拦截器  请求发送出去之前拦截
     instance.interceptors.response.use(
     	config=>{
     	return config
     	}
     )
     响应拦截器  数据响应回来赋值之前拦截
     instance.interceptors.response.use(
     	res=>{
     		return res
     	}
     )

47、Element UI完整引入步骤及按需引入步骤是什么？

**完整引入**

在 main.js 中写入以下内容：
    
     import Vue from 'vue';
     import ElementUI from 'element-ui';
     import 'element-ui/lib/theme-chalk/index.css';
    
     Vue.use(ElementUI);

**按需引入**

import { 组件名 } from 'element-ui';
     import 'element-ui/lib/theme-chalk/index.css';
     Vue.use(组件名);

48、vm.$nextTick

参数：\{Function\}\[callback\]

用法：将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用它，然后等待DOM更新。它跟全局方法Vue.nextTick一样，不同的是回调的this自动绑定到调用它的实例上。

this.nextTick(callback),当数据发生变化，更新后执行回调。

this.$nextTick(callback),当dom发生变化，更新后执行的回调。

49、在cnode社区遇到bug该怎么修复

fragment状态异常

错误原因：

activity已经不存在，还在commit，造成状态异常

commit(); commitallowstateslos();