前端面试题目总结（Vue）

1、谈谈你对VUE的理解

• vue就是一个用于创建用户界面的渐进式的JavaScript框架
• vue有三个好处：
• 1、采用了组件化的模式，把HTML封装和组件好，这样可以重复使用代码，提高代码利用率。
• 2、声明式编码，不用再手写DOM，直接在页面上渲染，提高开发效率。
• 3、采用了虚拟DOM，比较前后DOM的更新变化，尽可能复用DOM，减少内存消耗，优化性能。

---

2、谈谈你对MVVM的理解

• MVVM是Model-View-ViewModel的简写，Model就是模型，对应Vue中的Data中的属性，View就是视图，对应template模板，ViewModel就是Vue实例，它有两个方向，一个是把Model中的数据挂载到ViewModel上，自动渲染到View中。一个View数据变化时，Model也会跟着更新，这样就实现了数据双向绑定的过程。
• MVVM的好处就是：
• 1、实现数据双向绑定，减少View和Model的耦合性
• 2、不用再手写DOM，让程序员更加关注数据的变化
• 3、数据频繁更新时，复用DOM，优化性能。

---

3、MVC和MVVM的区别

• MVC是Model-View-Controller的简写，Model对后端数据，View对应视图，Controller对应控制器，MVC的工作原理就是：用户在视图页面发出请求时，就会通知路由，路由就找到对应的控制器，控制器就会把后端的数据传给前端，响应用户。
• MVC和MVVM中的M和V是一样的，只不过把C中的页面逻辑视图抽离出来给了前端，变成VM，这样实现了数据双向绑定，所以说，MVVM是MVC的改进版，
• 最大的区别就是：
• 1、MVC是单向的，MVVM是双向的。
• 2、MVVM解决了MVC中产生的大量的DOM操作，提高了开发效率
• 3、在数据频繁更新的时候，采用了虚拟DOM，减少过度渲染，提高性能。

---

4、VUE的响应式原理

• 响应式：当渲染视图时使用到了一个数据，当这个数据变化时，视图就会响应是否更新，这就叫做响应式。
• VUE的响应式原理的核心是Obejct.defineProperty
• 简单来说，Vue会通过Observe对data中的所有属性进行检测，然后通过Obejct.defineProperty对data的所有属性进行一个数据劫持，当获取数据时，对数据进行一个依赖的收集，当更新数据时，就会通知对应的依赖进行视图更新。
• 如果数据类型是对象的话，就会调用this,walk()这个方法，内部就会通过DefineReactive对数据循环，定义响应式，核心就是通过Obejct.defineProperty对数据进行劫持并监听。
• 如果数据类型是数组的话，就要用到函数劫持的方法，先定义好原型方法，改变数组的方法有7种，分别是pop、push、shift、unshift、splice、sort、reverse。然后数组通过原型链调用我们自己定义的方法，实现数组更新，通知更新视图。如果数组里面有对象的话，就用Obeserve进行检测。
• Vue3.0就不用Obejct.defineProperty来实现响应式，而是通过Proxy来实现，直接检测数组，不用再用到函数劫持。

---

5、VUE数据双向绑定原理

• vue通过数据劫持结合订阅者-发布者实现的数据双向绑定原理。
• 简单来说，就是vue会利用Obsever对数据进行检测，然后利用Object.defineProerty对data中的所有属性进行一个重新定义，对数据的获取和设置进行数据劫持，获取数据时，对数据进行一个依赖收集，就叫做订阅者（Watcher），数据更新后，就会通知订阅者更新视图。最后通过Complie解析器，来解析模板命令，把属性转为数据，绑定更新函数，添加到绑定数据的订阅者，一旦数据变化，就通知订阅者，更新视图。
• 简单来说就三个步骤：
• 1、实现一个监听器（Obsever），对数据进行劫持和监听，数据变化时，通知订阅者
• 2、实现一个订阅者（Watcher）,收集通知并调用对应的函数，进行视图更新
• 3、实现一个解析器（Complie），解析命令，把属性转为数据，并初始化视图模板。

---

6、computed和watch的区别

• computed是计算属性，watch是监听属性
• 相同点：它们都是用来监听数据变化的
• 它们的不同点：
• 1、computed有缓存功能，只有它依赖的属性值发生改变的时候，它才会重新计算。而watch没有缓存功能，只要它监听的数据有变化，它就是监听执行。
• 2、computed不能监听异步操作，它依赖的属性值有异步操作的话，它是监听不出来的，也就不会计算。而watch可以监听异步操作。
• 应用场景：computed适合依赖多个属性值进行计算，watch适合监听多次变化的属性值和异步操作，例如监听计时器和路由。

---

7、vue的生命周期函数

• 一个vue实例从开始创建到销毁的过程，就叫做vue的生命周期。
• vue的生命周期的关键阶段有8个vue生命周期函数，可以分为3类：
• 第一类是创建期间的生命周期函数：
• 1、beforeCreate：这个时期，已经初始化好了vue实例，但是数据和方法还没有被初始化，还没有够被调用。
• 2、created：这个时期，vue中的数据和方法已经初始化好了，这是第一个可以调用数据和方法的函数
• 3、BeforeMoute：这个时期，vue中的数据已经预编译好了，但是还没有渲染到模板中。
• 4、Mouted：这个时期，数据已经渲染到了模板中，可以获取页面中的数据，这里Vue实例已经创建完成。
• 第二类是运行期间的生命周期函数：
• 1、beforeUpdate：这个时期，Vue中的数据改变时，视图还没有更新。
• 2、Updated：这个时期，视图已经更新完毕。
• 第三类是销毁期间的生命周期函数：
• 1、beforeDestroy：这是最后一个可以调用Vue中的数据和方法
• 2、Destroyed：Vue组件销毁，生命周期结束。

---

8、nextTick

• vue的数据更新是异步的，所以数据更新的时候，视图不会立即更新，而是会把更新的数据放到异步队列中，等到里面所有的数据更新之后，才会进行视图更新。视图更新之后，就会调用nextTick方法获取DOM内容，删除之前的异步队列，等待下一次的数据更新。
• nextTick的使用场景：当你数据更新之后想立即获取DOM数据来进行操作的时候，你就可以使用this.$nextTick。
• nextTick的原理：它会把回调函数放到一个callback队列中，判断pending是否为false，pending表示当前是否有异步任务正在执行，如果pending为false时，就调用timerFunc函数，执行callbacks队列中的函数，当timerFunc函数还没有结束时，重复调用nextTick只会触发一次执行。等到执行完毕后，就会清空之前的异步队列，等待下一次数据更新。

---

9、vue-if和vue-show的区别

• 相同点：都是显示隐藏元素的
• 不同点：
• 1、渲染问题：vue-if如果为false，它是不会渲染到页面上的。而vue-show不管是true或者fase，都会渲染到页面上。
• 2、显示隐藏问题：vue-if如果为true，它会添加元素节点，如果为false，它会删除节点。而vue-show只是display样式的切换。
• 3、性能问题：vue-if在显示隐藏上先比较耗性能，而vue-show在初始化渲染的时候比较耗性能，因为它都要渲染。
• 应用场景：vue-if适合数据不变的情况下使用，vue-show适合数据多次频繁变换的时候使用。

---

10、vue-if与vue-for为什么不建议一起使用

• 因为vue-for比vue-if的优先级要高，所以vue-for先执行，但vue-for会浪费性能，所以不建议vue-if与vue-for一起使用。
• 如果要使用的话，就在外层添加template，先进行vue-if先判断，再执行vue-for
• 如果vue-for在外面，那就用computed监听，先过滤掉那些不用的，再执行vue-for

---

11、v-model实现双向数据绑定的原理

• v-model其实就是v-bind绑定属性和v-on绑定函数的语法糖来实现双向数据绑定。
• 当输入数据时，就调用v-bind绑定属性来渲染到页面，当数据改变时，就调用函数更新属性值，达到双向数据绑定。

---

12、data为什么是一个函数而不是对象

• 因为一个组件可以有多个实例，如果data是一个对象的话，多个实例就会共用一个data对象，造成数据污染，所以data必须是一个函数，初始化的时候，它会新建一个函数，保证数据不被污染。

---

13、vue常用的组件间通信方式有哪些？

• vue组件通信主要有3种，分别是父子传值，兄弟传值，非关系传值。
• 1、父传子，父组件通过v-bind属性传值子组件，子组件通过props属性来取值。
• 2、子传父，子组件通过$emit方法来传值给父组件，父组件通过自定义事件绑定函数来取值。
• 3、兄弟传值，就用EventBus,，创建一个模板JS来作为中间对象，在created生命周期函数中利用v-on定义事件来获取数据，在methods方法中用$emit来修改数据，实现兄弟传值。
• 4、非关系传值，就要用到vuex全局状态管理来传值，上面三种都是小范围的组件之间的传值，非关系传值如果再用以上三种耦合性就很高，而且后期维持起来很麻烦，所以用到全局状态（数据）来进行传值，方便简单。

---

14、vuex

• vuex就是实现全局组件状态管理的一种机制，作用就是用来实现组件之间的数据共享。
• vuex有5个重要的属性：
• 1、state：用来存放公共数据的地方
• 2、getter：用来修饰state数据
• 3、mutation：唯一可以修改store的值
• 4、action：用来处理异步
• 5、module：模块化
• vuex的好处：
• 1、实现了组件之间的数据共享，提高开发效率
• 2、集中管理全局数据，有利于后期管理。
• 3、vuex是响应式的，数据变化后视图会跟着更新。

---

15、谈谈你对组件的理解

• 组件就是一个自定义标签，页面上的内容需要重复使用的时候就要封装组件，这样尽可能地复用组件，提高代码的利用率。
• 封装组件步骤：
• 1、引入组件
• 2、注册组件
• 3、使用自定义标签

---

16、对 SPA 单页面的理解，它的优缺点分别是什么？

• SPA就是Single-Page-Application，单页面应用，作用就是一次页面渲染后，跳转页面也不会再渲染了，这样减少渲染损耗，避免重复加载。
• 优点：用户体验快，页面跳转不用重复加载渲染。
• 缺点：第一次加载渲染慢，而且不利于SEO搜索引擎优化。

---

17、<keep-alive></keep-alive>的作用

• keep-alive就是一个缓存组件，它的作用就是避免组件内的数据重新渲染。
• 优点：组件切换跳转之后回来数据不需要重新渲染，而是保存在内存中，减少渲染加载时间，优化性能。
• 缺点：二级路由不可以缓存，需要通过路由守卫(before-routerleave)，把二级路由保存起来。

---

18、vue为什么使用key且为唯一值

• 这样有利用于Diff算法能够准确地识别节点，高效地更新虚拟DOM。

---

19、vue-router路由

• vue-routerj就是路由管理器，主要作用就是管理URL，实现URL与组件之间的对应，通过URL与组件之间的切换，实现SPA单页面应用。
• vue-router的原理：单页面应用SPA的核心思想之一，就是更新视图不需要重新更新页面，而是更新某个容器中的某个内容。对于大多数单页面应用，都推荐使用vue-router。

---

19、路由的两个模式

• 一个是hash模式（默认），一个history模式。目的是为了实现前端路由，改变视图时不用向后端发出请求。
• Hash模式就是URL中的#号，Hash虽然在URL中，但不在HTTP请求中，所以视图更新的时候对后端没有影响。
• History模式利用了ES6新添加的pushState()和replaceState()方法，它们提供了修改历史记录的功能，虽然改变了URL，但不会立即向后端发出请求。
• 区别：
• 1、Hash有#号，History没有
• 2、History怕刷新，刷新就要访问后端，URL地址错了会404。

---

20、vue-router有几种导航钩子

• 有3种
• 第一种是全局导航钩子，router.BeforeEach(to,from,next)
• 第二种是组件内部导航钩子，beforeRouterEnter，beforeRouterUpdate，beforeRouterLeave。
• 第三种是单独路由独享组件：beforeEnter(to,from,nex)

---

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

• 定义动态路由有2种，一种是params，一种是query
• 第一种params，通过/router/:参数名，传参，用$route.params.参数名，来获取传过来的值。
• 第二种是query，通过/route?参数名=123，传参，用$route.query.参数名，来获取传过来的值。

---

23、$router和$route的区别

• $routerj是路由的实例方法，可以认为是全局的路由对象，包含所有路由的对象和属性。
• $route是一个跳转的路由对象，可以认为是当前组件的路由管理，指当前被激活的路由对象，包含当前URL解析得到的数据，可以获取name，path。

---

24、Vue3.0特性

• 使用了Proxy替换Object.defineProperty，重构响应式系统
• 优点：
• 1、可以直接监听数组类型的数据变化
• 2、监听目标为对象本身，不需要像Object.defineProperty一样遍历每个属性，有一定的性能提升。
• 3、直接实现对象属性的添加、删除。

---

25、vue中的data发生变化，视图不更新如何解决？

• 1、用this.$set()方法重置属性
• 2、调用this.$foreUpdate()强制更新视图

---

26、vue指令

• v-if/show：判断是否显示隐藏
• v-for：数据循环
• v-bind：绑定属性
• v-on：绑定方法

---

27、如何获取DOM

• 获取dom节点可以用ref属性，这个属性就是来获取dom对象的，this.$refs.属性名

---

28、虚拟DOM的优缺点

• 1、虚拟DOM就是JS对象，作用就是记录新树和旧树的差异，最后把差异更新到真实DOM中。
• 优点：虚拟DOM具有批处理和高效的Diff算法，最终表现在DOM上的修改只是变更的部分，可以保证高效地渲染数据，优化性能。
• 缺点：第一次渲染大量的DOM，由于加了一层虚拟DOM，所以会比innerHTML慢点。

---

29、Diff算法

• Diff 算法的作用就是对虚拟 dom 进行对比，并返回一个 patch 对象，这个对象的作用是存储两个节点不同的地方，最后用 patch里记录的信息去局部更新真实的 dom。
  Diff算法的两个特点：
  1、只会同级比较，不跨层级
  2、Diff比较循环两边往中间收拢

---

30、Vue全家桶

• Vue全家桶就是项目中所必备的各种插件和框架。
• 1、vue-cli：脚手架，vue.js开发的标准工具。
• 2、vue-router：路由管理器，实现单页面应用。
• 3、vuex：全局管理状态，集中存储所有组件的状态。
• 4、axios：基于promise的HTTP库，可以用在浏览器和node.js中

---

31、vue修饰符

• 1、.stop：阻止事件继续传播
• 2、.prevent：阻止标签默认行为
• 3、.self：只有在event.target是当前元素自身时触发处理函数
• 4、.once：事件只能发生一次
• 5、.passive：告诉浏览器你不想阻止事件的默认行为

---

32、vue2与vue3的区别

• 一、vue2数据双向绑定核心是通过Obejct.definepropety()对数据进行劫持结合发布-订阅模式的方式来实现的。而vue3是使用了 ES6中 的Proxy对数据进行代理。
• 好处：
• 1、defineProperty只能监听某个属性，不能对全对象监听，Proxy直接绑定整个对象即可。
• 2、Proxy可以监听数组，不用再去单独的对数组做特异性操作，可以检测到数组内部数据的变化

---

33、渐进式

• 用自己想用或者能用的功能特性，不想用的部分功能可以先不用。VUE不强求你一次性接受并使用它的全部功能特性。

---

34、ajax

• Ajax，它是浏览器提供的一种方法，实现页面无刷新就可以更新数据，提高用户浏览器应用的体验。
• 应用场景：1、页面上拉加载更多的数据。2、列表数据无刷新分页。3、表单项离开焦点数据验证。4、搜索框提示文字下拉列表。
• Ajax原理：Ajax相当于浏览器发送请求与接收响应的代理人，以实现在不影响浏览器页面的情况下，局部更新页面数据，从而提高用户体验。
• Ajax的实现步骤：
• 1、创建Ajax对象：var xhr=new XMLHttpRequest();
• 2、告诉Ajax请求地址以及请求方式：xhr.open('get','http://www.baidu.com');
• 3、发送请求：xhr.send();
• 4、获取服务器端给客户端的响应数据：xhr.onload=function(){console.log(xhr.responseText);}

---

35、axios

• axios是基于promise的http库，可运行在浏览器端和node.js中，简单来说就是ajax的封装。
• 它的作用就是在保证页面不刷新的时候，向服务器发出请求，提高用户浏览器应用的体验。
• 使用步骤：
• 1、安装axios：npm install axios
• 2、在App.vue中引入axios：import axios from ‘axios’
• 3、修改为 Vue 的原型属性，Vue.prototype.$axios = axios

---

36、ajax与axios的区别

• Ajax是对原生XHR的封装，是异步的javascript和xml，ajax不是一门新技术，而是多种技术的组合，用于快速的创建动态页面，能够实现无刷新更新数据从而提高用户体验。
• Axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中；是请求资源的模块；通过promise对ajax的封装。
• axios和ajax的区别：
• axios是通过Promise实现对ajax技术的一种封装，就像jquery对ajax的封装一样。
• 简单来说就是ajax技术实现了局部数据的刷新，axios实现了对ajax的封装，
• axios有的ajax都有，ajax有的axios不一定有。
• 总结一句话就是axios是ajax，ajax不止axios。

---

37、vue的挂载过程

• 1、Vue在初始化的时候调用会调用_init方法，来定义事件和生命周期函数
• 2、调用$mount对页面进行挂载，主要通过mountComponent方法
• 3、定义updateComponent更新函数，执行render生成虚拟DOM
• 4、最后_update将虚拟DOM生成真实DOM结构，并且渲染到页面中

---

38、webpack

• Webpack 是一个前端资源加载/打包工具。
• 它的作用是将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。
• webpack打包原理：将所有依赖打包成一个bundle.js，通过代码分割成单元片段按需加载。
• webpack的基本打包配置：
• 1、初始化：yarn init -y
• 2、安装依赖包：yarn add webpack webpack-cli -D
• 3、到package.json文件中配置scripts： "scripts": { "build":"webpack --config webpack.config.js"}
• 4、配置webpack.config.js文件：module.exports={entry（入口），output（出口），mode（模式）}
• 5、打包：yarm build
• vue打包的话，可以利用vue-cli脚手架自动生成webpack配置，然后npm run build打包即可