第二大脑

主题

2026-08-25
4117
16.2m

35 道 Vue 面试题—业务相关 ​

<font style="background:#F8CED3;color:#70000D">面试题</font> <font style="background:#DBF1B7;color:#2A4200">Vue</font>

1.h5 底部输入框被键盘遮挡问题 ​

如果你遇到 h5 页面这个问题，当输入框在最底部，点击软键盘后输入框会被遮挡，可以如下解决问题：

javascript
var getHeight = $(document).height();
$(window).resize(function(){
  if($(document).height() < getHeight) {
    $('#footer').css('position','static');
  }else {
    $('#footer').css('position','absolute');
  }
});

2.触屏即播放 ​

javascript
$('html').one('touchstart',function(){
  audio.play()
})

3.阻止旋转屏幕时自动调整字体大小 ​

css
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}

4.主流网站布局 ​

页面分为 3 个部分：页面的顶部 header，底部footer，中间部分（侧栏side 和主要部分main）。

下面代码展示：

html
<body>
  // 页面层容器
  
    // 页面头部
    
    // 页面主体
    
      // 侧边栏
      
      
    
    // 页面底部
    
  
</body>

设计页面样式代码如下：

html
<style type="text/css">
  body{
    font: 12px 微软雅黑;
    margin: 0px;
    text-align: center;
    background: #fff;
  }

  // 页面层容器
  #container {
    width: 100%;
  }
  #header {
    width: 800px;
    margin: 0 auto;
    height: 100px;
    background: #FFCC99;
  }
  #main {
    width: 800px;
    margin: 0 auto;
    height: 400px;
  }
  #side {
    float: left;
    width: 20em;
    background: red;
    padding: 15px 0;
  }
  #foot {
    width: 800px;
    margin: 0 auto;
    height: 50px;
    background: #00ffff;
  }
</style>

5.什么是 MVVM 框架？ ​

MVVM框架是一个 Model-View-ViewModel框架，其中ViewModel连接模型Model 和视图View。

在 vue.js中的MVVM 模式：

vue.js是通过数据驱动的，vue.js实例化对象将 dom和数据进行绑定，一旦绑定，dom和数据将保持同步，每当数据发生变化，dom也会随着变化；ViewModel是Vue.js的核心，它是Vue.js的一个实例。Vue.js会针对某个HTML元素进行实例化，这个HTML元素可以是body，也可以是某个css选择器所指代的元素。DOM Listeners和Data Bindings是实现双向绑定的关键。DOM Listeners监听页面所有View层中的DOM元素，当发生变化时，Model层的数据随之变化。Data Bindings会监听Model层的数据，当数据发生变化时，View层的DOM 元素也随之变化。

6.active-class 是哪个组件的属性 ​

它是 vue-router模块的router-link 组件的属性

7.如何定义 vue-router 的动态路由 ​

在静态路由名称前面添加冒号，如设置 id动态路由参数，为路由对象的path 属性设置/:id

8.如何获取传过来的动态参数 ​

在组件中，使用 $router 对象的params.id，如$route.params.id

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

有三种，第一种是全局导航钩子，router.beforeEach(to,from,next)，作用是跳转前进行判断拦截；第二种是组件内的钩子；第三种是单独路由独享组件。

导航钩子又叫导航守卫，又分为全局钩子，单个路由独享钩子和组件级钩子。

全局钩子有 beforeEach,beforeResolve,afterEach，单个路由独享钩子有：beforeEnter

组件级钩子有：beforeRouteEnter，beforeRouteUpdate，beforeRouteLeave：它们有以下参数：

to表示即将要进入的目标路由对象；from表示当前导航正要离开的路由；next 表示一定要用这个函数才能到达下一个路由，如果不用就会遭到拦截。

10.mint-ui 是什么 ​

mint-ui它是基于 Vue.js的前端组件库，用npm安装，然后通过import导入样式和JavaScript代码，vue.use(mintUi)用于实现全局引入，import {Toast} from 'mint-ui' 用能于在单个组件局部引入

11.v-model 是什么 ​

v-model是 vue.js 的一条指令，实现数据的双向绑定

双向数据绑定的原理：

vue.js使用 es5提供的属性特性功能，结合发布者-订阅者模式，通过Object.defineProperty()为各个属性定义get,set 特性方法，在数据发送改变时给订阅者发布消息，触发相应的监听回调。

过程：a，对需要观察的数据对象进行递归遍历，包含子属性对象的属性，设置 set和get特性方法；当给这个对象的某个值赋值时，会触发绑定的set特性方法，就能起到监听数据的变化。b，用compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，就会收到通知，并更新视图。c，Watcher订阅者是Observer和Compile之间通信的桥梁：在自身实例化时向属性订阅器dep里面添加自己；自身必须有一个update()方法；在dep.notice()发布通知时，能调用自身的update()方法，并触发Compile中绑定的回调函数。d，MVVM是数据绑定的入口，整合了Observer，Compile和Wathcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher来搭起Observer和Compile之间的通信桥梁，达到数据变化通知视图更新的效果，利用视图交互，变化更新数据model 变更的双向绑定效果。

12.vue.js 中标签如何绑定事件 ​

第一种方式，使用 v-on；第二种方式，使用@ 语法糖

13.vuex 是什么 ​

vuex是 vue.js框架实现的状态管理系统。使用vuex，要引入store，并注入vue.js组件中，在组件内部可以通过$store访问store 对象；使用场景，在单页应用中，用于组件之间的通信，如音乐播放，登录状态管理，加入购物车等

vuex可以说是一种开发模式或框架，它是对 vue.js框架数据层面的扩展，通过状态集中管理驱动组件的变化，应用的状态集中放在store中，改变状态的方式是提交mutations，这是个同步的事务，异步的逻辑应该封装在action 中。

14.在 vue 中说说你知道的自定义指令 ​

自定义指令两种：一种全局自定义指令，vue.js对象提供了 directive方法，可以用来自定义指令，directive方法接收两个参数，一个是指令名称，另一个是函数；第二种是局部自定义指令，通过组件的directives 属性定义。

15.vue.js 中常用的 4 种指令 ​

v-if判断对象是否隐藏；v-for循环渲染；v-bind绑定一个属性；v-model 实现数据双向绑定

在 v-if循环中实现v-model 数据的双向绑定：

有时需要创建 input，并用v-model实现数据的双向绑定。此时可以为v-model绑定数组的一个成语selected[$index]，这样可以给不同的input 绑定不同的v-model:

vue

  <input type="text" v-model="arrData[index]">
  <h1>{{arrDa[index]}}</h1>

16.vue-router 是什么 ​

vue-router是 vue.js的路由插件，（常用router-link 和router-view）

17.vue.js 的生命周期 ​

共分 8 个阶段：

  1. beforeCreate

在实例初始化之后，数据观测者 data observer和event/watcher 事件配置之前调用

  1. created

在实例创建完成后立即调用，此时，实例已完成：观测者，属性和方法的运算，watch/event事件回调，挂载阶段还没开始，$el 属性目前不可见。

  1. beforeMount

在挂载开始之前调用，相关的 render 函数首次调用。

  1. mounted

el被新创建的 vm.$el替换，并且在挂载到实例上之后再调用该钩。如果root实例挂载了一个文档内元素，当调用mounted时vm.$el 也在文档内。

  1. beforeUpdate

在数据更新时调用，发生在虚拟 dom 重新渲染和打补丁之前。

  1. updated

由于数据更改导致的虚拟 dom 重新渲染和打补丁，在这之后会调用该钩子。

  1. beforeDestroyed

在实例销毁之前调用，在这一步，实例仍然完全可用。

  1. destroyed

在 vue.js实例销毁后调用，vue.js 实例指示的所有东西都会解除绑定，所有的事件监听会被移除，所有的子实例也会被销毁。

如果使用组件的 keep-alive 功能时，增加两个周期：

  • activated在 keep-alive 组件激活时调用；
  • deactivated在 keep-alive 组件停用时调用。

<keep-alive>包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。<keep-alive>是一个抽象组件，它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。

当在 <keep-alive>内切换组件时，它的activated和deactivated 这两个生命周期钩子函数将会执行。

vue
<keep-alive>
  <component :is="view"></component>
</keep-alive>

增加一个周期钩子：ErrorCaptured 表示当捕获一个来自子孙组件的错误时调用。

18.描述封装 vue 组件的作用过程 ​

组件可以提升整个项目的开发效率，能够把页面抽象成多个相对独立的模块，解决了传统项目开发中效率低，难维护，复用性等问题。

使用 Vue.extend方法创建一个组件，使用Vue.component方法注册组件，子组件需要数据，可以在props中接收数据，而子组件修改好数据后，想要把数据传递给父组件，可以使用emit 方法。

使用自定义组件：

在 components目录中新建组件文件，脚本一定要导出暴露的接口；导入需要用到的页面；将导入的组件注入vue.js的子组件的components属性中；在template 的视图中使用自定义组件。

创建组件

vue

  <dada></dada>

<template id="demo">

  <h1>{{msg}}</h1>
  
</template>
<script type="text/javascript">
  // 定义组件类
  var dada = Vue.extend({
    template: '#demo',
    data:function() {
      return {
        msg: 'dadaqianduan.cn'
      }
    }
  })
  // 注册组件
  Vue.component('dada',dada);
  // 定义Vue实例化对象
  var app = new Vue({
    el: '#app',
    data: {}
  })
</script>

19.vue-loader 是什么 ​

vue-loader它是解析 .vue文件的一个加载器，将template/js/style转换成javascript模块；通过这个vue-loader，javascript可以写EMAScript6语法，style样式可以应用scss或less，template可以添加jade 语法。

20.在 vue.cli项目中的src 目录说明 ​

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

21.对 vue.js的template 编译的理解 ​

首先转化成 AST抽象语法树，Abstract Syntax Tree，就是将源代码语法结构抽象成树状表现形式，然后通过render函数进行渲染，并返回VNode（Vue.js的虚拟dom 节点）。

通过 compile编译器把template编译成AST，compile是createCompiler的返回值，createCompiler用来创建编译器，compile还负责合并option；AST会经过generate-将AST转换成render function 字符串的过程-得到render函数，render的返回值是VNode，VNode是Vue.js的虚拟DOM 节点，里面有标签名，子节点，文本等。

22.v-show指令和 v-if 指令的区别 ​

它们都是条件渲染指令，不同的是，v-show的值无论是 true或false元素都会存在于html页面中，而v-if的值为true时，元素才会存在于html 页面中。

v-show指令是通过修改元素的 style 属性值实现的。

23.让 css 只在当前组件中起作用 ​

只需要在 style标签中添加scoped 属性，<style scoped></style>

24.在 vue.js 中如何实现路由嵌套 ​

路由嵌套会将其他组件渲染到该组件内，而不是使整个页面跳转到 router-view 定义组件渲染的位置，要进行页面跳转，要将页面渲染到根组件内。首先实例化根组件，在根组件中定义组件渲染容器，然后，挂载路由，当切换路由时，将会切换整个页面。

javascript
new Vue({
  el: '#dada',
  router: router,
  template: '<router-view></router-view>'
})

25.在 vue.js中的ref 属性有什么作用 ​

可以直接访问组件内部的一些元素，定义属性可以在组件内部通过 this.$refs属性，，访问设置ref属性的元素，这是一个原生的DOM元素，要使用原生DOM API 操作它们。

26.在 vue.js 开发环境下调用接口，如何避免跨域 ​

在 config/index.js内对proxyTable 项进行如下配置：

javascript
proxyTable: {
  '/api': {
    target: 'http://xxx.com',
      changeOrign: true,
        pathRewrite: {
          '^/api': ''
        }
  }
}

27.axios 是什么 ​

axios是 vue2.0中用来替换vue-resource.js 插件的一个模块，是一个请求后台资源的模块

使用 npm install axios 来安装axios

javascript
import Vue from 'vue'
import axios from 'axios';
Vue.prototype.$http = axios;
new Vue({
  el: 'dada',
  data: {
    mag: ''
  },
  template: '<h1>{{msg}}</h1>',
  created: function() {
    this.$http.get('data.json').then(res=>{
      this.msg = res.data.data
    })
  }
})

当调用 axios.post('api/user')时，表示发送post 异步请求。

28.sass 是什么 ​

sass是一种 css预编译语言，用npm安装加载程序；在webpack.config.js中配置sass 加载程序

javascript
module: {
 // 加载程序
 loaders: {
  // 加载scss
  {
   test: /\.scss$/,
   loader: 'vue-style-loader!css-loader!sass-loader'
  }
 }
}

29.什么情况下会产生片段实例 ​

模板包含多个顶级元素；模板只包含普通文本；模板只包含其他组件，模板只包含一个元素指令，如 vue-router的<router-view>；模板根节点有一个流程 控制指令，如v-if 或v-for

这些情况让实例有未知数量的顶级元素，模板将把它的 DOM内容当作片段。片段实例仍然会正确地渲染内容。不过，模板没有一个根节点，它的$el 指向一个锚节点，即一个空的文本节点。

在 vue2.0 中，组件的模板只允许有权只有一个根节点。

30.  实现多个根据不同条件显示不同文字的方法 ​

vue

 <input type="text" v-model="inputValue">
 <h1>{{showValue}}</h1>

var app = new Vue({
 el: '#app',
 data: {
  inputValue: ''
 },
 computed: {
  showValue: function() {
   return this.inputValue || '请输入内容'
  }
 }
})

31.什么是数据的丢失 ​

如果在初始化时没有定义数据，之后更新的数据是无法触发页面渲染更新的，这部分数据是丢失的数据，这种现象叫数据的丢失。

32.如何检测数据的变化 ​

  • 通过直接索引设置元素：app.arr[0]=
  • 修改数据的长度：app.arr.length

为了解决该问题，Vue.js扩展了观察数组，为它添加了一个 $set() 方法，用该方法修改的数组，能触发视图更新，检测数据变化。

javascript
app.$set(app.arr, 5, 500);

由于 javascript特性的限制，vue.js不能检测到对象属性的添加或删除，因为Vue.js在初始化时将数组转化为getter/setter，所以属性必须在data对象中定义，才能在初始化时让vue.js 转换它并让它响应。

javascript
var data = {
  obj: {
    a: 1
  }
}
var app = new Vue({
  el: '#app',
  data: data
})
app.ojb.a = 10
app.obj.b = 20 // 不是响应的
data.obj.b = 20 // 不是响应的

如果需要在实例创建之后添加属性并且让它能够响应，使用 $set 实例方法：

javascript
app.$set(app.obj, 'b', 200)

对于普通数据对象，可以全局方法 Vue.set(object,key,value)

javascript
Vue.set(data.obj, 'b', 250)

33.vue.js 文件中的样式覆盖不生效的问题 ​

在 style上加上scoped可以让样式私有化，只针对当前vue.js文件中的代码有效，不会对别的文件中的代码造成影响，有时，引入第三方UI，在vue.js文件中进行样式覆盖不生效，大概是因为style上的scoped 导致的。

可以将需要覆盖样式的这部分代码放到单独的 css文件中，在main.js 文件导入即可。

34.如何解决数据层级结构太深 ​

在开发中，常出现异步获取数据的情况，有时数据层次太深，如：

vue
<text v-text="a.b.c.d"></text>

可以使用 vm.$set 手动定义一层数据：vm.$set("dada", a.b.c.d)

35.vue.js 页面的闪烁 ​

在 vue.js有一个v-cloak指令，该指令一直保持在元素上，直到关联实例结束编译。当和css 使用时，这个指令可以隐藏未编译的标签，直到实例编译结束：`` 不会显示，直到编译结束。

vue
[v-cloak] {
 display: none;
}
{{dada}}

更新: 2021-01-14 11:08:54
原文: <https://www.yuque.com/fcant/notes/vixcyb&gt;

最近更新