乐趣区

你要的Vue面试题都在这里

1. Vue.js 介绍

Vue.js 是一个轻巧、高性能、可组件化的 MVVM 库,同时拥有非常容易上手的 API;

Vue.js 是一个构建数据驱动的 Web 界面的库。

Vue.js 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。数据驱动 + 组件化的前端开发。

简而言之:Vue.js 是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。核心是一个响应的数据绑定系统。

2. 什么是 mvvm?

MVVM 是 Model-View-ViewModel 的缩写。mvvm 是一种设计思想。Model 层代表数据模型,也可以在 Model 中定义数据修改和操作的业务逻辑;View 代表 UI 组件,它负责将数据模型转化成 UI 展现出来,ViewModel 是一个同步 View 和 Model 的对象。

3. 简述 Vue 的响应式原理

当一个 Vue 实例创建时,vue 会遍历 data 选项的属性,用 Object.defineProperty 将它们转为 getter/setter 并且在内部追踪相关依赖,在属性被访问和修改时通知变化。
每个组件实例都有相应的 watcher 程序实例,它会在组件渲染的过程中把属性记录为依赖,之后当依赖项的 setter 被调用时,会通知 watcher 重新计算,从而致使它关联的组件得以更新。

4.Vue.js 特点

简洁:页面由 HTML 模板 +Json 数据 +Vue 实例组成

数据驱动:自动计算属性和追踪依赖的模板表达式

组件化:用可复用、解耦的组件来构造页面

轻量:代码量小,不依赖其他库

快速:精确有效批量 DOM 更新

模板友好:可通过 npm,bower 等多种方式安装,很容易融入

5.scss 是什么?

预处理 css,把 css 当前函数编写,定义变量, 嵌套.

6.vue 生命周期的理解?

总共分为 8 个阶段创建前 / 后,载入前 / 后,更新前 / 后,销毁前 / 后。

创建前 / 后:在 beforeCreate 阶段,vue 实例的挂载元素 el 还没有。
载入前 / 后:在 beforeMount 阶段,vue 实例的 $el 和 data 都初始化了,但还是挂载之前为虚拟的 dom 节点,data.message 还未替换。在 mounted 阶段,vue 实例挂载完成,data.message 成功渲染。
更新前 / 后:当 data 变化时,会触发 beforeUpdate 和 updated 方法。
销毁前 / 后:在执行 destroy 方法后,对 data 的改变不会再触发周期函数,说明此时 vue 实例已经解除了事件监听以及和 dom 的绑定,但是 dom 结构依然存在。

7. 为什么 vue 中 data 必须是一个函数?

对象为引用类型,当重用组件时,由于数据对象都指向同一个 data 对象,当在一个组件中修改 data 时,其他重用的组件中的 data 会同时被修改;而使用返回对象的函数,由于每次返回的都是一个新对象(Object 的实例),引用地址不同,则不会出现这个问题。

8.active-class 是哪个组件的属性?

vue-router 模块的 router-link 组件。

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

三种。

一种是全局导航钩子:router.beforeEach(to,from,next),作用:跳转前进行判断拦截。

第二种:组件内的钩子;

第三种:单独路由独享组件

10. 说出至少 4 种 vue 当中的指令和它的用法?

v-if:判断是否隐藏;v-for:数据循环出来;v-bind:class:绑定一个属性;v-model:实现双向绑定

11.vue-loader 是什么?使用它的用途有哪些?

解析.vue 文件的一个加载器,跟 template/js/style 转换成 js 模块。

12. 请说出 vue.cli 项目中 src 目录每个文件夹和文件的用法?

assets 文件夹是放静态资源;
components 是放组件;
router 是定义路由相关的配置;
view 视图;
app.vue 是一个应用主组件;
main.js 是入口文件

13. 计算属性和 watch 的区别

在我们运用 vue 的时候一定少不了用计算属性 computed 和 watch
computed 计算属性是用来声明式的描述一个值依赖了其它的值。当你在模板里把数据绑定到一个计算属性上时,Vue 会在其依赖的任何值导致该计算属性改变时更新 DOM。这个功能非常强大,它可以让你的代码更加声明式、数据驱动并且易于维护。

watch 监听的是你定义的变量, 当你定义的变量的值发生变化时,调用对应的方法。就好在 div 写一个表达式 name,data 里写入 num 和 lastname,firstname, 在 watch 里当 num 的值发生变化时,就会调用 num 的方法,方法里面的形参对应的是 num 的新值和旧值,而计算属性 computed, 计算的是 Name 依赖的值, 它不能计算在 data 中已经定义过的变量。

14.prop 验证,和默认值

我们在父组件给子组件传值得时候,为了避免不必要的错误,可以给 prop 的值进行类型设定,让父组件给子组件传值得时候,更加准确,prop 可以传一个数字,一个布尔值,一个数组,一个对象,以及一个对象的所有属性。组件可以为 props 指定验证要求。如果未指定验证要求,Vue 会发出警告比如传一个 number 类型的数据,用 defalt 设置它的默认值,如果验证失败的话就会发出警告。

props: {
    visible: {
        default: true,
        type: Boolean,
        required: true
    },
},

15. vue 组件通信

父传递子

父:自定义属性名 + 数据(要传递)=> :value=” 数据 ”

子:props [“ 父组件上的自定义属性名“] => 进行数据接收)

子传递父

在父组件中注册子组件并在子组件标签上绑定自定义事件的监听。

子:this.$emit(‘ 自定义事件名称 ’, 数据) 子组件标签上绑定 @自定义事件名称 =’ 回调函数 ’

父:methods: {自定义事件() {// 逻辑处理} }

兄弟组件

通过中央通信 let bus = new Vue()

A:methods :{函数{bus.$emit('自定义事件名',数据)} 发送

B:created(){bus.$on('A 发送过来的自定义事件名',函数)} 进行数据接收

16.vue 路由传参数

1. 使用 query 方法传入的参数使用 this.$route.query 接受

2. 使用 params 方式传入的参数使用 this.$route.params 接受

17.vuex 是什么?有哪几种属性?

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

有 5 种,分别是 state、getter、mutation、action、module

vuex 的 store 是什么?

vuex 就是一个仓库,仓库里放了很多对象。其中 state 就是数据源存放地,对应于一般 vue 对象里面的 datastate 里面存放的数据是响应式的,vue 组件从 store 读取数据,若是 store 中的数据发生改变,依赖这相数据的组件也会发生更新它通过 mapState 把全局的 state 和 getters 映射到当前组件的 computed 计算属性

vuex 的 getter 是什么?

getter 可以对 state 进行计算操作,它就是 store 的计算属性虽然在组件内也可以做计算属性,但是 getters 可以在多给件之间复用如果一个状态只在一个组件内使用,是可以不用 getters

vuex 的 mutation 是什么?

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation

vuex 的 action 是什么?

action 类似于 muation, 不同在于:action 提交的是 mutation, 而不是直接变更状态 action 可以包含任意异步操作
vue 中 ajax 请求代码应该写在组件的 methods 中还是 vuex 的 action 中

vuex 的 module 是什么?

面对复杂的应用程序,当管理的状态比较多时;我们需要将 vuex 的 store 对象分割成模块(modules)。

如果请求来的数据不是要被其他组件公用,仅仅在请求的组件内使用,就不需要放入 vuex 的 state 里如果被其他地方复用,请将请求放入 action 里,方便复用,并包装成 promise 返回

18.v-show 和 v -if 指令的共同点和不同点?

v-show 指令是通过修改元素的 displayCSS 属性让其显示或者隐藏

v-if 指令是直接销毁和重建 DOM 达到让元素显示和隐藏的效果

19. 如何让 CSS 只在当前组件中起作用?

将当前组件的 <style> 修改为<style scoped>

20.<keep-alive></keep-alive>的作用是什么?

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

21.delete 和 Vue.delete 删除数组的区别?

delete 只是被删除的元素变成了 empty/undefined 其他的元素的键值还是不变。
Vue.delete 直接删除了数组 改变了数组的键值。

var a=[1,2,3,4]
var b=[1,2,3,4]
delete a[0]
console.log(a)  //[empty,2,3,4]
this.$delete(b,0)
console.log(b)  //[2,3,4]

22.$nextTick是什么?

vue 实现响应式并不是数据发生变化后 dom 立即变化,而是按照一定的策略来进行 dom 更新。

$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调,在修改数据之后使用 $nextTick,则可以在回调中获取更新后的 DOM

23.v-on 可以监听多个方法吗?

可以。

<input type="text" :value="name" @input="onInput" @focus="onFocus" @blur="onBlur" />

24.v-on 常用修饰符

.stop 该修饰符将阻止事件向上冒泡。同理于调用 event.stopPropagation() 方法

.prevent 该修饰符会阻止当前事件的默认行为。同理于调用 event.preventDefault() 方法

.self 该指令只当事件是从事件绑定的元素本身触发时才触发回调

.once 该修饰符表示绑定的事件只会被触发一次

25.v-for key 的作用。

当 Vue 用 v-for 正在更新已渲染过的元素列表是,它默认用“就地复用”策略。如果数据项的顺序被改变,Vue 将不是移动 DOM 元素来匹配数据项的改变,而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素。
为了给 Vue 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性。key 属性的类型只能为 string 或者 number 类型。

key 的特殊属性主要用在 Vue 的虚拟 DOM 算法,在新旧 nodes 对比时辨识 VNodes。如果不使用 key,Vue 会使用一种最大限度减少动态元素并且尽可能的尝试修复 / 再利用相同类型元素的算法。使用 key,它会基于 key 的变化重新排列元素顺序,并且会移除 key 不存在的元素。

26.v-for 与 v-if 的优先级

v-for 比 v -if 优先,如果每一次都需要遍历整个数组,将会影响速度,尤其是当之需要渲染很小一部分的时候。

27.Vue 子组件调用父组件的方法

第一种方法是直接在子组件中通过 this.$parent.event 来调用父组件的方法
第二种方法是在子组件里用 $emit 向父组件触发一个事件,父组件监听这个事件就行了。

28.Promise 对象是什么?

1.Promise 是异步编程的一种解决方案,它是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从语法上说,Promise 是一个对象,从它可以获取异步操作的消息。Promise 提供统一的 API,各种异步操作都可以用同样的方法进行处理。promise 对象是一个构造函数,用来生成 Promise 实例;

2.promise 的两个特点 对象状态不受外界影响 && 一旦状态改变,就不会再变,任何时候都可以得到结果(pending 状态 –>fulfilled || pending–>rejected)

29.axios 的特点有哪些?

1、axios 是一个基于 promise 的 HTTP 库,支持 promise 的所有 API;

2、它可以拦截请求和响应;

3、它可以转换请求数据和响应数据,并对响应回来的内容自动转换为 json 类型的数据;

4、它安全性更高,客户端支持防御 XSRF;

30.vue 中的 ref 是什么?

ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例。

31.Vue 的路由模式, 实现方式?

hash 模式 和 history 模式

hash 模式:在浏览器中符号“#”,# 以及 #后面的字符称之为 hash,用 window.location.hash 读取;
特点:hash 虽然在 URL 中,但不被包括在 HTTP 请求中;用来指导浏览器动作,对服务端安全无用,hash 不会重加载页面。
hash 模式下: 仅 hash 符号之前的内容会被包含在请求中,如 http://www.xxx.com,因此对于后端来说,即使没有做到对路由的全覆盖,也不会返回 404 错误。

history 模式:history 采用 HTML5 的新特性;且提供了两个新方法:pushState(),replaceState()可以对浏览器历史记录栈进行修改,以及 popState 事件的监听到状态变更。

history 模式: 前端的 URL 必须和实际向后端发起请求的 URL 一致,如 http://www.xxx.com/items/id。后端如果缺少对 /items/id 的路由处理,将返回 404 错误。Vue-Router 官网里如此描述:“不过这种模式要玩好,还需要后台配置支持……所以呢,你要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。”

32.$route$router 的区别?

$route是“路由信息对象”,包括 path,params,hash,query,fullPath,matched,name 等路由信息参数。

$router是 ’ 路由实例 ’ 对象包括了路由的跳转方法,钩子函数等。

33.vue.js 的两个核心是什么?

数据驱动、组件系统

34.vue 如何兼容 ie 的问题。

babel-polyfill 插件

35. 页面刷新 vuex 被清空解决办法?

1.localStorage 存储到本地再回去

2. 重新获取接口获取数据

36. 如何优化 SPA 应用的首屏加载速度慢的问题?

1. 将公用的 JS 库通过 script 标签外部引入,减小 app.bundel 的大小,让浏览器并行下载资源文件,提高下载速度;

2. 在配置 路由时,页面和组件使用懒加载的方式引入,进一步缩小 app.bundel 的体积,在调用某个组件时再加载对应的 js 文件;

3. 加一个首屏 loading 图,提升用户体验;

37.Vue 改变数组触发视图更新

以下方法调用会改变原始数组:push(), pop(), shift(), unshift(), splice(), sort(), reverse(),Vue.set( target, key, value)

调用方法:Vue.set(target, key, value)
target:要更改的数据源(可以是对象或者数组)
key:要更改的具体数据
value:重新赋的值

38.DOM 渲染在哪个周期中就已经完成?

mounted

注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕,可以用 vm.$nextTick 替换掉 mounted

mounted: function () {this.$nextTick(function () {
    // Code that will run only after the
    // entire view has been rendered
  })
}

39. 简述每个周期具体适合哪些场景

beforecreate : 可以在这加个 loading 事件,在加载实例时触发

created : 初始化完成时的事件写在这里,如在这结束 loading 事件,异步请求也适宜在这里调用

mounted : 挂载元素,获取到 DOM 节点 updated : 如果对数据统一处理,在这里写上相应函数

beforeDestroy : 可以做一个确认停止事件的确认框

40. 第一次加载会触发哪几个钩子?

会触发 beforeCreate , created ,beforeMount ,mounted

41. 动态绑定 class

active classname,isActive 变量

<div v-bind:class="{active: isActive}"></div>

本文主要是一些基础知识。希望能帮助那些即将或正在找工作的同行们。

最后

如果文中有错误,请务必留言指正,万分感谢。

点个赞哦,让我们共同学习,共同进步。

GitHub

退出移动版