前端面试题知识点（VUE 2，2024年最新高级前端工程师面试题2024

前端面试题知识点（VUE 2.0 + JS + ES6 + HTML + CSS + 其他 + UniApp）

• VUE 2.0面试题
• • vuex
    • router路由
    • axios
    • webpack
• JS面试题
• ES6面试题
• 其他面试题
• html + css面试题
• UniApp面试题

VUE 2.0面试题

vue的双向数据绑定原理

vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过new Proxy()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

vue生命周期的理解

• beforeCreate：实例、组件通过new Vue() 创建出来之后会初始化事件和生命周期，然后就会执行beforeCreate钩子函数，这个时候，数据还没有挂载，vue实例的挂载元素$el和数据对象data为undefined，还未初始化，无法访问到数据和真实的dom，一般不做操作
• created：这个时候已经可以使用到数据，也可以更改数据,在这里更改数据不会触发updated函数，在这里可以在渲染前倒数第二次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取，因为这个阶段，数据对象data已经有了，但是挂载元素$el仍为undefined
• beforeMount： 接下来开始找实例或者组件对应的模板，编译模板为虚拟dom放入到render函数中准备渲染，然后执行beforeMount钩子函数，在这个函数中虚拟dom已经创建完成，马上就要渲染,在这里也可以更改数据，不会触发updated，在这里可以在渲染前最后一次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取。在这个阶段，vue实例的挂载元素$el和数据对象data都已经初始化了。
• mounted：接下来开始render，渲染出真实dom，然后执行mounted钩子函数，此时，组件已经出现在页面中，数据、真实dom都已经处理好了,事件都已经挂载好了，可以在这里操作真实dom等事情…
• beforeUpdate：当组件或实例的数据更改之后，会立即执行beforeUpdate，然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染，一般不做什么事儿
• updated：当更新完成后，执行updated，数据已经更改完成，dom也重新render完成，可以操作更新后的虚拟dom
• beforeDestroy：当经过某种途径调用$destroy方法后，立即执行beforeDestroy，一般在这里做一些善后工作，例如清除计时器、清除非指令绑定的事件等等
• destroyed：彻底销毁，在这里做善后工作也可以

vue优点

• 轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十 kb ；
• 简单易学：国人开发，中文文档，不存在语言障碍 ，易于理解和学习；
• 双向数据绑定：保留了 angular 的特点，在数据操作方面更为简单；
• 组件化：保留了 react 的优点，实现了 html 的封装和重用，在构建单页面应用方面有着独特的优势；
• 视图，数据，结构分离：使数据的更改更为简单，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作；
• 虚拟DOM： dom 操作是非常耗费性能的， 不再使用原生的 dom 操作节点，极大解放 dom 操作，但具体操作的还是 dom 不过是换了另一种方式；
• 运行速度更快：相比较于 react 而言，同样是操作虚拟 dom ，就性能而言， vue 存在很大的优势。

mvvm是什么？和mvc有什么区别？

• MVVM：是Model-View-ViewModel的简写。即模型-视图-视图模型。模型指的是后端传递的数据。视图指的是所看到的页面。视图模型mvvm模式的核心，它是连接view和model的桥梁。在MVVM的框架下视图和模型是不能直接通信的。它们通过ViewModel来通信，ViewModel通常要实现一个observer观察者，当数据发生变化，ViewModel能够监听到数据的这种变化，然后通知到对应的视图做自动更新，而当用户操作视图，ViewModel也能监听到视图的变化，然后通知数据做改动，这实际上就实现了数据的双向绑定。
• MVC：Model-View- Controller的简写。即模型-视图-控制器。M和V指的意思和MVVM中的M和V意思一样。C即Controller指的是页面业务逻辑。MVC是单向通信。也就是View跟Model，必须通过Controller来承上启下。\
• MVC和MVVM的区别并不是VM完全取代了C，ViewModel存在目的在于抽离Controller中展示的业务逻辑，而不是替代Controller，其它视图操作业务等还是应该放在Controller中实现。

Vue 组件data为什么必须是函数？

因为JS本身的特性带来的，如果data是一个对象，那么由于对象本身属于引用类型，当我们修改其中的一个属性时，会影响到所有Vue实例的数据。如果将data作为一个函数返回一个对象，那么每一个实例的data属性都是独立的，不会相互影响了。

vuex

vuex是什么？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

vuex有哪几种属性？

• state ：基本数据(数据源存放地)
• getters ：从基本数据派生出来的数据
• mutations ：提交更改数据的方法，同步！
• actions ：像一个装饰器，包裹mutations，使之可以异步。
• modules ：模块化Vue

vuex的原理是什么？

vuex仅仅是作为vue的一个插件而存在，不像Redux,MobX等库可以应用于所有框架，vuex只能使用在vue上，很大的程度是因为其高度依赖于vue的computed依赖检测系统以及其插件系统，vuex整体思想诞生于flux，可其的实现方式完完全全的使用了vue自身的响应式设计，依赖监听、依赖收集都属于vue 对象Property set get方法的代理劫持。

router路由

vue-router是什么？

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用（SPA）变得易如反掌。

vue-router有哪几种路由导航钩子？

• 全局钩子
  • router.beforeEach 全局前置守卫 进入路由之前
  • router.beforeResolve 全局解析守卫 在beforeRouteEnter调用之后调用
  • router.afterEach 全局后置钩子 进入路由之后
• 单个路由独享；
• 组件级
  • beforeRouteEnter 进入路由前
  • beforeRouteUpdate 路由复用同一个组件时
  • beforeRouteLeave 离开当前路由时

路由模式

• hash模式：使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载，其显示的网路路径中会有 “#” 号，有一点点丑。这是最安全的模式，因为他兼容所有的浏览器和服务器。
• history模式
  美化后的hash模式，会去掉路径中的 “#”。依赖于Html5 的history，pushState API,所以要担心IE9以及一下的版本，感觉不用担心。并且还包括back、forward、go三个方法，对应浏览器的前进，后退，跳转操作。就是浏览器左上角的前进、后退等按钮进行的操作。
• abstract模式
  适用于所有JavaScript环境，例如服务器端使用Node.js。如果没有浏览器API，路由器将自动被强制进入此模式。

路由守卫

• 全局钩子： beforeEach、 afterEach
• 独享守卫（单个路由里面的钩子）： beforeEnter、 beforeLeave
• 组件内守卫：beforeRouteEnter、 beforeRouteUpdate、 beforeRouteLeave

怎么定义 vue-router 的动态路由? 怎么获取传过来的值？

在router目录下的index.js文件中，对path属性加上/:id。使用router对象的params.id。

路由的跳转方式有哪些？

• router-link标签会