数组去重
//方法1：es6
let arr = [1, 2, 3, 2, 1, 3];
let newArr=Array.from(new Set(arr))
console.log(newArr)//(3) [1, 2, 3]
//方法2使用filter过滤函数去重。
var arr = [1, 2, 3, 1, 2, 3];
var newArr=arr.filter((v, i, arr) => arr.indexOf(v) === i)
console.log(newArr)//(3) [1, 2, 3]
//方法3：遍历数组法。
function unique(array) {
var n = []; //一个新的临时数组
//遍历当前数组
for (var i = 0; i < array.length; i++) {
if (n.indexOf(array[i]) == -1)
n.push(array[i]);
//如果当前数组的第i已经保存进了临时数组，那么跳过，
//否则把当前项push到临时数组里面
}
return n;
}
console.log(unique([1, 2, 3, 1, 2, 3]))//(3) [1, 2, 3]
网页从输入网址到渲染完成经历了哪些过程
- 域名解析
- 发起TCP的3次握手
- 建立TCP连接后发起http请求
- 服务器端响应http请求，浏览器得到html代码
- 浏览器解析html代码，并请求html代码中的资源
- 浏览器对页面进行渲染呈现给用户
MVVM和MVC的区别
MVC和MVVM的区别其实并不大。都是一种设计思想。
主要就是MVC中Controller演变成MVVM中的viewModel。
MVVM主要解决了MVC中大量的DOM操作使页面渲染性能降低，加载速度变慢，影响用户体验。当和Model频繁发生变化，开发者需要主动更新到View。
ViewModel，是把MVC里的controller的数据加载，加工功能分离出来
vue数据双向绑定原理
vue实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty() 来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty() 将它们转为 getter/setter，在属性被访问和修改时通知变化。
说说对原型链的理解
原型链：用于查找引用类型的属性，查找属性会沿着原型链依次进行，如果找到该属性会停止搜索并做相应的操作，否则将会沿着原型链依次查找直到结尾。
原型：所有的函数都有一个特殊的属性prototype(原型)，prototype属性是一个指针，指向的是一个对象(原型对象)，原型对象中的方法和属性都可以被函数的实例所共享。所谓的函数实例是指以函数作为构造函数创建的对象，这些对象实例都可以共享构造函数的原型的方法。
闭包概念
闭包就是能够读取其他函数内部变量的函数。由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成“定义在一个函数内部的函数”。所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。
call和apply区别
接收的第一个参数都是要修改的this指向的对象，接收的第二个参数不同，call( )方法接受的是若干个参数的列表，apply( ) 方法接受的是一个包含多个参数的数组
减少页面加载时间的方法
1.文件拼合，减少http请求。
2.文件压缩：将需要传输的内容压缩后传输到客户端再解压
3.使用CDN
4.使用缓存，避免重复加载同意文件
5.css文件放置在head，js放置在文档尾部
vue的生命周期有哪些
总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后
beforeCreate:可以在这加个loading事件
created：实例已经完成以下的配置：数据观测，属性和方法的运算，watch/event事件回调
beforeMount：在挂载开始之前被调用：相关的render函数首次被调用
mounted:此周期dom已经渲染完成
beforeUpdate：数据更新时调用，发生在虚拟DOM重新渲染和打补丁之前。你可以在这个钩子中进一步第更改状态，这不会触发附加的重渲染过程
updated：当这个钩子被调用时，组件DOM已经更新，避免在此期间更改状态
beforeDestroy
destroyed
盒模型
标准：margin、border、padding、content，元素的宽度width=content的宽度
IE：margin、border、padding、content，元素的宽度width=border + padding + content
BFC（块格式化上下文）
特性:
1.BFC 是一个独立的容器，容器内子元素不会影响容器外的元素。反之亦如此。
2.在同一个 BFC 中，两个相邻的块级盒子的垂直外边距会发生重叠。
3.BFC 区域不会和 float box 发生重叠。
4.BFC 能够识别并包含浮动元素，当计算其区域的高度时，浮动元素也可以参与计算了。
5.盒子从顶端开始垂直地一个接一个地排列，盒子之间垂直的间距是由 margin 决定的。
创建BFC
1.根元素或包含根元素的元素
2.浮动元素 float ＝ left | right 或 inherit（≠ none）
3.绝对定位元素 position ＝ absolute 或 fixed
4.display ＝ inline-block | flex | inline-flex | table-cell 或 table-caption
5.overflow ＝ hidden | auto 或 scroll (≠ visible)
为什么rem方式下的根字号要设置成62.5%，有没有更精准的方法
因为设了62.5%后就有1rem = 10px，便于用rem来指定元素的尺寸，这样响应式的时候可以直接改变font-size而无需计算其他各种样式中出现的尺寸了。用rem定义尺寸的另一个好处是更能适应缩放／浏览器设置字体尺寸等情况（因为rem相对于字体大小，会同步改变）。
vue父子组件传值
父传子
父组件代码：
//子组件html
<Son :m="msg"><Son/>
//父组件data
data(){
return {
msg:"我是父组件要传递的值"
}
}
子组件代码：
<span>{{m}}<span/>
//子组件接收m
props:{
m:String
}
子传父
子组件代码：
//html
<input v-model="sonData" @change="setData"/>
//js
data() {
return {
sonData:"子组件要传递的值"
};
},
methods: {
//子传父
setData(){
this.$emit("msg",this.sonData)
}
}
父组件代码：
//html
<Son @msg="getData"/>
//js
data(){
return{
sonData:'',
}
},
methods:{
getData(data){
this.sonData=data
},
}
vue-router动态路由
在router目录下的index.js文件中，对path属性加上/:id。
使用router对象的params.id。
vue-router有哪几种导航钩子
1.全局导航钩子：router.beforeEach(to,from,next)，作用：跳转前进行判断拦截。
2.组件内的钩子；
3.单独路由独享组件
网友评论