中软国际信息技术有限公司（套题）
| 选择题 | 填空题 | 问答题 | 编程题 | 试题难度 |
|---|---|---|---|---|
| 0 | 0 | 18 | 0 | 比较难 |
现场录音
播放面试现场录音
老师点评
这次面试的同学表现优秀，主要体现以下几点：
1.基本功非常扎实，对知识理解比较透彻和准确
2.在表述方面比较清晰，思路清晰，用词得当，能够让对方听得懂，也能够答到对方的心坎上。
3.在气势上展现自己自信的一面，声音洪亮有利，回答果断，斩钉截铁，虽然有犹豫的地方。
4.反应很灵敏，有些题目面试官还没有问完，就立马将答案给说出来了，给对方来了一个措手不及【点赞】
5.对于回答不上来的问题，也尝试思考，说出自己的解决方案，这个非常好，留给了面试官很好的印象。
使用的技巧
1.将不会的问题，始终拉回到自己比较熟悉的领域，比如说加载时闪动，拉回到自己的项目，回答说：“为了避免这种情况，第一次渲染我们采用后台模板做的”
2.案例2：谈到打包时，说自己了解过，因为我们的项目就引用了一个vue.js文件，我们的后台项目是有用这些，但这方面是其它同事负责的，然后就说了自己的一些看法，比如是使用淘宝镜像安装之类。 这样表达式比较巧妙的，一方面表明自己没有在实际开发中用过，另一方面又表明自己也了解过。这样一来无形之中降低了面试官提更高深的问题，而面试官又觉得你很不错。这个实在是高。
不足之处
1.对于一些知识不应该犯错，比对象的合并，SEO，axios这方面的知识
问答题
1、vue.js指令有哪些？常用的指令有
1. v-if v-show；v-if和v-show都是用来控制元素的显示和隐藏，区别是v-if是以挂载元素来做到的，v-show是以display样式控制的。在渲染不是很频繁或是考虑代码安全时，考虑用v-if；在进行频繁渲染的情况使用v-show减少渲染的开销。
2.v-on绑定事件
3.v-model 双向绑定
4.v-bind 单向绑定
5.v-for 用于迭代遍历数组，对象，遍历数组有两个参数，第一个是item数组中的元素，第二个是index数组的下标（索引），遍历对象有三个参数，第一个参数是value，第二个是key，第三个是index。
6.v-html 以html的方式渲染，类似原生的innerHTML
7.v-text 以文本的方式渲染，类似原生的innerText
8.v-pre 跳过编译，直接显示mustache标签的内容，这个可以用于渲染vue.js代码的时候很有用
9.v-cloak 隐藏未编译的mustache标签。用于防止页面加载时mustache标签出现闪烁的现象。通常结合样式display:none一起使用。 使用important保证隐藏的效果。
按照上面的思路回答这个问题，保证你牛逼！面试官满意！
2、在v-for中如何判断基数行和偶数行这个问题比较简单，考察对v-for的语法和基本算法 答：使用v-for的第二个参数index值%2 ，如果为0表示偶数行，为1表示基数行 代码：
{{index%2==0?"偶数行":"基数行"}}
3、nextTicket()用来干什么的？这个主要考察是否有做过项目，这个方法通常在做项目的时候回遇到
答：nextTicket用于对数据做了变更后，等待dom更新完成后来调用的函数，调用的函数放到nextTicket的参数上。这个在项目中是有用到的，获取接口数据后，等待视图渲染后要进行dom操作（例如文本框聚焦）就需要用到这个方法了。
4、谈一谈你对vue.js生命周期的理解考察对vue.js框架时候熟悉，懂得其中的运行原理。
答：从创建一个实例到销毁的过程中一共有8个主要的步骤 创建前、创建后、挂载前、挂载后、更新前、更新后、销毁前、销毁后 可以简单的记忆： 创建、挂载、更新、销毁 。
讲完上面之后，简要的说一下每个阶段干得活是什么
beforeCreate(创建前)：做一些初始化操作，初始化生命周期、事件、监听器、渲染函数、挂载的元素等，这个阶段data对象为null，数据还没有实例化。在项目上一般不在这个阶段做任何操作。
created(创建后)：data对象已经实例化了，这个阶段通常会调用接口来初始化数据。
beforeMount:准备好需要渲染的节点，但还没有挂载 mounted ：节点已经渲染完成，可以进行dom操作了。 beforeUpdate ：监测到数据有变化，准备需要更新的信息
updated：渲染更新后的数据
重点讲created和mounted其它不重要的可以不用描述。
5、组件之间是怎么传值？或是问组件之间是怎么通信的？两个问法是同一个意思，只要听到组件之间就应该知道什么意思了。
答：组件之间的传值方式是这样的，我先说父组件向子组件的方式吧，就是父传子，在子组件定义props对象，可以是数组或是数组对象，在父组件使用v-bind传递，这是一种方式；另一种方式就是使用插槽，在子组件定义插槽，在父组件通过slot属性指定插槽的名称来传递；
子传父可以使用自定义事件，在子组件中使用$emit自定义事件，第一个参数是事件名称（自定义），第二个参数就是事件传递的值，在父组件使用v-bind绑定自定义事件获取数据。
组件之间的传值，简单的数据可以使用路由参数传递数据，如果数据比较多的话，那就使用状态管理的插件vuex来实现。
6、在一个用户注册的表单上，不小心刷新了页面如何保留表单的数据了？这道题本身是不难的，只是问法不同，是采用场景式的方式提问。也是开放性的问题，这种题目最能考验你是不是一个爱思考问题，能解决问题的人。
答： 我可能会这样做，在输入表单数据时，将表单的数据临时存储到sessionStoreage或是cookie，但刷新后重新获取数据进行渲染。
除了这种方法外，在用户刷新页面的时候，提醒用户刷新后数据会丢失对话框，提供确定和取消的对话框给到用户进行选择。
以下的代码供你学习，不用在面试上回答，
防止卸载页面的代码。
window.onbeforeunload=function(){
var conf=confirm("确定要刷新吗？刷新后填写的数据会丢失。");
if(!conf){
return false;
}
};
7、对象拷贝你是怎么做的？或 如何进行对象拷贝？等关于对象拷贝的问题这个问题涉及的知识面还是非常广，要求对js的基本数据类型和引用类型有深刻的认知
答：js中分基本数据类型和引用数据类型，基本数据类型有数字、boolean，引用类型有数组、日期、方法、字符串。基本数据类型在使用=赋值时时拷贝副本，引用是引用地址，指向同一个对象，不过字符串比较特殊，他是常量，拷贝的也是副本。
对象拷贝分浅拷贝和深度拷贝。 浅拷贝可以使用Object.assign()方法来实现，这个是用来合并对象的，将第一个参数定义空对象{}，第二个对象就是要拷贝的对象，返回的结果就是浅拷贝的结果。
深度拷贝：如果对象是纯json格式，使用JSON.stringify()将对象转为字符串，在使用JSON.parse()方法创建对象，这种方式用的比较多。 对于比较复杂的对象，就需要使用递归，遍历对象的所有属性值，进行一一拷贝。这个过程还是挺复杂的，对于引用类型都需要重新构建对象，例如Date、RegExp、Function等这个就不细说了。
能够答到这些你已经很优秀了，面试官也是佩服你五体投地，因为你的回答是面面俱到的。
8、css样式中position有哪些定位？或定位方式有哪些？这个问题是问到css样式必问的问题
答：position定位有固定定位（fixed）、绝对定位（absolute）、相对定位（relative）。
固定定位相对窗体定位，是脱离了文档流；
绝对定位相对复杂一点，先以最近父及元素有定位的来定位，如果没有父及元素都没有，就以窗体定位；
相对定位，相对它原始的文档流定位。
9、this关键字的理解this在项目中使用十分频繁，所以这个问题是js中必问的问题。
答：在全局上下文this指向的是window对象。在方法中，指向的是调用该方法的对象，不过也可以通过apply或call方法来改变this的指向。apply和call两个方法作用都是一样的，调用方法并且可以改变this的指向，只是语法有些不同而已，apply和call的第一个参数都是this对象的指向，call是以后继参数，apply是数组的方式向函数参数传值。
在es5中也有bind方法，this指向的永远是第一个参数对象。
在箭头函数中，与箭头函数所在的封闭词法的上下文的this保持一致。例如：在vue.js中，方法中的this指向vue实例，在ajax的回调函数中如果使用箭头函数，this指向的是vue实例，否则不是。
10、less有了解过吗？既然是问你了解过没有，那么只要说清楚less是什么就好了。
答：less是让css样式有动态性，增强了它的编程性，能够定义变量、函数、运算符和继承这样的特性。
这种面试题，不要求你能够回答多深入，你只需要了解即可，回答它是什么即可。
11、你阅读过JQuery的源码吗？这个一个比较难的问题，要考察对jQuery的掌握程度，往往问这个问题能够难倒一大批人。
答：当然有阅读过，JQuery的常用方法都是通过原型链prototype扩展出来的，对元素操作的方法都是写在这里的。不仅如此，它自己写了一个extend方法，其实就是对象的深度克隆，将克隆的后的对象添加到jquery对象上，如事件绑定的方法都是通过extend来扩展出来的。
特别欣赏JQuery的美妙的编写方式，代码严谨，精炼，功能分类清晰实用，重用性高。
用最后一句话来赞美jQuery。如果问道JQuery有什么缺点，你可以怎么回答：
JQuery其实就是一个js库，虽然比原生的js操作dom要简单，但是面对繁琐的dom操作还是非常麻烦，所以现在出现了vue.js、angular.js数据驱动型的框架，这也说明了vue.js为什么这么受欢迎的原因了。
12、Bootstrap有哪些布局容器这个是问bootstrap框架是最爱问的问题
答：布局容器有container和container-fluid 。container左右包括外边距，container-fluid是100%的平铺，可进行扁平化设计。
bootstrap的布局最经典是栅格系统，它的原理和表格类似，行和列，行包含列，内容放到列里。一行划分12等份，其本质是通过浮动元素，设置width的百分比实现的。为了避免增加内边距或边框影响布局，在bootstrap框架采用的是IE盒子模型计算盒子的大小的。
13、前端SEO优化是怎么做的？这个问题看起来好像与前端没有关系，很多问道这个问题是绝对的蒙蔽。
答：seo就是搜索引擎优化，未能够让搜索引擎的爬虫程序理解我们的代码的，我们就需要将代码语义化，尽量使用语义化标签布局页面，比如标题标题，一个页面只能包含一个h1标签，nav(导航),header（头部）,footer（页脚）,main（主容器）等。除了语义化标签外，在<head>里经常设置以下信息
1.keywords 关键词的设定
2.description网页描述信息
3.title 网页的标题信息
4.author 作者信息
除了这些在我们的项目里不使用firame布局，对img标签加上alt属性。还有很多，以上是我在做前端比较常用到的。
14、如何将一个图片和周围的文字垂直居中对齐？凡是问到css方面的知识，这个知识点基本上必问的
答：方法一、将父元素设置
1）display: table-cell;
2）vertical-align: middle;
方法二、
父元素设置 display:flex;子元素设置margin：auto；
15、你们项目有做分包处理吗？是怎么做的了？这个问题主要考察你是否真正的做过大项目。
答：随着我们的功能模块不断地增多，打包的文件也非常大了，为了解决这个问题，我们采用第三插件syntax-dynamic-import ，根据路由拆分多个文件，按需加载来解决这个问题的。
知识补充(不作为面试解答的内容)
1.先安装插件
cnpm install babel-plugin-syntax-dynamic-import --save
2.配置.babelrc文件
{
"plugins": ["syntax-dynamic-import"]
}
3.使用箭头函数的方式引入组件
const Interview_EditQuestion = () => import('@/online/Interview/EditQuestion')
16、脚手架有使用过吗？这个问题看似很难其实是比较简单的。
答：脚手架的主要作用就是降低项目的复杂配置，用更多时间来关注项目的业务逻辑。
使用 npm install -g vue-cli 安装脚手架
使用 vue init webpack my-project 初始化项目，按照向导做好配置就可以了。
为了快速安装，会先安装淘宝镜像，通过淘宝镜像来安装。
17、css样式的优先级顺序是怎样的？问道css样式这个问题是必问的
答：css样式的优先级是根据权重值来应用的，权重值越高，优先级越高。!important 是1000，id 是100，class 是10，标签是1，复合选择器将他们的值累加起来。权重值相同情况，后面出现的会覆盖前面的。
从顺序上来讲，行内样式大于内部样式和外部样式。
内部样式和外部样式按照顺序来应用，相同的样式属性，后面出现的会覆盖前面的。
18、性能优化你是怎么做的？这个问题对于想拿10k以上的同学来讲必会
答：性能优化主要是围绕执行速度来做的。通常的做法是这样的
1.使用图片精灵，将多个图标放在一个图片上，然后通过背景图片定位来显示图标
2.有些图标使用使用阿里字体的，使用他们自带的云加速器下载字体文件
3.在首次加载的时候，将所需要的数据都放在一个接口上返回，减少请求的数量，经过测试这个效果还是挺明显的。
4.在编码上，我们通过会将this对象存储到临时变量，减少this查找的时间。
5.对于频繁使用的数据，会将数据缓存起来，减少多次请求接口。
6.使用压缩工具，对html、css、js文件，进行合并压缩处理，减少文件的体积。
7，对于数据较大的加载，通常采用分页加载或是按需加载或是延迟加载来处理。
这是我们比较常见的优化手段。