前端面试题2021及答案

1. vue双向数据绑定的原理：

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

2. 什么是mvvm模式：

MVVM是将“数据模型数据双向绑定”的思想作为核心，因此在View和Model之间没有联系，通过ViewModel进行交互，而且Model和ViewModel之间的交互是双向的，因此视图的数据的变化会同时修改数据源，而数据源数据的变化也会立即反应到View上。

3. mvvm 模式和 mvm 模式的区别：

MVC： MVC是比较直观的架构模式，用户操作->View（负责接收用户的输入操作）->Controller（业务逻辑处理）->Model（数据持久化）->View（将结果反馈给View） MVVM： MVVM是将“数据模型数据双向绑定”的思想作为核心，因此在View和Model之间没有联系，通过ViewModel进行交互，而且Model和ViewModel之间的交互是双向的，因此视图的数据的变化会同时修改数据源，而数据源数据的变化也会立即反应到View上。 区别： 他们之间的区别主要是MVC中Controller演变成了MVVM中的viewModel。MVVM主要解决了MVC中大量的DOM操作带来的问题。MVVM中当和Model频繁发生变化，开发者需要主动更新到View。

4. vue的优点是什么

• 轻量级框架 :只关注视图层，是一个构建数据的视图集合
• 简单易学:国人开发，中文文档，不存在语言障碍 ，易于理解和学习
• 组件化：Vue.js 可以进行组件化开发，使代码编写量大大减少，读者更加易于理解。
• 双向数据绑定： Vue.js 最突出的优势在于可以对数据进行双向绑定。
• 响应式: 使用 Vue.js 编写出来的界面效果本身就是响应式的，这使网页在各种设备上都能显示出非常好看的效果。
• 单页面应用:相比传统的页面通过超链接实现页面的切换和跳转，Vue 使用路由不会刷新页面。
• 可重用性:可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。

5.介绍一下vue的生命周期及作用：

vue的生命周期为： beforeCreate ：在new一个vue实例后，只有一些默认的生命周期钩子和默认事件，其他的东西都还没创建。 created ：创建完成，data 和 methods都已经被初始化好了，这里可以放axjx请求获取数据了 beforeMount ：挂载之前，执行到这个钩子的时候，在内存中已经编译好了模板了，但是还没有挂载到页面中，此时，页面还是旧的 mounted ：挂载完成，执行到这个钩子的时候，就表示Vue实例已经初始化完成了。此时组件脱离了创建阶段，进入到了运行阶段。 如果我们想要通过插件操作页面上的DOM节点，最早可以在和这个阶段中进行 beforeUpdate： 更新之前，当执行这个钩子时，页面中的显示的数据还是旧的，data中的数据是更新后的， 页面还没有和最新的数据保持同步 updated ：跟新之后， 页面显示的数据和data中的数据已经保持同步了，都是最新的 beforeDestroy ：销毁之前 ，Vue实例从运行阶段进入到了销毁阶段，这个时候上所有的 data 和 methods ， 指令， 过滤器 ……都是处于可用状态，还没有真正被销毁。这里可以清除定时器 destroyed：销毁之后。这个时候上所有的 data 和 methods ， 指令， 过滤器 ……都是处于不可用状态。组件已经被销毁了 流程图： 6.讲解一些vue的methods,computed,watch的区别：

methods：用来存放方法 watch:用来存放侦听属性 computed:用于存放计算属性 相同点：methods,watch和computed都是以函数为基础的 区别：

1. watch和computed都是以Vue的依赖追踪机制为基础的，它们都试图处理这样一件事情：当某一个数据（称它为依赖数据）发生变化的时候，所有依赖这个数据的“相关”数据“自动”发生变化，也就是自动调用相关的函数去实现数据的变动。
2. methods里面是用来定义函数的，很显然，它需要手动调用才能执行。而不像watch和computed那样，“自动执行”预先定义的函数

总结：methods里面定义的函数，是需要主动调用的，而和watch和computed相关的函数，会自动调用,完成我们希望完成的作用。

7.讲解一下vue如何传值：

组件之间传值：

• 父组件向子组件传值： 通过props传值

• 子组件向夫组件传值： 子组件调用$emit()方法，父组件v-on监听

• 非父子组件之间传值： 方法1

  方法2：

路由之间的传值：

• 使用动态参数传值：

  路由配置 ： 父路由中：使用标签进行导航, 子组件：使用来接收 。但这样参数会暴露在url地址中。 父路由：也可以使用js代码的方式， 此时子组件：使用来接收 。 使用这种方式传值参数会暴露在url地址中。 适合不重要，不关乎隐藏信息的传值。

• 使用路由属性中的name来确定匹配的路由，通过params来传递参数： 父路由中：使用来传值， 子路由中：使用来接收 使用这种方式传值参数不会暴露在url地址中。 适合有私密性数据传值。

记住这里子路由接收的时候用的是 不是

8.说出几种vue常见指令

v-for：用 v-for 指令根据遍历数组来进行渲染 v-if：v-if 可以实现条件渲染 v-once：v-once 关联的实例，只会渲染一次 v-bind：用来动态的绑定一个或者多个数据（特性），可以简写为 v-model: 主要用于表单的双向数据绑定。 v-show：根据条件展示元素 v-on: 主要用来监听 dom 事件,可以简写为

9.v-if 和 v-show 有什么区别

v-if： v-if 可以实现条件渲染，当条件为真，元素将会被渲染，当条件为假，元素会被销毁。所以v-if多用于切换次数少的地方。 v-show： v-show只是根据条件展示元素，当条件为真，元素将会被隐藏，当条件为假，元素会被显示。因此v-show多用于经常切换的地方。

10.如何让CSS只在当前组件中起作用

只需要在Style标签添加Scoped属性，即。

11.vue如何获取界面元素：

页面里被查找的元素添加一个 ref=‘refname’ 这里refname可以随便起名字，在js代码中引用这个名字，然后要获取这个元素就用this.$refs.refname。

12.vue数据为何要放在data函数return返回的对象中：

之所以这样使用是因为：Object是引用数据类型，如果不用function返回，每个组件的data都是内存的同一个地址，一个数据改变了其他也改变了；Javascript只有函数构成作用域(注意理解作用域，只有函数{ }构成作用域,对象的{ }以及if(){ }都不构成作用域),data是一个函数时，每个组件实例都有自己的作用域，每个实例相互独立，不会相互影响。

13.vue的axios是什么，他是如何使用：

axios是在vue2.0中用来替换 vue-resource.js插件的一个模块，是一个请求后台的模。他是将我们常用的axjx请求 结合 promise函数封装的一个网络请求工具。

用 命令安装 axios，然后在通过 关键字将 axios导入，并添加到 Vue. js类的原型中，这样在每一个vue组件中都可以使用axios了。

14.vue中如果数据没有成为响应式数据怎么解决：

• 在vue中，我们给data中被观测的对象添加一个新的属性的时候，如果直接添加，该数据就不是响应式数据了，这时候我们就要使用 方法来将我们新添加的数据成为响应式数据，也能触发试图更新了。
• 不仅能添加响应式数据，也能解决当我们遇到据层次比较深，导致数据无法响应的问题。 比如：

15.单页面应用和多页面应用区别及优缺点

单页面：网站的所有内容都放在一个页面中，浏览器一开始要加载所有必须的 html, js, css。交互的时候由路由程序动态载入，单页面的页面跳转，仅刷新局部资源

• 优点：

  1. 目前，许多企业都选择单页面设计，因为单页面设计在阅读和层次上都简单明了，可以让访问者更容易消化。
  2. 单页面设计可以非常直观地展示企业所展示的重要内容，整个信息流非常清晰。另一点是交互非常简单，单页面的转换率高于多页面的转换率，因此可以更快地浏览和获取信息。
  3. 手机端单页面的优势更加明显，在手机上展示更简单，因为手机端的板块排版要求不如pc上那么的多，加上手机上的交互，用户体验更简单、更舒适。

• 缺点

  1. 单页面的缺点和优点一样突出，单页面的SEO优势不是很大。就网站排名而言，单页面的内在优势非常不足，关键词也会因为缺乏内容而被忽略。
  2. 另一方面，它不适合成长型企业，因为单页面的可伸缩性相对有限，信息量不大，关注度也不高。

多页面:多页面和单页面的最大区别是需要更多的页面和更多的栏目来承载不同页面的链接。

• 优点

  1. 第一点与单个页面相反，它具有更强的可伸缩性，可以添加更多的子页面，也可以添加层级，三级或者四级，加上搜索框。
  2. 早在20世纪90年代就有多页面，用户已经熟悉了多页面操作。
  3. SEO功能和更突出的优势，它比单页面承载的内容更多，包括搜索引擎和营销策略。

• 缺点

  1. 这就是工作量的问题，早期页面的设计、前端框架的构建和后端的开发，还有后期维护，工作量相当大。在选择单页面或多页面网站时，要考虑内容的容量和工作量，并做出合理的衡量。

16.vue的$nextTick的作用及应用场景：

作用：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。 应用场景：

• 在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中 在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted()钩子函数，因为该钩子函数执行时所有的DOM挂载和渲染都已完成，此时在该钩子函数中进行任何DOM操作都不会有问题 。
• 在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的DOM结构的时候，这个操作都应该放进Vue.nextTick()的回调函数中

总结：当你修改了data的值然后马上获取这个dom元素的值，是不能获取到更新后的值， 你需要使用$nextTick这个回调，让修改后的data值渲染更新到dom元素之后在获取，才能成功。

17.delete和Vue.delete删除数组的区别：

delete只是被删除的元素变成了 empty/undefined 其他的元素的键值还是不变。

splice直接删除了数组 改变了数组的键值。

Vue.delete直接删除了数组 改变了数组的键值。 eg :

18.讲解一些vue的keep-alive：

是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。 与 相似，只是一个抽象组件，它不会在DOM树中渲染(真实或者虚拟都不会)，也不在父组件链中存在，比如：你永远在 this.$parent 中找不到 keep-alive 。

19.如何理解Vue中的Render渲染函数：

VUE一般使用template来创建HTML，然后在有的时候，我们需要使用javascript来创建html，这时候我们需要使用render函数。 render函数return一个createElement组件中的子元素存储在组件实列中 $slots.default 中。 返回的是包含的信息会告诉VUE页面上需要渲染什么样的节点及其子节点。我们称这样的节点为虚拟DOM，可以简写为VNode。 参考：https://www.cnblogs.com/tugenhua0707/p/7528621.html

20.讲解一下vue的slot插槽：

插槽是Vue组件的一种机制，它允许你以一种不同于严格的父子关系的方式组合组件。插槽为你提供了一个将内容放置到新位置或使组件更通用的出口。

• 单个插槽： 当子组件模板只有一个没有属性的插槽时，父组件传入的整个内容片段将插入到插槽所在的 DOM 位置，并替换掉插槽标签本身。 最初在 标签中的任何内容都被视为备用内容。备用内容在子组件的作用域内编译，并且只有在宿主元素为空，且没有要插入的内容时才显示备用内容。

• 命名插槽： solt元素可以用一个特殊的特性name来进一步配置如何分发内容。多个插槽可以有不同的名字。 这样可以将父组件模板中 slot 位置，和子组件 slot 元素产生关联，便于插槽内容对应传递

• 作用域插槽scoped slots： 可以访问组件内部数据的可复用插槽(reusable slot) 在父级中，具有特殊特性 slot-scope 的 元素必须存在，表示它是作用域插槽的模板。slot-scope 的值将被用作一个临时变量名，此变量接收从子组件传递过来的 prop 对象。

1. 数据类型 js中数据类型分为基础数据类型和引用数据类型。 基础数据类型，就是开辟空间后，数据存储在空间中。 而引用数据类型内存中存放的是堆内存的地址，因此当引用数据类型直接赋值给别的变量，其实就是把堆内存的地址赋值给别的变量，以至于当我们修改变量obj2的属性时，obj1的属性也会相应改变。

2. 深浅拷贝 了解完数据类型，我们就会发现引用型数据类型直接赋值，就会导致多个变量指向同一个堆内存，这也就是所谓的浅拷贝，只拷贝的堆内存的引用地址，而不是真正实现浅拷贝，所以我们需要使用别的方式进行深拷贝。 深拷贝，需要我们对引用型数据类型进行遍历访问，访问到每一个属性到基础数据类型，然后进行基础数据类型的拷贝。或者，使用JSON.stringify() 和JSON.parse()将引用型数据类型进行json字符串化，将其转化成基础数据类型，进行拷贝后，在进行json解析成引用数据类型，以此来达到深拷贝的目的。 3. 跨越问题 什么是跨域？ 浏览器从一个域名的网页去请求另一个域名的资源时，域名（包括主域名 baidu ,子域名www）、端口(:8080)、协议(http https)任一不同，都是跨域。 备注： 　1、端口和协议的不同，只能通过后台来解决 　2、localhost和127.0.0.1虽然都指向本机，但也属于跨域 跨域限制： 1、无法读取非同源网页的 cookie、LocalStorage 和 IndexedDB 2、无法接触非同源网页的 DOM 3、无法向非同源地址发送 AJAX 请求（可以发送，但浏览器会拒绝接受响应） 如何解决跨域： 参考：解决跨域问题的8种方案（最新最全） 4. axios 拦截器

本文地址：http://lianchengexpo.xrbh.cn/quote/13829.html    迅博思语资讯 http://lianchengexpo.xrbh.cn/ , 查看更多