呕心沥血整理了33个VUE常见的面试题,助力拿下高薪offer !(上)

帅骏
183 阅读5分钟

前言

将自己平时面试和工作当中遇到的问题分享给大家,由于每个问题出现的频率不同,所以给问题分为了:面试必问、高频、和一般,大家可以根据自个儿的需求参考,如有描述错误的地方欢迎指正~

1.【一般】 Vue常用修饰符有哪些?

.prevent: 提交事件不再重载页面；

.stop: 阻止单击事件冒泡；

.once: 只执行一次这个事件

.enter:监听键盘enter键

2.【高频】 对Vue渐进式的理解

  • 官方专业答案

    • 主张最少,
    • 自底向上,
    • 增量开发,
    • 组件集合,
    • 便于复用

  • 个人见解

    • 使用模块化规范，实现自助餐式开发，用什么导什么。 最大程度上节省资源。

3.【一般】 说出至少4个Vue指令及作用

这道题还有一种问法：说出几个常用的vue指令

  • v-on 给标签绑定函数，可以缩写为@，例如绑定一个点击函数 函数必须写在methods里面
  • v-bind 动态绑定 作用： 及时对页面的数据进行更改, 可以简写成:分号
  • v-slot: 缩写为#, 组件插槽
  • v-for 根据数组的个数, 循环数组元素的同时还生成所在的标签
  • v-show 显示内容
  • v-if 显示与隐藏
  • v-else 必须和v-if连用 不能单独使用 否则报错
  • v-text 解析文本
  • v-html 解析html标签

4.【一般】 为什么避免v-for和v-if在一起使用

Vue 处理指令时，v-for 比 v-if 具有更高的优先级, 虽然用起来也没报错好使, 但是性能不高, 如果你有5个元素被v-for循环, v-if也会分别执行5次.

5.【高频】 v-show和v-if的区别

  • v-show和v-if的区别? 分别说明其使用场景?

  • 相同点： v-show 和v-if都是true的时候显示，false的时候隐藏

  • 不同点1：原理不同

    • v-show:一定会渲染，只是修改display属性
    • v-if:根据条件渲染

  • 不同点2：应用场景不同

    • 频繁切换用v-show,不频繁切换用v-if

6.【必问】 Vue中key值作用

高逼格答案： 提升vue渲染性能

  • 1.vue在渲染的时候,会 先把 新DOM 与 旧DOM 进行对比， 如果dom结构一致，则vue会复用旧的dom。 （此时可能造成数据渲染异常）
  • 2.使用key可以给dom添加一个唯一标识符，让vue强制更新dom

7.【高频】 Vue中:key作用, 为什么不能用索引

最高逼格答案： 因为用了索引和没用， 没啥区别（用了等于没用）

  • :key是给v-for循环生成标签颁发唯一标识的, 用于性能的优化
  • 因为v-for数据项的顺序改变，Vue 也不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素

8.【高频】 Vue中有时候数组会更新页面，有时候不更新，这是为什么

  • 因为vue内部只能监测到数组顺序/位置的改变/数量的改变, 但是值被重新赋予监测不到变更, 可以用 Vue.set() / vm.$set()

这些方法会触发数组改变, v-for会监测到并更新页面

  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()

这些方法不会触发v-for更新

  • slice()
  • filter()
  • concat()

9.【高频】 方法和计算属性和侦听器区别

  • 方法

    • 需要主动调用触发
    • 不会缓存

  • 计算属性

    • 监听多个属性：只要计算属性内部数据变化就会触发
    • 有缓存机制（必须要说的）

  • 侦听器

    • 监听一个属性
    • 不会缓存（这个可以不用回答）

10.【一般】 请说下封装 vue 组件的过程

高逼格答案： 有复用的地方就有封装

（js如此，vue也是如此）

  • 1.先分析需求：确定业务需求，把页面中可以复用的结构，样式以及功能

    • 找出业务需求中存在复用的地方

  • 2.具体步骤：Vue.component 或者在new Vue配置项components中, 定义组件名, 可以在props中接受给组件传的参数和值，子组件修改好数据后，想把数据传递给父组件。可以采用$emit方法

11.【必问】 vue组件传值

  • 父向子 -> props定义变量 -> 父在使用组件用属性给props变量传值

    • 单向数据流

  • 子向父 -> $emit触发父的事件 -> 父在使用组件用@自定义事件名=父的方法 (子把值带出来)

    • 事件监听

12.【高频】 Vue 组件 data 为什么必须是函数

  • 官方文档：cn.vuejs.org/v2/style-gu…

  • 因为组件是需要在多个地方使用的

    • 如果data是一个对象，对象是引用类型。 一旦某一个地方修改，就会全部修改
    • data是一个函数，每一次复用组件的时候就会从这个函数返回一个新的对象。 这样组件在复用的时候就可以做到数据互不干扰。

13.【一般】 讲一下组件的命名规范

  • 官方文档：cn.vuejs.org/v2/style-gu…
  • 给组件命名有两种方式(在Vue.Component/components时)，一种是使用链式命名"my-component"，一种是使用大驼峰命名"MyComponent"，
  • 因为要遵循W3C规范中的自定义组件名 (字母全小写且必须包含一个连字符)，避免和当前以及未来的 HTML 元素相冲突

image.png

image.png

14.【高频】 scoped作用与原理

  • 作用：组件css作用域，避免子组件内部的css样式被父组件覆盖

    • 默认情况下，如果子组件和父组件css选择器权重相同，优先加载父组件css样式

  • 原理：给元素添加一个自定义属性 v-data-xxxxx

    • 一针见血答案： 通过属性选择器来提高css权重值

15.【必问】 vue生命周期总共分为几个阶段？

Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。

  1. beforeCreate

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

  1. created

在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)， 属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

  1. beforeMount

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

  1. mounted

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

  1. beforeUpdate

数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务端进行。

  1. updated

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

  1. activated

keep-alive 组件激活时调用。该钩子在服务器端渲染期间不被调用。

  1. deactivated

keep-alive 组件停用时调用。该钩子在服务器端渲染期间不被调用。

  1. beforeDestroy

实例销毁之前调用。在这一步，实例仍然完全可用。该钩子在服务器端渲染期间不被调用。

  1. destroyed

Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

  1. errorCaptured（2.5.0+ 新增）

当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。

16.【必问】 第一次加载页面会触发哪几个钩子函数？

四个钩子

  • beforeCreate,
  • created,
  • beforeMount,
  • mounted 这几个钩子函数

17.【必问】 Vue 的 nextTick 的原理是什么?

  • 1为什么需要 nextTick

    • Vue 是异步修改 DOM 的并且不鼓励开发者直接接触 DOM，但有时候业务需要必须对数据更改--刷新后的 DOM 做相应的处理，这时候就可以使用 Vue.nextTick(callback)这个 api 了。

  • 2.知识储备（可以不说，但是自己要知道，以防不测）

    • 事件循环中宏任务和微任务这两个概念
    • 常见的宏任务有 script, setTimeout, setInterval, setImmediate（一种执行更加频繁的定时器）
    • 常见的微任务有 ,Promise.then(), async

  • 3.最终答案：

    • nextTick 的原理是 vue 通过异步队列控制 DOM 更新

      • nextTick底层是promise，所以是微任务。这个一定要知道

    • 这个是官方语言，说不说看你自己心情)nextTick 回调函数先后执行的方式。如果大家看过这部分的源码，会发现其中做了很多 isNative()的判断，因为这里还存在兼容性优雅降级的问题。可见 Vue 开发团队的深思熟虑，对性能的良苦用心。

  • 4.小科普：其实vue在版本更新的时候。 时而将nextTick封装成宏任务，时而将nextTick封装成微任务。 不过目前vue2最新的版本，nextTick底层是微任务

avatar
文章
阅读
粉丝