2024年前端面试题 — — vue篇_前端vue面试题(2)，经验分享

学习分享，共勉

题外话，毕竟我工作多年，深知技术改革和创新的方向，Flutter作为跨平台开发技术、Flutter以其美观、快速、高效、开放等优势迅速俘获人心

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• 数组数据变动：使用某些方法操作数组，变动数据时，有些方法无法被vue监测，或者是数组长度的改变。
  （push()，pop()，shift()，unshift()，splice()，sort()，reverse()）不会改变原始数组，而是返回一个新的数组，视图不会自动更新。
• Vue 不能检测到对象属性的添加或删除。
• 异步更新队列：数据第一次的获取到了，也渲染了，但是第二次之后数据只有在再一次渲染页面的时候更新，并不能实时更新。

解决方法：数组长度变化可以用splice来修改，需要监听某个属性的变化用$set。

12.vue中data为什么是函数而不是对象？⭐⭐

官网中有这么一段介绍，详情可以看组件的复用

意思就是，在Vue中组件是可以被复用的，而当data是一个函数的时候，每一个实例的data都是独立的，不会相互影响了。

更详细的解释 ==>

13.VUE中父子组件传值，父组件异步请求，子组件不能实时更新怎么解决？（VUE中数据不能实时更新怎么解决？）⭐⭐⭐

首先了解父子组件生命周期执行顺序 ==>
加载渲染数据过程
父组件 beforeCreate -->
父组件 created -->
父组件 beforeMount -->
子组件 beforeCreate -->
子组件 created -->
子组件 beforeMount -->
子组件 mounted -->
父组件 mounted -->
原因：因为生命周期只会执行一次，数据是要等到异步请求以后才能拿到，那么子组件的mounted钩子执行的时候，还没有拿到父组件传递过来的数据，但是又必须要打印出来结果，那这样的话，就只能去打印props中的默认值空字符串了，所以打印的结果是一个空字符串。
解决办法：

1. 使用v-if控制组件渲染的时机
   初始还没拿到后端接口的异步数据的时候，不让组件渲染，等拿到的时候再去渲染组件。使用v-if="变量"去控制，初始让这个变量为false，这样的话，子组件就不会去渲染，等拿到数据的时候，再让这个变量变成true，
   举例：

  data() {
    return {
      isTrue:false // 初始为false
    };
  },
  monted(){
  this.$post.a.b.c.getData(res=>{
        if(res.result){
            this.isTrue = true
         }
     })
  }

2. 使用watch监听数据的变化
   举例：

  props: {
    tableData: {
      type: Array,
      default: [],
    },
  },
  watch: {
     tableData(val){
         console.log(val)
     }
  },

3. 使用VueX

14.父子组件传参emit如何传多个参数？⭐

子组件：

submit(){
	this.$emit('g',1,2,3,4,5)
}

父组件

g(val1,val2,val3,val4,val5) {
	console.log(val1,val2,val3,val4,val5)
}

15.VUE路由跳转方式⭐⭐

• router-link 标签跳转
• this.$router.push()
• this.$router.replace()
• this.$router.go(n)：（0：当前页，-1上一页，+1下一页，n代表整数）

16.条件渲染v-if 与 v-for 优先级⭐

vue2.0文档是这么说的

vue2列表渲染指南

vue3.0文档是这么说的

vue3条件渲染

17.VUE 中 $nextTick 作用与原理？⭐⭐⭐

异步渲染、获取DOM、Promise等。

Vue 在更新 DOM 时是异步执行的，在修改数据后，视图不会立刻更新，而是等同一事件循环中的所有数据变化完成之后，再统一进行视图更新。所以修改完数据，立即在方法中获取DOM，获取的仍然是未修改的DOM。
$nextTick的作用是：该方法中的代码会在当前渲染完成后执行，就解决了异步渲染获取不到更新后DOM的问题了。
$nextTick 的原理： $nextTick本质是返回一个Promise 。

应用场景：

• 在created()里面想要获取操作Dom，把操作DOM的方法放在$nextTick中。
• 在data()中的修改后，页面中无法获取data修改后的数据，使用$nextTick时，当data中的数据修改后，可以实时的渲染页面

官网中是这么说的

18.VUE中 for循环为什么加 key？⭐⭐

为了性能优化优化diff算法， 因为vue是虚拟DOM，更新DOM时用diff算法对节点进行一一比对，比如有很多li元素，要在某个位置插入一个li元素，但没有给li上加key，那么在进行运算的时候，就会将所有li元素重新渲染一遍，但是如果有key，那么它就会按照key一一比对li元素，只需要创建新的li元素，插入即可，不需要对其他元素进行修改和重新渲染。
key也不能是li元素的index，因为假设我们给数组前插入一个新元素，它的下标是0，那么和原来的第一个元素重复了，整个数组的key都发生了改变，这样就跟没有key的情况一样了。

19.VUE2和VUE3的区别？⭐⭐⭐

• 响应式不同
  Vue 2 使用 getters 和 setters 来实现响应式。
  Vue3 使用Proxy ，Proxy 提供了更简单的 API 和更高的性能，因为它不需要定义 getters 和 setters。
  Vue 3 的响应式系统比 Vue 2 更快、更简单、更强大。它使用 Proxy 和惰性追踪提供了更高的性能，并通过新的响应式 API 简化了响应式数据的管理。

//Vue2
const data = {
  count: 0
}

Object.defineProperty(data, 'count', {
  get() {
    return this.count
  },
  set(newValue) {
    this.count = newValue
    this.$emit('countChanged', newValue)
  }
})

//Vue3
const data = reactive({
  count: 0
})

• API 类型不同
  Vue2 使用选项类型api。
  Vue3 使用合成型api。
• 定义数据变量和方法不同
  Vue2是把数据放到了data 中。
  Vue3使用setup()。
• 生命周期不同
• 父子传参不同
• 指令与插槽不同
• 是否支持碎片
  Vue2 不支持碎片。
  Vue3 支持碎片，可以拥有多个根节点

20.为什么VUE3不继续用$set？⭐

$set的作用：在vue2.0中：使用对象和数组来定义数据，当需要向对象或数组中新增一个属性或元素，并希望它在更新 View 时响应式地更新，就需要使用 $set方法来完成。
vue2是用object.definedProperty来实现数据响应的，无法监听深层数据的变化。

Vue3 中使用Proxy对数据代理通过ref和reactive将值和对象类型变为响应式对象，这样对它的修改和添加就能被vue捕获到，从而实现页面的自动刷新。

参考官网响应式基础

21.VUE路由中的history和hash的区别⭐⭐

• 地址栏带不带"#"号
  hash：http://localhost:8080/#/
  history:http://localhost:8080/
• 都是利用浏览器的两种特性实现前端路由
  history是利用浏览历史记录栈的API实现
  hash是监听location对象hash值变化事件来实现
• 相同的url
  history会触发添加到浏览器历史记录栈中，hash不会触发，
  history需要后端配合，如果后端不配合刷新页面会出现404，hash不需要

hashRouter原理：通过window.onhashchange获取url中hash值
historyRouter原理：通过history.pushState,使用它做页面跳转不会触发页面刷新，使用window.onpopstate监听浏览器的前进和后退

详情可以看官网不同历史模式|Vue Router

22.Pinia和Vuex的区别⭐

• 支持选项式api和组合式api
• pinia没有mutations，只有state、getters、 actions
• pinia分模块不需要modules
• 支持TypeScript
• 自动化代码拆分
• pinia体积更小
• pinia可以直接修改state数据

参考https://github.com/vuejs/rfcs/pull/271

23.Vue Diff算法⭐

当组件创建和更新时，vue均会执行内部的update函数，该函数使用render函数生成虚拟dom树，将新旧两树进行对比，找到差异，最终更新到真实dom。

对比差异的过程叫做diff，vue在内部通过一个叫patch的函数完成该过程。

在对比时，vue采用深度优先，同层比较的方式进行对比。

在比较两个节点是否相同时，vue通过虚拟节点的key和tag来进行判断。

首先对根节点进行对比，如果相同将旧节点关联的真实dom的引用挂载到新节点上，然后根据需要更新属性到真实dom，然后再对比其子节点数组，如果不相同，则按照新节点的信息递归创建所有真实dom，同时挂载到对应虚拟节点上，然后移除旧的dom。

对比其子节点数组时，vue对每个子节点数组使用两个指针。分别指向头尾，然后不断向中间靠拢来进行对比，目的是尽量复用真实dom，少创建和销毁真实dom。如果发现相同，则进入和根节点一样对比流程，如果不同，则移动真实dom到合适的位置。

这样一直递归的遍历下去，直到整颗树完成对比。

Vue 中的优化策略
在 Vue 的 diff 算法中引入了一些优化策略，以减少不必要的 diff 操作，提高 diff 性能，具体来说，有以下几点：

• 模板编译时静态节点标记
  Vue 在模板编译时，会对那些不需要变更的静态节点做标记，这样在后续渲染时，就可以省略对这些节点进行 diff 操作，减少 diff 的复杂度，提高性能。
• 列表遍历的 key 值优化
  在 Vue 中，当对一个列表进行遍历时，我们通常会为每个子元素指定一个 key 值来唯一标识它们，以便于后续的 diff 操作。在这个过程中，Vue 会通过记录 key 值来对比新旧节点是否发生了变化，如果没有变化，则会保留该节点对应的状态，避免不必要的重复渲染。
• 相同节点的合并优化
  在 diff 算法中，如果新旧节点是相同节点（即两个节点都是相同的标签和属性），并且都不需要更新子节点，则认为这两个节点是相同的，可以直接跳过对该节点的 diff 操作，提高 diff 性能。

Vue 的 diff 算法是一种高效的前端响应式实现方式，能够快速地对比新旧节点间的差异，并快速更新页面视图，提升了用户体验和程序性能。

24. 动态组件 & 异步组件⭐

动态组件和异步组件都是为了实现组件的动态渲染和按需加载，可以提高应用的性能和灵活性。
动态组件 ：渲染组件时，根据某个条件动态地选择组件。

异步组件：组件的加载和渲染过程分成两部分进行，即先加载组件的代码和依赖，等加载成功后再将其渲染到页面上。这样可以避免在初始加载时一次性加载所有组件的代码和依赖，从而提高页面的性能和响应速度。在Vue中，可以使用工厂函数和组件的异步加载特性来实现异步组件的加载。
参考官网
vue2异步组件
vue3异步组件

25. 事件修饰符⭐

.stop:阻止单击事件继续传播
.prevent:提交事件不再重载页面
.capture :添加事件监听器时使用事件捕获模式
.self :当前元素自身时触发处理函数
.once :只会触发一次
.passive :提升移动端的性能。

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>
 

详细请看官网事件修饰符

26.路由之间如何传参⭐

• 通过router-link路由导航跳转传递

<router-link to=`/a/${id}`>routerlink传参</router-link>

• 跳转时使用push方法拼接携带参数。

  this.$router.push({
          path: `/getlist/${id}`,
        })

• 通过路由属性中的name来确定匹配的路由，通过params来传递参数。

this.$router.push({
          name: 'Getlist',
          params: {
            id: id
          }
        })

• 使用path来匹配路由，然后通过query来传递参数。

this.$router.push({
          path: '/getlist',
          query: {
            id: id
          }
        })

注意：query有点像ajax中的get请求，而params像post请求。

params在地址栏中不显示参数，刷新页面，参数丢失,
其实前端开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。

这里再分享一个复习的路线：（以下体系的复习资料是我从各路大佬收集整理好的）

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

《前端开发四大模块核心知识笔记》

最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。

我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在IT学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。

问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。

这里再分享一个复习的路线：（以下体系的复习资料是我从各路大佬收集整理好的）

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

《前端开发四大模块核心知识笔记》

最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。

我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在IT学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。