前端面试总结(一)

1. Created和mounted等生命周期函数分别都适合做什么操作

不要在选项属性或回调上使用箭头函数，比如 created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())。因为箭头函数是和父级上下文绑定在一起的，this 不会是如你所预期的 Vue 实例

对象中定义箭头函数，this不会指向该对象，会指向window，或者undifine

函数中定义箭头函数，this会指向 该函数的所在的上下文,且不会随着apply或者call修改this指向

生命周期方法

beforeCreated：

created：完成vue实例的创建，判断时候有el，如果没有调用this.$mount(el)方法，将dom挂在到vm实例上

beforeMounted：判断是否有template，如果没有调用render 方法，创建createElement，创建vm.el

mounted：用刚创建的html 替换el

beforeUpdated: 组件更新前调用

updated: 组件更新后

actived: for keep-alive, 组件被激活时调用

deactived: for keep-alive, 组件消失时调用

beforeDestroyed:

destroyed:

beforecreated：el 和 data 并未初始化
created:完成了 data 数据的初始化，el没有
beforeMount：完成了 el 和 data 初始化
mounted ：完成挂载

beforecreate : 举个栗子：可以在这加个loading事件
created ：在这结束loading，还做一些初始化，实现函数自执行
mounted ： 在这发起后端请求，拿回数据，配合路由钩子做一些事情
beforeDestroy： 你确认删除XX吗？

destroyed ：当前组件已被删除，清空相关内容

2. 权限控制模块如何利用导航守卫实现

3. 网络请求模块封装，如何利用promise封装

4. 组件异步赋值：provide \ inject的使用

5. Keep-alive 有什么作用

<keep-alive>是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM

<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。

一般都是配合路由使用

<keep-alive> <router-view></router-view>

</keep-alive>

6. Vuex ：如何进行赋值操作

 

7. vue指令

v-bind

v-on

v-if

v-for

v-show

v-model

8. JS继承关系

我们需要牢记两点：①__proto__和constructor属性是对象所独有的；② prototype属性是函数所独有的，因为函数也是一种对象，所以函数也拥有__proto__和constructor属性。
__proto__属性的作用就是当访问一个对象的属性时，如果该对象内部不存在这个属性，那么就会去它的__proto__属性所指向的那个对象（父对象）里找，一直找，直到__proto__属性的终点null，然后返回undefined，通过__proto__属性将对象连接起来的这条链路即我们所谓的原型链。
prototype属性的作用就是让该函数所实例化的对象们都可以找到公用的属性和方法，即f1.__proto__ === Foo.prototype。
constructor属性的含义就是指向该对象的构造函数，所有函数（此时看成对象了）最终的构造函数都指向Function。

9. 计算属性与方法相比较的好处

计算属性依赖于data值，只有当data的值发生变化时，才会改变，而方法每次刷新调用取值

10. axios

实际返回一个promise，拦截器功能

 

笔试问题：

1. 请解释一下为什么要消除浮动、清除浮动的方式

浮动是由于子标签脱离文档流，造成父标签高度塌陷问题，浮动不会影响块级元素，但是会影响行内元素

清除浮动：（BFC模式）

1. 父标签添加overflow：hidden

2.  父标签添加display：inline-block

3. 伪类

.clearfix:after{

    display: block;
    content:'';
    clear:both;
    height: 0;
}

2. 利用javaScript获取URL中的参数值

1. 正则表达式2. splite（‘？’）和 substr字符串截取

4. javaScript实现一个千分位的分隔符

字符串方法总结：

indexOf（’‘）//判断字符串是否包含某个值，如果不包含返回-1

join（），数组转字符串

slice(), 字符串截取，可以从后面开始截取 slice（-2，-1）

substring（），字符串截取,接受开头、结尾两个参数，小的作为起始位置

数组方案

splite(''), 字符串转数组

splice（），删除或者添加字符串 [].splite(1,1,'2'), 在下标为1的位置开始 删除1个元素，添加“2”到这个位置

push(),结尾添加元素，pop（）结尾删除元素，shift（）开头删除元素，unshift（）开头添加元素，reverse() 数组倒叙

5. 为什么浏览器会有跨域问题，怎么解决

1.Jsonp ，必须是get请求

 // 1:script标签的创建及加载
        var script = document.createElement('script');
        // 2:服务器返回的数据 需要在函数中被执行
        // 3:挂载一个全局函数,先来个函数名
        var callbackName = 'callback'; // callback
        // 挂在window上
        window[callbackName] = function (data) {
            document.getElementById("main").interHTML = data;
        }
        // 4:吧这个函数名传递给服务器
        script.src = 'http://localhost:8889/jsonp?callback=' + callbackName;
        // 5:将标签插入到body中
        document.body.appendChild(script);
 

2. Nginx代理

3. 服务端在header头设置across-control-origin

6. webpack用来解决什么问题

1.自动构建HTML，可压缩空格，可给引用的js加版本号或随机数：html-webpack-plugin
2.处理CSS：css-loader与style-loader
3.处理LESS：less-loade与less
4.提取css代码到css文件中： extract-text-webpack-plugin
5.开发环境下的服务器搭建：webpack-dev-server
6.解析ES6代码：babel-core babel-preset-env babel-loader
7.解析ES6新增的对象函数：babel-polyfill
8.解析react的jsx语法：babel-preset-react
9.转换相对路径到绝度路径：nodejs的path模块
10.给文件加上hash值：[chunkhash],[hash]
11.清空输出文件夹之前的输出文件：clean-webpack-plugin
12.模块热替换：NamedModulesPlugin和HotModuleReplacementPlugin
13.环境变量
14.跨平台使用环境变量: cross-env
15.处理图片路径: file-loader和html-loader
16.图片压缩：image-webpack-loader
17.定位源文件代码：source-map
18.分离生产环境和开发环境的配置文件

7. 爬虫引擎如何抓取界面，如何防止采集