前端vue面试题分享（附答案）

本篇文章给大家分享一些常见的前端vue面试题，有一定的参考价值，希望对大家有所帮助。

vue面试题

• vue.js的特点？
• vue常用指令
• vue的双向数据绑定原理是什么?
• vue-router有哪几种导航钩子?
• active-class是哪个组件的属性?嵌套路由怎么定义?
• scss是什么?在 vue.cli中的安装使用步骤是?有哪几大特性?
• sass是什么？如何在vue中安装和使用？
• 请说下封装 vue组件的过程?
• 请详细说下你对vue生命周期的理解?
• 父子组件的生命周期顺序
• watch和computed的区别
• computed 和 methods 的区别
• vue中如何解决页面不重新渲染问题
• v-if和v-for一起使用的弊端以及它的解决办法？
• v-show指令和v-if指令的区别是什么？
• 虚拟DOM，diff算法?
• 过滤器 (Filter)
• 常见的事件修饰符及其作用
• Vue 组件 data 为什么必须是函数 ?
• axios是什么
• 在 Vue. js开发环境下调用API接口，如何避免跨域
• 组件传值方式有哪些？
• 如何让CSS只在当前组件中起作用？
• keep-alive是什么？
• 如何在 Vue. js动态插入图片
• vuex的核心概念
• vuex是什么？怎么使用？哪种功能场景使用它？
• vue中key值的作用
• 使用import时，webpack会对node_modules里的依赖做什么？

vue面试题解析

vue.js的特点？

• 易用： 简单，易学，上手快
• 灵活： （渐进式）不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩。
• 高效： 20kB min+gzip 运行大小；超快虚拟 DOM；最省心的优化
• 双向绑定：开发效率高
• 基于组件的代码共享
• Web项目工程化，增加可读性、可维护性

vue常用指令

v-model 多用于表单元素实现双向数据绑定（同angular中的ng-model）
v-bind 动态绑定 作用： 及时对页面的数据进行更改
v-on:click 给标签绑定函数，可以缩写为@，例如绑定一个点击函数 函数必须写在methods里面
v-for 格式： v-for="字段名 in(of) 数组json" 循环数组或json(同angular中的ng-repeat)
v-show 显示内容 （同angular中的ng-show）
v-hide 隐藏内容（同angular中的ng-hide）
v-if 显示与隐藏 （dom元素的删除添加 同angular中的ng-if 默认值为false）
v-else-if 必须和v-if连用
v-else 必须和v-if连用 不能单独使用 否则报错 模板编译错误
v-text 解析文本
v-html 解析html标签
v-bind:class 三种绑定方法 1、对象型 '{red:isred}' 2、三元型 'isred?"red":"blue"' 3、数组型 '[{red:"isred"},{blue:"isblue"}]'
v-once 进入页面时 只渲染一次 不在进行渲染
v-cloak 防止闪烁
v-pre 把标签内部的元素原位输出

Vue的双向数据绑定原理是什么?

是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。从而实现数据的双向绑定

vue-router有哪几种导航钩子?

一.全局守卫
1.router.beforeEach((to,from,next) => {})

2. 回调函数中的参数，to：进入到哪个路由去，from：从哪个路由离开，next：函数，决定是否展示你要看到的路由页面。
3. 如下例：main.js中设置全局守卫

在main.js中，有一个路由实例化对象router。在main.js中设置守卫已是全局守卫。

如下，判断to.path当前将要进入的路径是否为登录或注册，如果是就执行next()，展示当前界面。如果不是，就弹出alert，然后移至登录界面。
这样就可实现，用户在未登录状态下，展示的一直是登录界面。

router.beforeEach((to,from,next) => {
  if(to.path == '/login' || to.path == '/home' || to.path == '/event'){
    next();
  }else {
    alert('您还没有登录')
    next('/login')
  }
})

image.jpeg

4. 全局后置钩子router.afterEach((to,from)=>{})
   只有两个参数，to：进入到哪个路由去，from：从哪个路由离。
   如下，每次切换路由时，都会弹出alert，点击确定后，展示当前页面。

router.afterEach((to,from)=>{
  alert("每次跳转页面都会弹出");
})

image.jpeg

二.组件内的守卫

1. 到达这个组件时，beforeRouteEnter:(to,from,next)=>{}
   在Admin.vue文件中，点击转到admin路由时，执行beforeRouteEnter函数
   to，from参数与上面使用方法一致。next回调函数略有不同。
   如下例，data 组件内守卫有特殊情况，如果我们直接以
   beforeRouteEnter:(to,from,next)=>{ alert("hello" + this.name);}进行访问admin页面，会发现alert输出hello undefined。这是因为，现在访问不到我们的data属性，执行顺序是不一致，这与的声明周期有关。在执行完之前，data数据还未渲染。所以这里，next()会给一个对应的回调，帮助完成。

data(){
        return{
            name:"通过审核！"
        }
    },
    beforeRouteEnter:(to,from,next)=>{
        next(vm=>{
            alert("恭喜你" + vm.name);
        })
    },

image.jpeg

2. 离开这个组件时，beforeRouteLeave:(to,from,next)=>{}
   点击其他组件时，判断是否确认离开。确认执行next()；取消执行next(false)，留在当前页面。

beforeRouteLeave:(to,from,next)=>{
        if(confirm("确定离开此页面吗？") == true){
            next();
        }else{
            next(false);
        }
    },

image.png

三.路由独享的守卫
beforeEnter:(to,from,next)=>{}，用法与全局守卫一致。只是，将其写进其中一个路由对象中，只在这个路由下起作用。

{
      path: '/demo',
      name: 'Demo',
      component: Demo,beforeEnter:(to,from,next)=>{
        alert("非登录状态，不能访问页面");
        next('/login');
    },
    },

image.png

active-class是哪个组件的属性?嵌套路由怎么定义?

active-class是vue-router模块的router-link组件中的属性，一般是用来做选中样式的切换
一级路由里面使用children配置子路由，就是嵌套路由

scss是什么?在 vue.cli中的安装使用步骤是?有哪几大特性?

scsss是css预编译；
使用步骤：
第一步：用npm下三个loader(sass-loader、css-loader、node-sass)；
第二步：在build目录找到webpack.base.config.js，在那个extends属性中加一个拓展.scss；
第三步：还是在同一个文件，配置一个module属性；
第四步：然后在组件的style标签加上lang属性，例如：lang="scss"；
有哪几大特性：
1、可以用变量，例如（$变量名称=值）；
2、可以用混合器；
3、可以嵌套；

sass是什么？如何在vue中安装和使用？

sass是一种CSS预编译语言安装和使用步骤如下。

• 用npm安装加载程序（ sass-loader、 css-loader等加载程序)。
• 在 webpack.config.js中配置sass加载程序。

请说下封装 vue组件的过程?

在components文件夹下建一个vue文件封装组件
根据业务逻辑、需求写写UI 静态样式等 定义好props的属性数据 子组件修改好数据之后，想把数据传递给父组件，可以使用emit()方法 定义插槽增加组件的可拓展性

• 全局组件的话就在main.js中引入、注册 然后再单页面使用即可
• 局部组件的话就在单页面引入、注册 在使用即可

请详细说下你对vue生命周期的理解?

每个vue实例都有一个生命周期 一共分为八个阶段
创建前后： beforeCreate/created 渲染前后： beforeMount/mounted
更新前后： beforeUpdate/updated 销毁前后： beforeDestroy/destroyed

• 在created周期的时候 就可以访问到this了 也可以调用异步的方法去获取后台的数据
• 在mounted周期的时候 就能够访问到DOM结构 对dom结构进行一些增删改查的操作 因为在这个时候 dom结构已经渲染完成并挂载在vue实例上面了
• 当data变化时，会触发beforeUpdate和updated方法
• 在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在

父子组件的生命周期顺序

• 加载渲染过程：
  父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
• 子组件更新过程：父beforeUpdate->子beforeUpdate->子updated->父updated
• 父组件更新过程：父beforeUpdate->父updated
• 销毁过程：父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

watch和computed的区别

watch顾名思义，用于监听数据变化，其中可以监听的数据来源有三部分：props、data、computed内的数据；watch提供两个参数（newValue，oldValue），第一个参数是新值，第二个参数保存旧值；
computed用于处理复杂的逻辑运算，主要和methods储存方法来进行区分；methods储存方法，，computed储存需要处理的数据值；methods每次都会调用，computed有缓存机制，只有改变时才执行，性能更佳；

总的来说：
watch擅长处理的场景：一个数据影响多个数据
computed擅长处理的场景：一个数据受多个数据影响

computed 和 methods 的区别

computed: 计算属性是基于它们的依赖进行缓存的,只有在它的相关依赖发生改变时才会重新求值对于 method
method: 只要发生重新渲染，调用总会执行该函数

vue中如何解决页面不重新渲染问题

使用vue，会遇到这样一个问题，修改了对象的属性后，页面不会渲染

• 修改对象属性后页面未重新渲染可以使用 this.$set(对象名称, '属性名', '属性值')
• 使用this.$forceUpdate()方法可重新渲染页面

v-if和v-for一起使用的弊端以及它的解决办法？

• 由于v-for的优先级比v-if高，所以导致每循环一次就会去v-if一次
• 而v-if是通过创建和销毁dom元素来控制元素的显示与隐藏
• 所以就会不停的去创建和销毁元素，造成页面卡顿，性能下降。
  解决办法：在v-for的外层或内层包裹一个元素来使用v-if

v-show指令和v-if指令的区别是什么？

v-show 可以根据表达式的值来显示或者隐藏HTML元素。当v-show赋值为false时，元素被隐藏，此时查看代码时，该元素上会多一个内联样式style=“display:none”；而v-if会控制这个 DOM 节点的存在与否。当我们需要经常切换某个元素的显示/隐藏时，使用v-show会更加节省性能上的开销；当只需要一次显示或隐藏时，使用v-if更加合理。

虚拟DOM，diff算法？

• 让我们不用直接操作DOM元素，只操作数据便可以重新渲染页面
• 虚拟dom是为了解决浏览器性能问题而被设计出来的
  当操作数据时，将改变的dom元素缓存起来，都计算完后再通过比较映射到真实的dom树上
• diff算法比较新旧虚拟dom。如果节点类型相同，则比较数据，修改数据；如果节点不同，直接干掉节点及所有子节点，插入新的节点；如果给每个节点都设置了唯一的key，就可以准确的找到需要改变的内容，否则就会出现修改一个地方导致其他地方都改变的情况。比如A-B-C-D, 我要插入新节点A-B-M-C-D,实际上改变的了C和D。但是设置了key，就可以准确的找到B C并插入

过滤器 (Filter)

在Vue中使用filters来过滤(格式化)数据，filters不会修改数据，而是过滤(格式化)数据，改变用户看到的输出（计算属性 computed ，方法 methods 都是通过修改数据来处理数据格式的输出显示。
使用场景： 比如需要处理时间、数字等的的显示格式；

常见的事件修饰符及其作用

• .stop：等同于 JavaScript 中的 event.stopPropagation() ，防止事件冒泡；
• .prevent ：等同于 JavaScript 中的 event.preventDefault() ，防止执行预设的行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播）；
• .capture ：当元素发生冒泡时，先触发带有该修饰符的元素。若有多个该修饰符，则由外而内触发。如 div1中嵌套div2中嵌套div3.capture中嵌套div4，那么执行顺序为：div3=》div4=》div2=》div1
• .self ：只会触发自己范围内的事件，不包含子元素；
• .once ：只会触发一次。

Vue 组件 data 为什么必须是函数 ?

因为组件是可以复用的,JS 里对象是引用关系,如果组件 data 是一个对象,那么子组件中的 data 属性值会互相污染。
所以一个组件的 data 选项必须是一个函数,因此每个实例可以维护一份被返回对象的独立的拷贝。

axios是什么？

易用、简洁且高效的http库， 支持node端和浏览器端，支持Promise，支持拦截器等高级配置。

在 Vue. js开发环境下调用API接口，如何避免跨域

config/ index.js内对 proxyTable项配置代理。

组件传值的方式有哪些？

• 父传子：子组件通过props['xx'] 来接收父组件传递的属性 xx 的值
• 子传父：子组件通过 this.$emit('fnName',value) 来传递,父组件通过接收 fnName 事件方法来接收回调
• 其他方式：通过创建一个bus，进行传值
• 使用Vuex

如何让CSS只在当前组件中起作用？

在每一个Vue.js组件中都可以定义各自的CSS、 JavaScript代码。如果希望组件内写的CSS只对当前组件起作用，只需要在Style标签添加Scoped属性，即。

keep-alive是什么？

如果需要在组件切换的时候，保存一些组件的状态防止多次渲染，就可以使用 keep-alive 组件包裹需要保存的组件。
两个重要属性，include 缓存组件名称，exclude 不需要缓存的组件名称。

如何在 Vue. js动态插入图片

对“src”属性插值将导致404请求错误。应使用 v-bind:src （简写:src）格式代替。

vuex的核心概念

• state => 基本数据
• getters => 从基本数据派生的数据
• mutations => 修改数据，同步
• actions => 修改数据，异步 (Action 提交的是 mutation，而不是直接变更状态)
• modules => 模块化Vuex

vuex是什么？怎么使用？哪种功能场景使用它？

• Vuex 是一个专为 Vue.js 应用程序开发的状态管理器，采用集中式存储管理应用的所有组件的状态，主要是为了多页面、多组件之间的通信。
• Vuex有5个重要的属性，分别是 State、Getter、Mutation、Action、Module，由 view 层发起一个 Action 给 Mutation，在 Mutation 中修改状态，返回新的状态，通过 Getter暴露给 view层的组件或者页面，页面监测到状态改变于是更新页面。如果你的项目很简单，最好不要使用 Vuex，对于大型项目，Vuex 能够更好的帮助我们管理组件外部的状态.
• 一般可以运用在购物车、登录状态、播放等场景中。

vue中key值的作用

• key值：用于 管理可复用的元素,标识数据的唯一性。因为Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染
• key的作用主要是为了高效的更新虚拟DOM
• 当我们修改了某个数据，如果直接渲染到真实dom上会引起整个dom树的重绘和重排，因此采用diff算法来解决上述问题，通过改变局部dom来更新视图。（渲染真实的dom的开销比较大）

image.png

使用import时，webpack会对node_modules里的依赖做什么？

• 配置相关路径

持续更新中......