2020 前端VUE面试(杭州)

前两天一个朋友来杭州找工作了,我整理了下他的面试题

先说下他的情况:

  19年毕业,差不多一年工作经验,前端。刚开始找了一周,面试寥寥,我让他改成两年工作经验,实习一年工作一年。
不是想骗什么,主要是现在疫情原因,工作不好找,他写了一年工作经验,都没人理他。这个东西也不是简历修改年限公
司就能要他,这还是要看能力,只是让机会更多些。我个人感觉没有什么问题,勿喷。果然改了简历后面试机会就多了起
来,下 面是他面试时面试官问的一些问题,我在这里整理下,希望能帮到别人。

@ toc

1. Vue组件中的data为什么必须是一个函数

总结：
避免组件之间数据造成污染
延伸: 什么叫组件
组件是一个可复用的vue的实例,所以其他调用这个组件的,可能会调取这个data,所以把data封装成一个函数,我们在实例化组件的时候只是调用了这个函数生成的数据副本，这就避免了数据污染。

2.箭头函数中this和普通函数中this的区别

普通:

一般方法中，this代指全局对象 window
作为对象方法调用，this代指当前对象
作为构造函数调用，this 指代new 出的对象
调用方法的apply和call方法，可以改变函数的调用对象/作用域（this）用法：
箭头函数
箭头函数的this总是指向词法作用域，也就是外层调用者obj
由于this在箭头函数中已经按照词法作用域绑定了，所以，用call()或者apply()调用箭头函数时，无法对this进行绑定，即传入的第一个参数被忽略

3.计算属性和监听的区别（使用场景）

1、区别
watch中的函数是不需要调用的
watch 属性监听监听属性的变化
computed内部的函数调用的时候不需要加()
computed:计算属性通过属性计算而得来的属性
computed 属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。
computed中的函数必须用return返回最终的结果
当computed中的函数所依赖的属性如果没有发生改变的时候，那么调用当前函数的时候结果会从缓存中读取

2、使用场景
computed 　　　　
　　当一个属性受多个属性影响的时候就需要用到computed
　　最典型的例子：购物车商品结算的时候
watch
　　当一条数据影响多条数据的时候就需要用watch搜索数据

4.vue生命周期

beforeCreate （新对象诞生）
Vue对象用新方法实例化。它创建一个Vue类的对象来处理DOM元素。对象的这个生命阶段可以通过beforeCreated 挂钩来访问。我们可以在这个钩子中插入我们的代码，在对象初始化之前执行。

Created （具有默认特性的对象）
在这个生命阶段，对象及其事件完全初始化。 created 是访问这个阶段并编写代码的钩子。

beforeMount （对象在DOM中适合形状）
这个钩子被调用 beforeMounted。在这个阶段，它检查是否有任何模板可用于要在DOM中呈现的对象。如果没有找到模板，那么它将所定义元素的外部HTML视为模板。

Mounted （DOM已准备就绪并放置在页面内）
一旦模板准备就绪。它将数据放入模板并创建可呈现元素。用这个新的数据填充元素替换DOM元素。这一切都发生在mounted钩子上。

beforeUpdate （更改已完成，但尚未准备好更新DOM）
在外部事件/用户输入beforeUpdate发生更改时，此钩子即在反映原始DOM元素的更改之前被触发。

Updated （在DOM中呈现的更改）
通过实际更新DOM对象并触发updated，屏幕上的变化得到呈现。
beforeDestroy （对象准备销毁）
就在Vue对象被破坏并从内存中释放之前， deforeDestroy 钩子被触发，并允许我们在其中处理我们的自定义代码。

Destroyed （对象停止并从内存中删除）
该 destroyed 钩子被成功运行销毁对象上调用。

5.http状态码

2XX: 成功
3XX 重定向
4XX：客户端错误
5XX 服务端错误

6.两个页面之间的跳转

1.router-lin to (vue 方法)
2.事件触发 this. $r o u t e r . p u s h (" / "); 3 . t h i s .$ router.go(1); 主要用于返回上个页面

7.路由传参

1.直接调用 $r o u t e r . p u s h 实现携带参数的跳转 : t h i s .$ router.push({
path: /describe/${id},
})
这种路由需要配置 path: ‘/describe/:id’,
取参: this.$route.params.id

2.通过路由属性中的name来确定匹配的路由，通过params来传递参数。
this. $router.push({ name: 'Describe', params: { id: id } }) 这种好处在于传多个数据,传对象什么的,不配置路由url上就不显示,比较整洁取参:this.$ route.params 取id时: this. $r o u t e . p a r a m s . i d 3 . 使用 p a t h 来匹配路由，然后通过 q u e r y 来传递参数, 这种情况下 q u e r y 传递的参数会显示在 u r l 后面 ? i d = ？ t h i s .$ router.push({
path: ‘/describe’,
query: {
id: id
}
})
取参:this.$route.query.id
注: 取参用的是route 不是router

8.在created和mounted中应该写什么代码

Created:常用于简单的ajax请求，页面的初始化
Mounted:常用于获取VNode信息和操作，ajax请求
我个人理解: mounted 主要写需要操作dom的请求, created写不需要操作dom的请求

9.闭包

1、概念
闭包函数：声明在一个函数中的函数，叫做闭包函数。
闭包：内部函数总是可以访问其所在的外部函数中声明的参数和变量，即使在其外部函数被返回（寿命终结）了之后。
2、特点
让外部访问函数内部变量成为可能；
局部变量会常驻在内存中；
可以避免使用全局变量，防止全局变量污染；
会造成内存泄漏（有一块内存空间被长期占用，而不被释放）

10.foreach和map区别

map:遍历数组中每个元素并返回一个新数组，不改变原数组,
forEach：遍历数组中每个元素但是没有返回值
注: 这个写一遍就知道了,map需要return forEach不需要,forEach 可以直接对数组进行一些操作运算什么的,会改变原来数组

11.数组中some的方法

some 判断作用, 有一个符合条件就返回true,否则返回false
let a = [1,2,3,4,5];
// let b = a.some(item => item > 2); true 和下面是一样的
let b = a.some((item) => {
console.log(item);
return item > 4;
})
console.log(b) // true*/

12.组件之间的通信

https://www.cnblogs.com/barryzhang/p/10566515.html
1.props和 $e m i t 父组件向子组件传递数据是通过 p r o p 传递的，子组件传递数据给父组件是通过$ emit触发事件来做到的.
2. $a t t r s 和$ listeners
Vue 2.4开始提供了 $a t t r s 和$ listeners来解决这个问题，能够让组件A之间传递消息给组件C。
3.中央事件总线
新建一个Vue事件bus对象，然后通过bus. $e m i t 触发事件， b u s .$ on监听触发的事件。
4.provide和inject
父组件中通过provider来提供变量，然后在子组件中通过inject来注入变量。不论子组件有多深，只要调用了inject那么就可以注入provider中的数据。而不是局限于只能从当前父组件的prop属性来获取数据，只要在父组件的生命周期内，子组件都可以调用。
5.v-model
父组件通过v-model传递值给子组件时，会自动传递一个value的prop属性，在子组件中通过this.$emit(‘input’,val)自动修改v-model绑定的值
注: 这个我也没用过
6. $p a r e n t 和$ children
在组件内部可以直接通过子组件 $p a r e n t 对父组件进行操作，父组件通过$ children对子组件进行操作.
注: 没用过
7. vuex处理组件之间的数据交互

13.vue3.0和vue2.0的区别

1.默认进行懒观察（lazy observation）。
在 2.x 版本里，不管数据多大，都会在一开始就为其创建观察者。当数据很大时，这可能会在页面载入时造成明显的性能压力。3.x 版本，只会对「被用于渲染初始可见部分的数据」创建观察者，而且 3.x 的观察者更高效。
2.更精准的变更通知。这两个我感觉能回答上就行了
比例来说：2.x 版本中，使用 Vue.set 来给对象新增一个属性时，这个对象的所有 watcher 都会重新运行；3.x 版本中，只有依赖那个属性的 watcher 才会重新运行。
9. 3.0 新加入了 TypeScript 以及 PWA 的支持
4.部分命令发生了变化：
下载安装 npm install -g vue@cli
删除了vue list
创建项目 vue create
启动项目 npm run serve
5.默认项目目录结构也发生了变化：
移除了配置文件目录，config 和 build 文件夹
移除了 static 文件夹，新增 public 文件夹，并且 index.html 移动到 public 中
在 src 文件夹中新增了 views 文件夹，用于分类视图组件和公共组件

14.https和http区别

HTTP是一种用于分布式、协作式和超媒体信息系统的应用层协议
https是在http协议基础上加入加密处理和认证机制以及完整性保护，即http+加密+认证+完整性保护=https
注: 我认为 https 就是比http 安全,我之前做项目后端有用到过,需要证书认证什么的

15.菜单栏

这个我不太理解

16.ajax（方法）

主要用来实现客户端与服务器端的异步通信效果，实现页面的局部刷新，从而创建快速动态网页的技术。

创建XMLHttpRequest对象,也就是创建一个异步调用对象
创建一个新的HTTP请求,并指定其请求的方法、URL及验证信息
设置响应 HTTP 请求状态变化的函数
发送 HTTP 请求
获取异步调用返回的数据
使用 JavaScript 和 DOM 实现局部刷新
优点：可以使得页面不重载全部内容的情况下加载局部内容，降低数据传输量，避免用户不断刷新或者跳转页面，提高用户体验
缺点：对搜索引擎不友好，要实现ajax下的前进后退功能成本较大；跨域问题限制

17.vue-cli

俗称 vue-cli 为脚手架，是一套大众化的前端自动化解决方案，他的核心是 webpack ，框架是vue，还有相关辅助插件组成。
配置一套理想的方案也是相当耗费时间，所以 vue 就提供了一套面相大众的内解决方案——vue-cli，他的输入输出规则，文件的打包路径，模块的命名基本上符合大众前端开发者的习容惯，不过实际开发中需要一定的调整。
注: 总的来说就是创建项目用的

18.怎么打包项目？（项目怎么看)

项目打包
终端运行命令 npm run build
打包的一些配置可以配置,一般在vue.config.js中做配置,比如压缩图片,打包地址什么的
外网：线上地址(需要配置)
内网：本地地址
也就是看你是开发环境还是生产环境
开发环境一般都是本地地址,生产环境就是线上的地址,看后端的配置

19.Link

link标签,当在文档中声明使用外接资源(比如CSS)时使用此标签
href – 指定需要加载的资源(CSS文件)的地址URI
media – 媒体类型
rel – 指定链接类型,设定是指对象和链接目标的关系,可选值, link还可以用Shortcut Icon等
rev – 指定链接类型
type – 指定所连接文档的MIME类型，css的MIME是type/css,一般使用type=“text/css”

20.项目怎么搭建起来的？

搭建流程 :
https://blog.csdn.net/weixin_46096120/article/details/105295148
使用vue cli 搭建项目框架,
一般就是搭建的配置,vue-router,vuex 严格模式什么的
然后进来先写下公共组件,封装axios,接口写好的话,封装接口什么的

21.less定义一个通用的样式怎么定义

@color:#4D926F;
#header{
color:@color;
}

22.cookie，sessionStorage，localStorage区别

1.存储大小
cookie数据大小不能超过4k。
sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
2.有效时间
localStorage：存储持久数据，浏览器关闭后数据不丢失除非主动删除数据。
sessionStorage：数据在当前浏览器窗口关闭后自动删除。
cookie：设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
3. 数据与服务器之间的交互方式
cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

注:

这里面有些我自己的理解,可能错误,或者不到位,哪位老哥发现了,请告诉我,我改正,谢谢!