2023前端二面高频vue面试题集锦

最新推荐文章于 2025-06-24 12:51:45 发布

bb_xiaxia1998

最新推荐文章于 2025-06-24 12:51:45 发布

阅读量5.7k

点赞数 9

CC 4.0 BY-SA版权

文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/bb_xiaxia1998/article/details/128518681

本文汇总了Vue.js面试中的高频问题，涵盖了Vuex的使用、Vue3性能提升的原因、递归组件、单向数据流、组件缓存、组件和插件的区别、Composition API与Options API的不同、异步组件的意义、组件通信方式以及Vuex数据监听等多个关键知识点，旨在帮助开发者更好地理解和掌握Vue.js的核心概念。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。vuex 就是一个仓库，仓库里放了很多对象。其中 state 就是数据源存放地，对应于一般 vue 对象里面的 data 里面存放的数据是响应式的，vue 组件从 store 读取数据，若是 store 中的数据发生改变，依赖这相数据的组件也会发生更新它通过 mapState 把全局的 state 和 getters 映射到当前组件的 computed 计算属性

vuex 一般用于中大型 web 单页应用中对应用的状态进行管理，对于一些组件间关系较为简单的小型应用，使用 vuex 的必要性不是很大，因为完全可以用组件 prop 属性或者事件来完成父子组件之间的通信，vuex 更多地用于解决跨组件通信以及作为数据中心集中式存储数据。
使用Vuex解决非父子组件之间通信问题 vuex 是通过将 state 作为数据中心、各个组件共享 state 实现跨组件通信的，此时的数据完全独立于组件，因此将组件间共享的数据置于 State 中能有效解决多层级组件嵌套的跨组件通信问题

vuex 的 State 在单页应用的开发中本身具有一个“数据库”的作用，可以将组件中用到的数据存储在 State 中，并在 Action 中封装数据读写的逻辑。这时候存在一个问题，一般什么样的数据会放在 State 中呢？目前主要有两种数据会使用 vuex 进行管理：

组件之间全局共享的数据
通过后端异步请求的数据

包括以下几个模块

state：Vuex 使用单一状态树,即每个应用将仅仅包含一个store 实例。里面存放的数据是响应式的，vue 组件从 store 读取数据，若是 store 中的数据发生改变，依赖这相数据的组件也会发生更新。它通过 mapState 把全局的 state 和 getters 映射到当前组件的 computed 计算属性
mutations：更改Vuex的store中的状态的唯一方法是提交mutation
getters：getter 可以对 state 进行计算操作，它就是 store 的计算属性虽然在组件内也可以做计算属性，但是 getters 可以在多给件之间复用如果一个状态只在一个组件内使用，是可以不用 getters
action：action 类似于 muation, 不同在于：action 提交的是 mutation,而不是直接变更状态action 可以包含任意异步操作
modules：面对复杂的应用程序，当管理的状态比较多时；我们需要将vuex的store对象分割成模块(modules)

modules：项目特别复杂的时候，可以让每一个模块拥有自己的state、mutation、action、getters，使得结构非常清晰，方便管理

回答范例

思路

给定义
必要性阐述
何时使用
拓展：一些个人思考、实践经验等

回答范例

Vuex 是一个专为 Vue.js 应用开发的 状态管理模式 + 库 。它采用集中式存储，管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
我们期待以一种简单的“单向数据流”的方式管理应用，即状态 -> 视图 -> 操作单向循环的方式。但当我们的应用遇到多个组件共享状态时，比如：多个视图依赖于同一状态或者来自不同视图的行为需要变更同一状态。此时单向数据流的简洁性很容易被破坏。因此，我们有必要把组件的共享状态抽取出来，以一个全局单例模式管理。通过定义和隔离状态管理中的各种概念并通过强制规则维持视图和状态间的独立性，我们的代码将会变得更结构化且易维护。这是vuex存在的必要性，它和react生态中的redux之类是一个概念
Vuex 解决状态管理的同时引入了不少概念：例如state、mutation、action等，是否需要引入还需要根据应用的实际情况衡量一下：如果不打算开发大型单页应用，使用 Vuex 反而是繁琐冗余的，一个简单的 store 模式就足够了。但是，如果要构建一个中大型单页应用，Vuex 基本是标配。
我在使用vuex过程中感受到一些等

可能的追问

vuex有什么缺点吗？你在开发过程中有遇到什么问题吗？

刷新浏览器，vuex中的state会重新变为初始状态。解决方案-插件 vuex-persistedstate

action和mutation的区别是什么？为什么要区分它们？

action中处理异步，mutation不可以

mutation做原子操作

action可以整合多个mutation的集合

mutation 是同步更新数据(内部会进行是否为异步方式更新数据的检测) $watch 严格模式下会报错

action 异步操作，可以获取数据后调佣 mutation 提交最终数据

流程顺序：“相应视图—>修改State”拆分成两部分，视图触发Action，Action再触发Mutation`。
基于流程顺序，二者扮演不同的角色：Mutation：专注于修改State，理论上是修改State的唯一途径。Action：业务代码、异步请求
角色不同，二者有不同的限制：Mutation：必须同步执行。Action：可以异步，但不能直接操作State

Watch中的deep:true是如何实现的

当用户指定了 watch 中的deep属性为 true 时，如果当前监控的值是数组类型。会对对象中的每一项进行求值，此时会将当前 watcher存入到对应属性的依赖中，这样数组中对象发生变化时也会通知数据更新

源码相关

get () {
   
    
    pushTarget(this) // 先将当前依赖放到 Dep.target上 
    let value 
    const vm = this.vm 
    try {
   
    
        value = this.getter.call(vm, vm) 
    } catch (e) {
   
    
        if (this.user) {
   
    
            handleError(e, vm, `getter for watcher "${
     
     this.expression}"`) 
        } else {
   
    
            throw e 
        } 
    } finally {
   
    
        if (this.deep) {
   
    // 如果需要深度监控 
        traverse(value) // 会对对象中的每一项取值,取值时会执行对应的get方法 
    }popTarget() 
}

Vue3速度快的原因

Vue3.0 性能提升体现在哪些方面

代码层面性能优化主要体现在全新响应式API，基于Proxy实现，初始化时间和内存占用均大幅改进；
编译层面做了更多编译优化处理，比如静态标记pachFlag（diff算法增加了一个静态标记，只对比有标记的dom元素）、事件增加缓存、静态提升（对不参与更新的元素，会做静态提升，只会被创建一次，之后会在每次渲染时候被不停的复用）等，可以有效跳过大量diff过程；
打包时更好的支持tree-shaking，因此整体体积更小，加载更快
ssr渲染以字符串方式渲染

一、编译阶段

试想一下，一个组件结构如下图

<template>
    <div id="content">
        <p class="text">静态文本</p>
        <p class="text">静态文本</p>
        <p class="text">{ message }</p>
        <p class="text">静态文本</p>
        ...
        <p class="text">静态文本</p>
    </div>
</template>

可以看到，组件内部只有一个动态节点，剩余一堆都是静态节点，所以这里很多 diff 和遍历其实都是不需要的，造成性能浪费

因此，Vue3在编译阶段，做了进一步优化。主要有如下：

diff算法优化
静态提升
事件监听缓存
SSR优化

1. diff 算法优化

Vue 2x 中的虚拟 dom 是进行全量的对比。
Vue 3x 中新增了静态标记(PatchFlag):在与上次虚拟结点进行对比的时候，值对比带有 patch flag 的节点，并且可以通过 flag 的信息得知当前节点要对比的具体内容化

Vue2.x的diff算法

vue2.x的diff算法叫做全量比较，顾名思义，就是当数据改变的时候，会从头到尾的进行vDom对比，即使有些内容是永恒固定不变的

Vue3.0的diff算法

vue3.0的diff算法有个叫静态标记（PatchFlag）的小玩意，啥是静态标记呢？简单点说，就是如果你的内容会变，我会给你一个flag，下次数据更新的时候我直接来对比你，我就不对比那些没有标记的了

已经标记静态节点的p标签在diff过程中则不会比较，把性能进一步提高

export function render(_ctx, _cache, $props, $setup, $data, $options) {
   
   
 return (_openBlock(), _createBlock("div", null, [
  _createVNode("p", null, "'HelloWorld'"),
  _createVNode("p", null, _toDisplayString(_ctx.msg), 1 /* TEXT */)
                        //上面这个1就是静态标记
 ]))
}

关于静态类型枚举如下

TEXT = 1 // 动态文本节点
CLASS=1<<1,1 // 2//动态class
STYLE=1<<2，// 4 //动态style
PROPS=1<<3,// 8 //动态属性，但不包含类名和样式
FULLPR0PS=1<<4,// 16 //具有动态key属性，当key改变时，需要进行完整的diff比较。
HYDRATE_ EVENTS = 1 << 5，// 32 //带有监听事件的节点
STABLE FRAGMENT = 1 << 6, // 64 //一个不会改变子节点顺序的fragment
KEYED_ FRAGMENT = 1 << 7, // 128 //带有key属性的fragment 或部分子字节有key
UNKEYED FRAGMENT = 1<< 8, // 256 //子节点没有key 的fragment
NEED PATCH = 1 << 9, // 512 //一个节点只会进行非props比较
DYNAMIC_SLOTS = 1 << 10 // 1024 // 动态slot
HOISTED = -1 // 静态节点
// 指示在diff算法中退出优化模式
BALL = -2

2. hoistStatic 静态提升

Vue 2x : 无论元素是否参与更新，每次都会重新创建。
Vue 3x : 对不参与更新的元素，会做静态提升，只会被创建一次，之后会在每次渲染时候被不停的复用。这样就免去了重复的创建节点，大型应用会受益于这个改动，免去了重复的创建操作，优化了运行时候的内存占用

<p>HelloWorld</p>
<p>HelloWorld</p>

<p>{ message }</p>

开启静态提升前

export function render(_ctx, _cache, $props, $setup, $data, $options) {
   
   
 return (_openBlock(), _createBlock("div", null, [
  _createVNode("p", null, "'HelloWorld'"),
  _createVNode("p", null, "'HelloWorld'"),
  _createVNode("p", null, _toDisplayString(_ctx.msg), 1 /* TEXT */)
 ]))
}

开启静态提升后编译结果

const _hoisted_1 = /*#__PURE__*/_createVNode("p", null, "'HelloWorld'", -1 /* HOISTED */)
const _hoisted_2 = /*#__PURE__*/_createVNode("p", null, "'HelloWorld'", -1 /* HOISTED */)

export function render(_ctx, _cache, $props, $setup, $data, $options) {
   
   
 return (_openBlock(), _createBlock("div", null, [
  _hoisted_1,
  _hoisted_2,
  _createVNode("p", null, _toDisplayString(_ctx.msg), 1 /* TEXT */)
 ]))
}

可以看到开启了静态提升后，直接将那两个内容为helloworld的p标签声明在外面了，直接就拿来用了。同时 _hoisted_1和_hoisted_2 被打上了 PatchFlag ，静态标记值为 -1 ，特殊标志是负整数表示永远不会用于 Diff

3. cacheHandlers 事件监听缓存

默认情况下 绑定事件会被视为动态绑定 ，所以每次都会去追踪它的变化
但是因为是同一个函数，所以没有追踪变化，直接缓存起来复用即可

<div>
 <button @click = 'onClick'>点我</button>
</div>

开启事件侦听器缓存之前：

export const render = /*#__PURE__*/_withId(function render(_ctx, _cache, $props, $setup, $data, $options) {
   
   
 return (_openBlock(), _createBlock("div", null, [
  _createVNode("button", {
   
    onClick: _ctx.onClick }, "点我", 8 /* PROPS */, ["onClick"])
                       // PROPS=1<<3,// 8 //动态属性，但不包含类名和样式
 ]))
})

这里有一个8，表示着这个节点有了静态标记，有静态标记就会进行diff算法对比差异，所以会浪费时间

开启事件侦听器缓存之后：

export function render(_ctx, _cache, $props, $setup, $data, $options) {
   
   
 return (_openBlock(), _createBlock("div", null, [
  _createVNode("button", {
   
   
   onClick: _cache[1] || (_cache[1] = (...args) => (_ctx.onClick(...args)))
  }, "点我")
 ]))
}

上述发现开启了缓存后，没有了静态标记。也就是说下次diff算法的时候直接使用

4. SSR优化

当静态内容大到一定量级时候，会用createStaticVNode方法在客户端去生成一个static node，这些静态node，会被直接innerHtml，就不需要创建对象，然后根据对象渲染

<div>
    <div>
        <span>你好</span>
    </div>
    ...  // 很多个静态属性
    <div>
        <span>{
  
  { message }}</span>
    </div>
</div>

编译后

import {
   
    mergeProps as _mergeProps } from "vue"
import {
   
    ssrRenderAttrs as _ssrRenderAttrs, ssrInterpolate as _ssrInterpolate } from "@vue/server-renderer"

export function ssrRender(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
   
   
  const _cssVars = {
   
    style: {
   
    color: _ctx.color }}
  _push(`<div${
     
     
    _ssrRenderAttrs