2022前端技术面试题大纲

哈喽兄弟们 2022年开始了 你是不是也开始准备换新工作了呢？

哈哈哈哈我也一样 通过我这段时间的面试经历 我来给大家分析一下大多公司技术面试比较喜欢问的有哪些

说说什么是MVVM?

1 这 MVVM 是 Model-View-ViewModel 的缩写。MVVM 是一种设计思想。Model 层代表数据模型，也 可以在 Model 中定义数据修改和操作的业务逻辑；View 代表 UI 组件，它负责将数据模型转 化成 UI 展现出来，View 是一个同步 View 和 Model 的对象 2 在 MVVM 架构下，View 和 Model 之间并没有直接的联系，而是通过 ViewModel 进行交互， Model 和 ViewModel 之间的交互是双向的， 因此 View 数据的变化会同步到 Model 中，而 Model 数据的变化也会立即反应到 View 上。 3 对 ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而 View 和 Model 之间的 同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作 DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。 说 mvvm 和 mvc 区别？它和其它框架（jquery）的区别是什么?

1.这 mvc 和 mvvm 其实区别并不大。都是一种设计思想。主要就是 mvc 中 Controller 演变成 mvvm 中的 ViewModel。mvvm 主要解决了 mvc 中大量的 DOM 操作使页面渲染性能降低，加载速 度变慢，影响用户体验。 2. 区别：vue 数据驱动，通过数据来显示视图层而不是节点操作。 3. 场景：数据操作比较多的场景，更加便捷 对vue的理解？

vue.js 是一套构建用户界面的 渐入式框架。

特点是数据的双向绑定，组件化开发。

vue的优点是什么？

1. 低耦合。视图（View）可以独立于 Model 变化和修改，一个 ViewModel 可以绑定到不同的" View "上，当 View 变化的时候 Model 可以不变，当 Model 变化的时候 View 也可以不变。
2. 可重用性。你可以把一些视图逻辑放在一个 ViewModel 里面，让很多 View 重用这段视图逻 辑。
3. 独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注 于页面设计。
4. 可测试。界面素来是比较难于测试的，而现在测试可以针对 ViewModel 来写 用于构建 vue 的 vue-cli 工程都到了哪些技术，其作用分别是什么?

 vue.js: vue-cli 工程的核心，主要特点是 双向数据绑定 和 组件系统  vue-router: vue 官方推荐使用的路由框架  vuex: 专为 vue.js 应用项目开发的状态管理器，主要用于维护 vue 组件间共用的一些变量和 方法  axios（fetch、ajax）:用于发起 GET、 POST 等 http 请求，基于 Promise 设计  webpack: 模块加载和 vue-cli 工程打包器  eslint 代码规范工具 vue 常用的修饰符?

 v-model 修饰符： .lazy：输入框改变，这个数据就会改变，这个修饰符会在光标离开 input 框才会更新数据 .number：营先输入数字就会限制输入只能是数字，先字符串就相当于没有加 number，注 意，不是输入框不能输入字符串，是这个数据是数字 .trim：输入框过滤首尾的空格  事件修饰符： .stop：阻止事件冒泡，相当于调用了 event.stopPropagation()方法 .prevent：阻止默认行为，相当于调用了event.preventDefault()方法，比如表单的提交、a 标签的跳转就是默认事件 .self：只有元素本身触发时才触发方法，就是只有点击元素本身才会触发。比如一个 div里面有个按钮，div 和按钮都有事件，我们点击按钮，div 绑定的方法也会触发，如果div 的 click 加上 self，只有点击到 div 的时候才会触发，变相的算是阻止冒泡 .once：事件只能用一次，无论点击几次，执行一次之后都不会再执行 .capture：事件的完整机制是捕获-目标-冒泡，事件触发是目标往外冒泡 .sync：对 prop 进行双向绑定 .keyCode：监听按键的指令，具体可以查看 vue 的键码对应表 vue的数据双向绑定原理是什么？

通过Object.defineProperty对data属性递归遍历，给每一个属性getter,setter

实现compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面，并绑定更新函数。每一个使用了data数据的节点，都是一个订阅者watcher,最终利用watcher撑起Observe和compile之间的通信桥梁，达到数据变化——>视图更新，视图交互变化input——>数据model变更的双向绑定。

Vue的双向数据绑定原理是什么？ vue.js是采用数据劫持结合发布者 - 订阅者模式的方式， 通过Object.defineProperty（）来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者， 触发相应的监听回调

vue的钩子函数有哪些？

beforecreate created beforeMount mounted beforeupdate updated beforeDestroy Destroyed component keep-alive

vue 事件中如何使用 event 对象?

1. 获取事件对象，方法参数传递 $event 。注意在事件中要使用$ 符号 2.默认情况下，没有给事件函数传参默认参数event是原生事件对象. v-show和v-if指令的共同点和不同点? v-show指令是通过修改元素的displayCSS属性让其显示或者隐藏。 v-if指令是直接销毁和重建DOM达到让元素显示和隐藏的效果。

vue 中子组件调用父组件的方法?  直接在子组件中通过 this.parent.event 来调用父组件的方法。  在子组件里用emit()向父组件触发一个事件，父组件监听这个事件就行了。  父组件把方法传入子组件中，在子组件里直接调用这个方法。 nextTick 的使用?  this.nextTick()将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它， 然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到 调用它的实例上  this.$nextTick()在页面交互，尤其是从后台获取数据后重新生成 DOM 对象之后的操作有很 大的优势 vue中key值的作用？

key 值：用于 管理可复用的元素。因为 Vue 会尽可能高效地渲染元素，通常会复用已有元 素而不是从头开始渲染。这么做使 Vue 变得非常快，但是这样也不总是符合实际需求 v-for与 v-if的优先级？

v-for 和 v-if 同时使用，有一个先后运行的优先级，v-for 比 v-if 优先级更高，这就说明在 v-for 每次的循环赋值中每一次调用 v-if 的判断，所以不推荐 v-if 和 v-for 在同一个标签中 同时使用。 vue的构造是什么？

每个vue.js应用都是通过实例化构造函数Vue()来实现的。

构造函数vue接受多个配置选项，其中el是将Vue实例挂载到DOM中，data是vue实例的数据，methods是方法，computed是计算属性，watch是侦听器，还有生命周期等。

说说对vue-router的理解？

vue-router 是vue的路由，它的作用是可以根据不同的路径去访问不同的组件，而且可以实现不刷新页面，路由之间传递数据。

对组件化的理解？

组件化就是可以把一个页面上每个部分都抽离出来封装成组件，组件是.vue后缀的文件

谈谈你对vue中hash和history的理解

hash模式：在浏览器中带#号，#及后面的字符称为hash,通过window，location,hash读取。

特点：hash虽然在url中，但不被包括在Http中，对后端没影响，因而改变hash，不会刷新页面

history模式：history采用HTML5的新特性，且提供两个新方法：pushstate（）、replacestate（）可以对浏览器历史记录栈进行修改，以及popstate事件的监听状态变更。

在 vue 中使用插件的步骤? 提采用 ES6 的 import ... from ...语法或 CommonJS 的 require()方法引入插件使用全局方 法 Vue.use( plugin )使用插件,可以传入一个选项对象 Vue.use(MyPlugin, { someOption: true })

vue 中父组件触发子组件的函数，子组件触发父组件的函数? 父组件中获取子组件函数：$children、$refs 子组件中获取父组件函数：$parent

第一次页面加载会触发哪几个钩子? beforeCreate， created， beforeMount， mounted

$route 和$router 的区别?  $router 是 VueRouter 的实例，在 script 标签中想要导航到不同的 URL,使用$router.push 方法。返回上一个历史 history 用router.to(-1)  route 当前 route 跳转对象。里面可以获取当前路由的 name,path,query,parmas 等。 vue传递数据

vue父组件通过props属性向子组件传递数据 子组件通过$emit方法触发自定义事件像父组件传递事件

对于全局状态数据可以通过Vuex管理 Vue如何获取dom? 通过ref属性，获取原生DOM元素 或 组件实例. ref="domName" 用法：this.$refs.domName vue-loader是什么？使用它的用途有哪些？ 答：vue文件的一个加载器，将template/js/style转换成js模块。 用途：js可以写es6、style样式可以scss或less、template可以加jade等 v-for中为什么建议添加Key? 答：需要使用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点。 作用主要是为了高效的更新虚拟DOM。

分别简述computed和watch的使用场景 答：computed: 　　　　当一个属性受多个属性影响的时候就需要用到computed 　　　　最典型的例子： 购物车商品结算的时候 watch: 　　　　当一条数据影响多条数据的时候就需要用watch 　　　　例子：搜索数据 vue的两个核心点 答：数据驱动、组件系统 数据驱动：ViewModel，保证数据和视图的一致性。 组件系统：应用类UI可以看作全部是由组件树构成的。 vue和jQuery的区别 答：jQuery是使用选择器（$）选取DOM对象，对其进行赋值、取值、事件绑定等操作，其实和原生的HTML的区别只在于可以 更方便的选取和操作DOM对象，而数据和界面是在一起的。比如需要获取label标签的内容：$("lable").val();,它还是依赖 DOM元素的值。

Vue则是通过Vue对象将数据和View完全分离开来了。对数据进行操作不再需要引用相应的DOM对象，可以说数据和View是分离的， 他们通过Vue对象这个vm实现相互的绑定。这就是传说中的MVVM。 简述每个周期具体适合哪些场景 答： beforeCreate：在new一个vue实例后，只有一些默认的生命周期钩子和默认事件，其他的东西都还没创建。在beforeCreate生命周期执行的时候，data和methods中的数据都还没有初始化。 不能在这个阶段使用data中的数据和methods中的方法 create：data 和 methods都已经被初始化好了，如果要调用 methods 中的方法，或者操作 data 中的数据，最早可以在这个阶段中操作 beforeMount：执行到这个钩子的时候，在内存中已经编译好了模板了，但是还没有挂载到页面中，此时，页面还是旧的 mounted：执行到这个钩子的时候，就表示Vue实例已经初始化完成了。此时组件脱离了创建阶段，进入到了运行阶段。 如果我们想要通过插件操作页面上的DOM节点，最早可以在和这个阶段中进行 beforeUpdate： 当执行这个钩子时，页面中的显示的数据还是旧的，data中的数据是更新后的， 页面还没有和最新的数据保持同步 updated：页面显示的数据和data中的数据已经保持同步了，都是最新的 beforeDestory：Vue实例从运行阶段进入到了销毁阶段，这个时候上所有的 data 和 methods ， 指令， 过滤器 ……都是处于可用状态。还没有真正被销毁 destroyed： 这个时候上所有的 data 和 methods ， 指令， 过滤器 ……都是处于不可用状态。组件已经被销毁了。 怎么定义 vue-router 的动态路由? 怎么获取传过来的值？ 答：在router目录下的index.js文件中，对path属性加上/:id。 使用router对象的params.id。 计算属性的缓存和方法调用的区别?  我们可以将同一函数定义为一个方法或是一个计算属性。两种方式的最终结果确实是完全相 同的。不同的是计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会 重新求值。相比之下，每当触发重新渲染时，调用方法将总会再次执行函数  使用计算属性还是 methods 取决于是否需要缓存，当遍历大数组和做大量计算时，应当使用 计算属性，除非你不希望得到缓存。  计算属性是根据依赖自动执行的，methods 需要事件调用

vuex 是什么？怎么使用？哪种功能场景使用它?  只用来读取的状态集中放在 store 中； 改变状态的方式是提交 mutations，这是个同步的事 物；异步逻辑应该封装在 action 中。  在 main.js 引入 store，注入。新建了一个目录 store，… export  场景有：单页应用中，组件之间的状态、音乐播放、登录状态、加入购物车 vuex 有哪几种属性?  分别是 State、 Getter、Mutation 、Action、 Module  state：Vuex 使用单一状态树,即每个应用将仅仅包含一个 store 实例，但单一状态树和模 块化并不冲突。存放的数据状态，不可以直接修改里面的数据

 mutations：mutations 定义的方法动态修改 Vuex 的 store 中的状态或数据

 getters：类似 vue 的计算属性，主要用来过滤一些数据

 action：actions 可以理解为通过将 mutations 里面处里数据的方法变成可异步的处理数据 的方法，简单的说就是异步操作数据。view 层通过 store.dispath 来分发 action

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