web前端面试高频考点——Vue面试题

简介: web前端面试高频考点——Vue面试题

1、v-show 和 v-if 的区别

v-show 通过 CSS display 控制显示和隐藏

v-if 组件真正的渲染和销毁,而不是显示和隐藏

频繁切换显示状态用 v-show,否则用 v-if

2、为何在 v-for 中使用 key

必须用 key,且不能是 index 和 random

diff 算法中通过 tag 和 key 来判断,是否是 sameNode

减少渲染次数,提升渲染性能

3、描述 Vue 组件生命周期(父子组件)

单组件生命周期图(摘自官网)

818683df27a844a08e3ff955d9d907c0.png


父子组件生命周期关系


2c0553eaf3924af7bb1f101382ac8979.png


4、Vue 组件如何通讯(常见)

父子组件 props 和 this.$emit

自定义事件 event.$on event.$off event.$emit

vuex

5、描述组件渲染和更新的过程

vue原理的三大模块:响应式、vdom和diff、模板编译

d4241b45763042a788ab9e822515c2cb.png


6、双向数据绑定 v-model 的实现原理

input 元素的 value = this.name

绑定 input 事件 this.name = $event.target.value

data 更新触发 re-render

7、对MVVM的理解

8、computed 的特点

缓存,data 不变不会重新计算

提高性能

9、为何组件 data 必须是一个函数

实际上,.vue 文件被编写出来其实是一个 class 类

在每个地方使用组件的时候,相当于是实例化

在实例化的时候去执行 data,如果 data 不是函数的话,那么每一个组件实例的数据就共享了

10、ajax 请求应该放在哪个生命周期

mounted(组件渲染完成,DOM加载完成)

JS 是单线程的,ajax 异步获取数据

放在 mounted 之前没有用,只会让逻辑更加混乱

11、如何将组件所有 props 传递给子组件

$props

<User v-bind = "$props">

12、如何自己实现 v-model

使用 :value 而没用 v-model

change 和 model.event 名字对应起来即可

<template>
  <input
    type="text"
    :value="text"
    @input="$emit('change', $event.target.value)"
  />
</template>
<script>
export default {
  model: {
    prop: "text", //对应到 props text
    event: "change",
  },
  props: {
    text: String,
  },
};
</script>

13、多个组件有相同的逻辑,如何抽离?

参考链接


mixin

以及 mixin 的一些缺点

14、何时使用异步组件?

加载大组件

路由异步加载

15、何时使用 keep-alive

缓存组件,不需要重复渲染

如多个静态 tab 页的切换

优化性能

16、何时需要使用 beforeDestory

绑定自定义事件 event.$off

清除定时器

绑定自定义的 DOM 事件,如 window scroll 等

17、什么是作用域插槽

插槽的内容可能想要同时使用父组件域内和子组件域内的数据

父组件:


用父组件的 url && 子组件的 title

<template>
  <div>
    <ScopedSlot :url="website.url">
      <template v-slot="slotProps">
        {{ slotProps.slotData.title }}
      </template>
    </ScopedSlot>
  </div>
</template>

子组件:


<template>
  <a :href="url">
    <slot :slotData="website">
      {{ website.subTitle }}
    </slot>
  </a>
</template>

18、Vuex 中 action 和 mutation 有什么区别

action 中可以处理异步,mutation 不可以

mutation 做原子操作

action 可以整合多个 mutation

19、Vue-router 常用的路由模式

hsah 模式

H5 histoty(需要服务器支持)

两者的比较

20、如何配置 Vue-router 异步加载

component: () => import './xxx'

21、用 vnode 描述一个 DOM 结构

DOM 结构

<div id="div1" class="container">
    <p>vdom</p>
    <ul style="font-size: 20px">
        <li>a</li>
    </ul>
</div>

vnode 形式

{
  tag: 'div',
  props: {
    className: 'container',
    id: 'div1'
  }
  children: [
    {
      tag: 'p',
      children: 'vdom'
    },
    {
      tag: 'ul',
      props: {style: 'font-size: 20px'}
      children: [
        {
          tag: 'li',
          children: 'a'
        }
      ]
    }
  ]
}

22、监听 data 变化的核心 API 是什么

Object.defineProperty

以及深度监听、监听数组

但也有缺点

23、Vue 如何监听数组变化

Object.defineProperty 不能监听数组变化

重新定义原型,重写 push pop 等方法,实现监听

Proxy 可以原生支持监听数组变化

24、描述响应式原理

监听 data 变化

组件渲染和更新的流程

25、diff 算法的时间复杂度

O(n)

在 O(n^3)基础上做了一些调整

26、简述 diff 算法过程

patch(elem, vnode) 和 patch(vnode, newVnode)

-patchVnode 和 addVnodes 和 removeVnodes

updateChildren(key 的重要性)

27、Vue 为何是异步渲染,$nextTick 何用?

异步渲染(以及合并 data 修改),以提高渲染性能

$nextTick 在 DOM 更新完之后,触发回调

28、Vue 常见性能优化方式

合理使用 v-show 和 v-if

合理使用 computed

v-for 时加 key,以及避免和 v-if 同时使用

自定义事件、DOM 事件及时销毁

合理使用异步组件

合理使用 keep-alive

data 层级不要太深

使用 vue-loader 在开发环境做模板编译(预编译)

webpack 层面的优化

前端通用的性能优化,如图片懒加载

不积跬步无以至千里,不积小流无以成江海


点个关注不迷路,持续更新中…

相关文章
|
1月前
|
前端开发 JavaScript 安全
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第27天】本文介绍了HTTP/2和HTTPS在前端性能调优中的应用。通过多路复用、服务器推送和头部压缩等特性,HTTP/2显著提升了Web性能。同时,HTTPS确保了数据传输的安全性。文章提供了示例代码,展示了如何使用Node.js创建一个HTTP/2服务器。
58 3
|
1月前
|
前端开发 JavaScript
探索现代Web应用的微前端架构
【10月更文挑战第40天】在数字时代的浪潮中,Web应用的发展日益复杂多变。微前端架构作为一种新兴的设计理念,正逐步改变着传统的单一前端开发模式。本文将深入探讨微前端的核心概念、实现原理及其在实际项目中的应用,同时通过一个简单的代码示例,揭示如何将一个庞大的前端工程拆分成小而美的模块,进而提升项目的可维护性、可扩展性和开发效率。
|
25天前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
32 6
|
1月前
|
消息中间件 前端开发 JavaScript
探索微前端架构:构建现代Web应用的新策略
本文探讨了微前端架构的概念、优势及实施策略,旨在解决传统单体应用难以快速迭代和团队协作的问题。微前端允许不同团队独立开发、部署应用的各部分,提升灵活性与可维护性。文中还讨论了技术栈灵活性、独立部署、团队自治等优势,并提出了定义清晰接口、使用Web组件、状态管理和样式隔离等实施策略。
|
1月前
|
监控 前端开发 JavaScript
探索微前端架构:构建可扩展的现代Web应用
【10月更文挑战第29天】本文探讨了微前端架构的核心概念、优势及实施策略,通过将大型前端应用拆分为多个独立的微应用,提高开发效率、增强可维护性,并支持灵活的技术选型。实际案例包括Spotify和Zalando的成功应用。
|
4月前
|
存储 Java
【IO面试题 四】、介绍一下Java的序列化与反序列化
Java的序列化与反序列化允许对象通过实现Serializable接口转换成字节序列并存储或传输,之后可以通过ObjectInputStream和ObjectOutputStream的方法将这些字节序列恢复成对象。
|
1月前
|
存储 缓存 算法
面试官:单核 CPU 支持 Java 多线程吗?为什么?被问懵了!
本文介绍了多线程环境下的几个关键概念,包括时间片、超线程、上下文切换及其影响因素,以及线程调度的两种方式——抢占式调度和协同式调度。文章还讨论了减少上下文切换次数以提高多线程程序效率的方法,如无锁并发编程、使用CAS算法等,并提出了合理的线程数量配置策略,以平衡CPU利用率和线程切换开销。
面试官:单核 CPU 支持 Java 多线程吗?为什么?被问懵了!
|
1月前
|
存储 算法 Java
大厂面试高频:什么是自旋锁?Java 实现自旋锁的原理?
本文详解自旋锁的概念、优缺点、使用场景及Java实现。关注【mikechen的互联网架构】,10年+BAT架构经验倾囊相授。
大厂面试高频:什么是自旋锁?Java 实现自旋锁的原理?
|
1月前
|
存储 缓存 Java
大厂面试必看!Java基本数据类型和包装类的那些坑
本文介绍了Java中的基本数据类型和包装类,包括整数类型、浮点数类型、字符类型和布尔类型。详细讲解了每种类型的特性和应用场景,并探讨了包装类的引入原因、装箱与拆箱机制以及缓存机制。最后总结了面试中常见的相关考点,帮助读者更好地理解和应对面试中的问题。
59 4
|
2月前
|
算法 Java 数据中心
探讨面试常见问题雪花算法、时钟回拨问题,java中优雅的实现方式
【10月更文挑战第2天】在大数据量系统中,分布式ID生成是一个关键问题。为了保证在分布式环境下生成的ID唯一、有序且高效,业界提出了多种解决方案,其中雪花算法(Snowflake Algorithm)是一种广泛应用的分布式ID生成算法。本文将详细介绍雪花算法的原理、实现及其处理时钟回拨问题的方法,并提供Java代码示例。
92 2