参考：前端面试题（附答案）完善中……_Jet_closer_burning的博客-CSDN博客

 合集：2023年最全前端面试题考点HTML5+CSS3+JS+Vue3+React18+八股文+手写+项目+笔试_参宿7的博客-CSDN博客

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

2. 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官网生命周期钩子

3.组件之间如何传值⭐⭐⭐ 一、Vue父子 组件之间传值

子组件通过props来接受数据和通过$emit来触发父组件的自定义事件； 二、兄弟组件之间的传值

建一个公共组件bus.js.。传递方通过事件触发bus.$emit。接收方通过在mounted（）{}生命周期里触发bus.$on。 三、可以通过VUEX 来跨组件传参。

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

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

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

4.路由之间如何传参⭐⭐ 通过router-link路由导航跳转传递 routerlink传参 1 跳转时使用push方法拼接携带参数。   this.$router.push({           path: `/getlist/${id}`,         }) 1 2 3 通过路由属性中的name来确定匹配的路由，通过params来传递参数。 this.$router.push({           name: 'Getlist',           params: {             id: id           }         }) 1 2 3 4 5 6 使用path来匹配路由，然后通过query来传递参数。 this.$router.push({           path: '/getlist',           query: {             id: id           }         }) 1 2 3 4 5 6 注意：query有点像ajax中的get请求，而params像post请求。

params在地址栏中不显示参数，刷新页面，参数丢失, 其余方法在地址栏中显示传递的参数，刷新页面，参数不丢失。

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

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

state:vuex的基本数据，用来存储变量，存放的数据是响应式的。 mutations:提交更改数据，同步更新状态。 actions:提交mutations，可异步操作。 getters：是store的计算属性。 modules:模块，每个模块里面有四个属性。 关于VUEX如何使用可以看VUE的传值问题 6.如何解决vuex页面刷新数据丢失问题？⭐⭐ 原因：因为vuex里的数据是保存在运行内存中的，当页面刷新时，页面会重新加载vue实例，vuex里面的数据就会被清空。 解决方法：将vuex中的数据直接保存到浏览器缓存中。（一般是用sessionStorage）

7.computed和watch的区别？⭐⭐⭐ computed值有缓存、触发条件是依赖值发生更改、 watch无缓存支持异步、监听数据变化

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

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

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

8.如何封装axios？⭐ 这个根据自己项目实际情况来说，这篇文章写的不错可以看看Vue的axios的简单封装

9.Route和router的区别⭐ route:是路由信息对象，包括“path,parms,hash,name“等路由信息参数。 Router:是路由实例对象，包括了路由跳转方法，钩子函数等。 10.v-show和v-if的区别⭐ v-if:组件的销毁和重建，更适合带有权限的操作，切换开大。如果开始条件为false则什么都不做，只有为true才会编译。 v-show:css切换，隐藏显示更适合频繁切换。在任何情况下都会被编译，然后被缓存，而且dom元素会被保留。 11.vue中数据变了但是视图不跟新怎么解决？⭐ 原因：

数组数据变动：使用某些方法操作数组，变动数据时，有些方法无法被vue监测。 Vue 不能检测到对象属性的添加或删除。 异步更新队列：数据第一次的获取到了，也渲染了，但是第二次之后数据只有在再一次渲染页面的时候更新，并不能实时更新。 12.vue中data为什么是函数而不是对象？⭐⭐ 官网中有这么一段介绍，详情可以看组件的复用

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

更详细的解释 ==>

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

使用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          }      })   } 1 2 3 4 5 6 7 8 9 10 11 12 使用watch监听数据的变化 举例：   props: {     tableData: {       type: Array,       default: [],     },   },   watch: {      tableData(val){          console.log(val)      }   }, 1 2 3 4 5 6 7 8 9 10 11 使用VueX 14.父子组件传参emit如何传多个参数？⭐ 子组件：

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

g(val1,val2,val3,val4,val5) {     console.log(val1,val2,val3,val4,val5) } 1 2 3 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？⭐⭐ 为了性能优化， 因为vue是虚拟DOM，更新DOM时用diff算法对节点进行一一比对，比如有很多li元素，要在某个位置插入一个li元素，但没有给li上加key，那么在进行运算的时候，就会将所有li元素重新渲染一遍，但是如果有key，那么它就会按照key一一比对li元素，只需要创建新的li元素，插入即可，不需要对其他元素进行修改和重新渲染。 key也不能是li元素的index，因为假设我们给数组前插入一个新元素，它的下标是0，那么和原来的第一个元素重复了，整个数组的key都发生了改变，这样就跟没有key的情况一样了。

19.Vue 2和vue3的区别？⭐⭐⭐ 双向数据绑定原理不同 Vue2 的双向数据绑定是利用Object.definePropert() 对数据进行劫持，结合发布订阅模式的方式来实现的。 Vue3 中使用Proxy API对数据代理。 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