前端面试题 — — vue篇

前言

这里是关于 vue面试的一些题，我整理了一些经常被问到的问题，出现频率比较高的问题，以及个人经历过的问题。如有不足之处，麻烦大家指出，持续更新中…（ps：一到三颗⭐代表重要性,⭐选择性了解，⭐⭐掌握，⭐⭐⭐前端需要知道的知识）

1.数据双向绑定原理⭐⭐⭐

简单理解：数据双向绑定就是 Vue 中 data 数据改变会自动更新到视图上，视图有改动也会自动保存在 data 中。Vue 是利用 MVVM 的模式实现的数据双向绑定。

通过数据劫持结合发布—订阅模式，通过Object.defineProperty()为各个属性定义get、set方法，在数据发生改变时给订阅者发布消息，触发相应的事件回调。

1. 我们已经知道实现数据的双向绑定，首先要对数据进行劫持监听，所以我们需要设置一个监听器Observer，用来监听所有属性。
2. 如果属性发上变化了，就需要告诉订阅者Watcher看是否需要更新。
3. 因为订阅者是有很多个，所以我们需要有一个消息订阅器Dep来专门收集这些订阅者，然后在监听器Observer和订阅者Watcher之间进行统一管理的。
4. 接着，我们还需要有一个指令解析器Compile，对每个节点元素进行扫描和解析，将相关指令对应初始化成一个订阅者Watcher，并替换模板数据或者绑定相应的函数，此时当订阅者Watcher接收到相应属性的变化，就会执行对应的更新函数，从而更新视图。

2.VUE3响应式比VUE2快的原因⭐

• Vue 3使用 Proxy实现响应式时，新增的属性和删除的属性会自动成为响应式的，无需开发者手动调用特定方法来实现响应式。
  Vue 2使用 Object.defineProperty 实现响应式时，需要手动调用 Vue.set 来让新增属性变得响应式，否则新增属性不会触发视图更新。

• Vue 3使用 Proxy 可以将整个对象视为响应式，当对象属性被读取或改变时，可以捕获所有这些操作，不需要像 Vue 2 那样为每个属性分别设置 getter 和 setter。

• Vue 3使用 Proxy大大减少代码量，使代码结构更加清晰和简洁，提升可读性和可维护性。

• Proxy 的底层实现针对响应式处理进行了进一步优化，能够更加高效地进行依赖追踪和更新。

Proxy底层实现原理主要基于JS的 Proxy API

1. 使用 Proxy 对象可以对目标对象进行代理，通过传入一个处理器对象，该处理器对象中可以设置对目标对象的拦截操作，比如拦截读取、设置属性、删除属性等操作。
2. 通过定义 Proxy 处理器对象的拦截器（handler），可以拦截目标对象上的各种操作。比如，可以在设置属性时触发侦听器，从而实现侦听属性的变化。
3. 在 Proxy 的拦截器中常常会搭配使用 Reflect API，可以调用对应的 Reflect 方法来触发默认行为或者进行其他处理。

Proxy 接受两个参数：
target：要代理的目标对象。
handler：一个对象，定义了拦截操作（例如获取、设置属性等）的处理方法。
例：

const target = {};
const handler = {
    get(target, prop:要读取的属性名（可以是字符串或 Symbol）, receiver:从哪个对象当前属性被访问，通常用于继承链查找。) {
        // 拦截器逻辑
        return Reflect.get(target, prop, receiver);
    },
    set(target, prop, value, receiver) {
        // 拦截器逻辑
        return Reflect.set(target, prop, value, receiver);
    }
};

const proxy = new Proxy(target, handler);

3. VUE生命周期⭐⭐⭐

概念：从创建、初始化数据、编译模板、挂载DOM、渲染-更新-渲染、卸载等一系列过程，称为为Vue 实例的生命周期。

vue2.0

• beforeCreate：创建前。此时，组件实例刚刚创建，还未进行数据观测和事件配置，拿不到任何数据。
• created：创建完成。vue 实例已经完成了数据观测，属性和方法的计算(比如props、methods、data、computed和watch此时已经拿得到)，未挂载到DOM，不能访问到el属性，el属性，ref属性内容为空数组常用于简单的ajax请求，页面的初始化。
• beforeMount：挂载前。挂在开始之前被调用，相关的render函数首次被调用（虚拟DOM）。编译模板，把data里面的数据和模板生成html，完成了el和data 初始化，注意此时还没有挂在html到页面上。
• mounted：挂载完成。也就是模板中的HTML渲染到HTML页面中，此时可以通过DOM API获取到DOM节点，$ref属性可以访问常用于获取VNode信息和操作，ajax请求，mounted只会执行一次。
• beforeUpdate：在数据更新之前被调用，发生在虚拟DOM重新渲染和打补丁之前，不会触发附加地重渲染过程。
• updated：更新后。在由于数据更改导致地虚拟DOM重新渲染和打补丁之后调用，
• beforeDestroy;销毁前。在实例销毁之前调用，实例仍然完全可用。（一般在这一步做一些重置的操作，比如清除掉组件中的定时器 和 监听的dom事件）
• destroyed：销毁后。在实例销毁之后调用，调用后，vue实列指示的所有东西都会解绑，所有的事件监听器会被移除。
  其他：
  activated：在keep-alive组件激活时调用
  deactivated：在keep-alive组件停用时调用
  详情可看vue2.0官网生命周期钩子

vue3.0

• onBeforeMount
• onMounted
• onBeforeUpdate
• onUpdated
• onBeforeUnmount
• onUnmounted

详情可看vue3.0官网生命周期钩子

4.组件之间如何传值⭐⭐⭐

一、Vue父子 组件之间传值

• 子组件通过props来接受数据和通过$emit来触发父组件的自定义事件；

二、兄弟组件之间的传值

• 建一个公共组件bus.js.。传递方通过事件触发bus.$emit。接收方通过在mounted（）{}生命周期里触发bus.$on。

三、可以通过VUEX 来跨组件传参。

四、父孙传值 $attrs（向下）$listeners（向上）

五、 祖先和子孙传值provide/inject

六、获取父组件实例this.$parent
详情可看vue之组件的传参方式

5.v-model 的作用以及实现原理⭐

作用：v-model本质上不过是语法糖，可以用 v-model 指令在表单及元素上创建双向数据绑定。

实现原理：
v-bind:绑定响应式数据
触发oninput 事件并传递数据

vue3实现代码

<template>
    <input @input="inputFn" :value="message"> 
</template>
<script setup>
import { ref, defineEmits } from "vue";
const message = ref("");
const emit = defineEmits(["message"]);
const inputFn = (e) => {
    message.value = e.target.value;
    emit("message", message.value);
};
</script>

父组件使用
<CustomInput @message="value => console.log(value)"/>

6.谈一谈VUEX、pinia⭐

原理：Vuex是专门为vue.js应用程序设计的状态管理工具。
构成:

• state:vuex的基本数据，用来存储变量，存放的数据是响应式的。
• mutations:提交更改数据，同步更新状态。
• actions:提交mutations，可异步操作。
• getters：是store的计算属性。
• modules:模块，每个模块里面有四个属性。
  关于VUEX如何使用可以看VUE的传值问题

Vue3开始使用pinia

pinia与VUEX的区别

• mutations 不再存在
• 无需创建自定义复杂包装器来支持 TypeScript
• 不再需要注入、导入函数、调用函数、享受自动完成功能
• 无需动态添加 Store，默认情况下它们都是动态的
• 不再有 modules 的嵌套结构
• 没有 命名空间模块
  参考Pinia 中文文档

7.如何解决VUEX页面刷新数据丢失问题？⭐⭐

原因：因为vuex里的数据是保存在运行内存中的，当页面刷新时，页面会重新加载vue实例，vuex里面的数据就会被清空。

解决方法：将vuex中的数据直接保存到浏览器缓存中。

另一种方法：使用插件vuex-persistedstate。
vuex-persistedstate可以将Vuex store的状态持久化存储到浏览器的localStorage或sessionStorage中，使得用户下次打开页面时能够继续使用之前的应用状态。

8.computed和watch的区别？⭐⭐⭐

computed值有缓存、触发条件是依赖值发生更改、 watch无缓存支持异步、监听数据变化

computed： 是计算属性，依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新计算 computed 的值；
watch： 更多的是观察的作用，支持异步，类似于某些数据的监听回调 ，每当监听的数据变化时都会执行回调进行后续操作；

computed应用场景：需要进行数值计算，并且依赖于其它数据时，应该使用 computed，因为可以利用 computed 的缓存特性，避免每次获取值时，都要重新计算；
watch应用场景：需要在数据变化时执行异步或开销较大的操作时，应该使用 watch，使用 watch 选项允许我们执行异步操作 ( 访问一个 API )，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。

详情请看 Vue的计算属性与methods、watch的区别

9.如何封装axios？⭐

这个根据自己项目实际情况来说。
列举：

1. 安装 Axios npm install axios
2. 创建 Axios 实例

import axios from 'axios';
const http = axios.create({
  baseURL: 'https:XXX.com', // 设置axios基础路径
  timeout: 10000, // 设置请求超时
  headers: {
    'Content-Type': 'application/json',
  },
});  
export default http;

3. 发送请求 GET、POST、PUT、DELETE 等
4. 处理请求和响应拦截器
5. 使用

可以参考下这个文章axios详解以及完整封装方法

10.Route和router的区别⭐

• route:是路由信息对象，包括“path,parms,hash,name“等路由信息参数。
• Router:是路由实例对象，包括了路由跳转方法，钩子函数等。

11.v-show和v-if的区别⭐⭐⭐

• v-if:真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建；也是 惰性的，如果开始条件为false则什么都不做，只有为true才会编译。
• v-show:css切换，隐藏显示更适合频繁切换。在任何情况下都会被编译，然后被缓存，而且dom元素会被保留。 （v-show = false 则代表 display: none; true 则显示）

12.vue中数据变了但是视图不跟新怎么解决？⭐

原因(只在vue2中出现这种情况)：

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

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

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

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

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

更详细的解释 ==>

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

首先了解父子组件生命周期执行顺序 ==>
vue2加载渲染数据过程
父组件 beforeCreate -->
父组件 created -->
父组件 beforeMount -->
子组件 beforeCreate -->
子组件 created -->
子组件 beforeMount -->
子组件 mounted -->
父组件 mounted -->
vue3加载渲染数据过程
父组件 onBeforeMount -->
子组件 onBeforeMount -->
子组件 onMounted -->
父组件 onMounted -->
原因：因为生命周期只会执行一次，数据是要等到异步请求以后才能拿到，那么子组件的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

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

子组件：

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

父组件

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

16.VUE路由跳转方式⭐⭐

• router-link 标签跳转
• this.$router.push()
• this.$router.replace() ：不会留下历史记录
• this.$router.go(n) ：（0：当前页，-1上一页，+1下一页，n代表整数）
• 使用 < router-view >

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

vue2.0文档是这么说的

vue2列表渲染指南

vue3.0文档是这么说的

vue3条件渲染

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

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

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

应用场景：

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

vue2官网中是这么说的

vue3官网中是这么说的

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

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

官网是这样说的

详情可见官网内置的特殊 Attributes

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

1. 响应式
   Vue 2: 使用的是基于 Object.defineProperty 的响应式系统。这种系统的响应式追踪机制对于对象的属性是有限的，动态添加属性时需要手动进行处理。
   限制：无法响应数组元素的变化或对象的新增属性。

   Vue3 : 使用了新的响应式系统，基于 Proxy 实现。Proxy 使得 Vue 能够劫持对象的所有操作，从而实现更 细粒度的响应式追踪。
   优势：可以更高效地处理属性的增删改查，对数组和对象的动态变化有更好的支持。

//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
})

2. 性能优化
   Vue3 引入了 虚拟 DOM 的优化和 编译时优化，显著提高了性能。
   Tree-shaking：Vue 3 支持 tree-shaking，意味着在构建过程中可以去除未使用的代码，从而减小最终打包的体积。
   更快的初始化和更新速度：相较于 Vue 2，Vue 3 的初始化和更新速度更快。

3. Composition API
   Vue2:主要依赖于 Options API，即通过 data、methods、computed 等选项来定义组件的逻辑。
   Vue3:引入了 Composition API，允许开发者在函数内部组织和复用逻辑，提供了更灵活的方式来组合组件逻辑和状态(setup)。

4. TypeScript支持
   Vue 2: TypeScript 支持有限.
   Vue3: 更好的 TypeScript 支持，能够更好地与 TypeScript 进行集成，支持更强的类型推断和类型检查。

5. 自定义指令
   Vue 2: 自定义指令的使用和定义较为简单，但也有限。
   Vue 3: 自定义指令的 API 更加灵活和强大，提供了更细粒度的控制。

6. Fragment 支持
   Vue 2: 一个组件只能有一个根节点。要返回多个元素时，通常需要使用额外的包装元素(div)。
   Vue 3: 支持 Fragment，即组件可以返回多个根节点，不再需要额外的包装元素。这使得组件结构更加简洁。

//vue3
<template>
  <div>部分内容</div>
  <span>另一部分内容</span>
</template>

7. 生命周期
   Vue 2: 提供了如 created、mounted、updated、destroyed 等生命周期钩子函数。
   Vue 3: 维持了大部分生命周期钩子，但在 Composition API 中，钩子的使用方式有所不同，比如 onMounted、onUnmounted 等。
8. provide/inject
   Vue 2: 使用方式较为基础。
   Vue 3: 更加灵活，并支持组合式 API 中的使用。
9. Teleport
   vue3新增了 Teleport 组件允许将子组件的内容渲染到 DOM 的任意位置。
10. watchEffect、watchPostEffect
    watchEffect：用于响应式副作用，自动追踪依赖。
    watchPostEffect：在 DOM 更新之后执行副作用。
11. ref、reactive
    Vue3 对 ref 和 reactive 的功能进行了改进，支持更多类型的数据，并提供了更好的类型推断。
12. Suspense
    Vue 3 引入了 Suspense 组件，用于处理异步组件加载时的占位内容和错误处理。
    vue3官网Suspense
13. v-if/v-for
    Vue2 v-for优先级比v-if高
    Vue3 v-if优先级比v-for高

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

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

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

参考官网响应式基础

22.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

23.Pinia和Vuex的区别⭐

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

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

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

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

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

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

26. 事件修饰符⭐

.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>
 

详细请看官网事件修饰符

27.路由之间如何传参⭐

• 通过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在地址栏中不显示参数，刷新页面，参数丢失,
其余方法在地址栏中显示传递的参数，刷新页面，参数不丢失。

详情请看Vue-router之简单的路由传参三种方法

28.页面在编译时发生闪烁怎么解决？⭐

首先了解原因：

• 在页面加载时，Vue.js 组件可能会在数据就绪之前渲染。这可能会导致元素在数据可用之前短暂显示其初始状态。
• 使用直接在 DOM 中书写的模板时，可能会出现一种叫做“未编译模板闪现”的情况：用户可能先看到的是还没编译完成的双大括号标签，直到挂载的组件将它们替换为实际渲染的内容。

解决办法：使用指令v-cloak

v-cloak 会保留在所绑定的元素上，直到相关组件实例被挂载后才移除。 v-cloak用于隐藏尚未完成编译的 DOM 模板。

<template>
  <div v-cloak>
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: null,
      content: null
    }
  },
  created() {
    // 从服务器获取数据并更新状态
    this.fetchData();
  },
  methods: {
    fetchData() {
      // 模拟从服务器获取数据
      setTimeout(() => {
        this.title = '标题';
        this.content = '内容';
      }, 500);
    }
  }
}
</script>

在上面的示例中，v-cloak 用于隐藏元素，直到 fetchData 方法从服务器获取数据并更新状态。这将防止在数据加载之前闪烁效果。
相关可以看官网v-cloak

29. VUE2与VUE3 Tree shaking的区别⭐

首先了解tree shaking是什么？
一种通过清除多余代码方式来优化项目打包体积的技术，专业术语叫 Dead code elimination
简单来讲，就是在保持代码运行结果不变的前提下，去除无用的代码

Vue 2 中的 Tree Shaking
在 Vue 2 中，由于 Vue 的核心库是以 CommonJS 模块的方式导出的，这导致了：

全量导入：当你在应用程序中使用 Vue 2 时，通常会使用像 import Vue from ‘vue’ 这样的语法来导入整个 Vue 核心。这种导入方式不利于 Tree Shaking，因为整个模块被引入，而不是按需导入和使用。
限制 Tree Shaking 效果：虽然 Vue 2 支持按需加载的写法（如使用 import { Component } from ‘vue’），但由于底层使用的是 CommonJS 格式，一些构建工具可能无法有效地进行 Tree Shaking。这意味着有些未使用的代码仍然可能被打包进最终的生产代码中。

Vue 3 中的 Tree Shaking
在 Vue 3 中，Vue 的核心库被重构为使用 ES Module 格式导出，这为 Tree Shaking 提供了更好的支持：

ES Module 导出：Vue 3 的核心库和许多内部功能模块都以 ES Module 形式导出，这种格式对于 Tree Shaking 是非常友好的。它允许构建工具在编译时更精确地识别和剔除未使用的代码。
更细粒度的导入：在 Vue 3 中，你可以使用更细粒度的导入语法，例如 import { createApp, defineComponent } from ‘vue’。这种方式使得构建工具可以更有效地识别并删除未被使用的模块和功能。
优化的体积：由于 Vue 3 的架构和导出方式的改进，应用程序在使用 Tree Shaking 时可以获得更小的包体积，只包含实际用到的代码。

总结：
在 Vue 2 中，由于使用了 CommonJS 格式的导出方式，Tree Shaking 的效果有限，很难完全消除未使用的代码，尤其是在全局导入 Vue 实例时。而在 Vue 3 中，采用了 ES Module 格式的导出，极大地增强了 Tree Shaking 的能力，使得构建工具能够更有效地剔除未使用的模块和代码片段，从而帮助优化应用程序的性能和体积。

vue3的Tree-shaking 优化

30. VUE3中ref与reactive⭐

ref:可以持有任何类型的值，包括深层嵌套的对象、数组或者 JavaScript 内置的数据结构，比如 Map。
Ref 会使它的值具有深层响应性。这意味着即使改变嵌套对象或数组时，变化也会被检测到：

import { ref } from 'vue'

const obj = ref({
    nested: { count: 0 },
    arr: ['foo', 'bar']
})

function mutateDeeply () {
    // 以下都会按照期望工作
    obj.value.nested.count++
    obj.value.arr.push('baz')
}
mutateDeeply()

reactive：

• 有限的值类型：它只能用于对象类型 (对象、数组和如 Map、Set 这样的集合类型)。它不能持有如 string、number 或 boolean 这样的原始类型。
• 不能替换整个对象：由于 Vue 的响应式跟踪是通过属性访问实现的，因此我们必须始终保持对响应式对象的相同引用。这意味着我们不能轻易地“替换”响应式对象，因为这样的话与第一个引用的响应性连接将丢失：

let state = reactive({ count: 0 })

// 上面的 ({ count: 0 }) 引用将不再被追踪
// (响应性连接已丢失！)
state = reactive({ count: 1 })

• 对解构操作不友好：当我们将响应式对象的原始类型属性解构为本地变量时，或者将该属性传递给函数时，我们将丢失响应性连接：

const state = reactive({ count: 0 })

// 当解构时，count 已经与 state.count 断开连接
let { count } = state
// 不会影响原始的 state
count++ //1
console.log(state.count); //0

参考 ：响应式基础

31. ref为什么要加.value

1. 支持基本类型
   ref 允许创建对基本数据类型（如数字、字符串等）的响应式引用。为了能够将这些基本类型的值包装在对象中，Vue 需要一个方式来区分原始值和响应式包装。
2. 对比与对象的响应式
   在 Vue 3 中，使用 reactive 创建的响应式对象的属性是不需要额外的标记（像 .value）。这让开发者可以在访问对象属性时，直接使用它们。但是对于 ref，为了提供一致性和灵活性，Vue 选择使用 .value 这种语法。
3. 可读性和一致性
   使用 .value 可以清楚地区分出何时是访问普通对象属性，何时是访问响应式引用。这种明确的约定使得代码在某种程度上更易读。可以一目了然地区分对原始值的引用与对响应式引用的访问。
4. 便于扩展
   将响应式数据包装在对象中，也为未来的功能扩展提供了灵活性。

总结：为了支持基本类型的响应式引用、保持代码的一致性和可读性，同时也为将来的扩展提供了灵活性。

32. watch 和 watchEffect⭐

watch

• 用于监视特定数据的变化，并在数据变化时执行回调函数。
• 需要明确指定要监视的数据。

const count = ref(0); 
count.value++
watch(count, (newValue, oldValue) => {
  console.log(`count 从 ${oldValue} 变成了 ${newValue}`);
}); 

watchEffect

• 用于自动追踪其函数体内使用的响应式数据，并在这些数据变化时重新运行该函数。
• 声明一个响应式的副作用，只要函数中使用的响应式数据发生变化，就会执行函数体。

const isLoggedIn = ref(false); 
watchEffect(() => {
  if (isLoggedIn.value) {
    console.log('用户已登录');
    // 执行其他逻辑，例如更新用户信息
  } else {
    console.log('用户未登录');
    // 执行其他逻辑，例如显示登录按钮
  }
});

参考：vue3侦听器watchEffect()

33. toRef 和 toRefs ⭐

toRef

• 将一个对象的特定属性转换为一个响应式引用（ref），这样可以独立地跟踪该属性的变化。

import { reactive, toRef } from 'vue';

const state = reactive({
  count: 1,
  name: 'Vue'
});

// 将 count 转换为一个 ref
const countRef = toRef(state, 'count');

// 现在可以独立地使用 countRef
countRef.value++;  //2

toRefs

• 将整个响应式对象的所有属性都转换为响应式引用，返回一个包含这些属性的对象。

import { reactive, toRefs } from 'vue';
function useFeatureX() {
	const state = reactive({
  		count: 1,
  		name: 'Vue'
	});
  return toRefs(state)
} 

// 现在可以独立地使用 count 和 name
count.value++;   //2
name.value = 'Vue 3';  //Vue 3

// 可以解构而不会失去响应性
const { count, name } = useFeatureX()

参考：vue3相应API工具函数

34. vue中的性能优化⭐

1. 懒加载和按需加载
   组件懒加载：使用 Vue 的异步组件特性，按需加载组件，而不是在应用启动时加载所有组件。
   路由懒加载：在 Vue Router 中按需加载路由。
   异步组件：使用 import() 来实现组件的按需加载，减少初始包的大小。
2. 使用 Vuex 管理状态
3. DOM 操作优化
   使用 v-if 和 v-show：根据情境合理选择组件的渲染方式，避免无效的 DOM 操作。
   合理使用 key：使用 key 帮助 Vue 跟踪节点，使得 Vue 的虚拟 DOM 更高效。
4. 计算属性和方法
   使用计算属性（computed与watch）
5. 组件缓存
   对于需要频繁切换的组件，可以使用 keep-alive 来缓存组件，提高切换性能。
6. 资源优化
   图片优化与减少http请求
7. 构建优化
   代码拆分：通过动态导入和 Webpack 的优化特性实现代码拆分，减少初始加载体积。
   Tree Shaking：在构建时移除未使用的代码，确保包体积最小化。
8. 服务端渲染(SSR)
   使用 Nuxt.js 等进行服务端渲染，以提升首屏加载速度和 SEO 性能。
9. 监控与调试
   使用 Vue Devtools 和性能分析工具，监测应用性能，找到瓶颈，进行有针对性的优化。

其他

关于前端其他面试题可以看这个

前端面试题（附答案）完善中……