1.说一下vue生命周期

答案

        beforeCreate
        created  
        beforeMount  
        mounted  
        beforeUpdate  
        updated  
        beforeDestroy  
        destroyed

2.说一下组件通信

（1）父传子

props

父：
<HelloWorld :msg="str" />
<HelloWorld :msg="str" ></HelloWorld>

子：
props:['msg']
props: {
	msg: String,
},

插槽（匿名插槽、具名插槽、作用域插槽）参考链接

（2）子传父

自定义事件

子：
<button @click="changeParentName">改变父组件的name</button>
export default {
    methods: {
        //子组件的事件
        changeParentName: function() {
            this.$emit('handleChange', 'Jack') // 触发父组件中handleChange事件并传参Jack
            // 注：此处事件名称与父组件中绑定的事件名称要一致
        }
    }
}

父：
<child @handleChange="changeName"></child>
methods: {
    changeName(name) {  // name形参是子组件中传入的值Jack
        this.name = name
    }
}

（3）兄弟之间

bus

import Vue from "vue";
export default new Vue;

A组件：
<button @click='btn'>HelloWorld按钮</button>
data () {
    return {
      hlStr:"这是helloWorld组件的数据"
    }
},
methods:{
    btn(){
      bus.$emit('selectItem',this.hlStr);
    }
}

B组件：
created(){
		bus.$on('selectItem',(val)=>{
			console.log( val , 1111);
		})
}

3.说一下vuex

state、getters、mutations、actions、modules

4.说一下双向绑定的原理

通过Object.defineProperty劫持数据发生的改变，如果数据发生改变了（在set中进行赋值的），触发update方法进行更新节点内容（{{ str }}），从而实现了数据双向绑定的原理。

5. 知道哪些vue指令

6.说一下自定义指令

自定义指令

私有自定义指令

在每个vue 组件中，可以在directives 节点下声明私有自定义指令。

全局自定义指令

全局共享的自定义指令需要通过“Vue.directive()”进行声明

7.说一下路由传参

params参数：属于路径中的一部分，需要注意，在配置路由的时候，需要占位

query参数：不属于路径当中的一部分，类似于ajax中的queryString /home?k=v&kv=，不需要占位

8.说一下防抖节流

防抖就是回城，被打断要重新读秒，节流就是技能cd，一定时间只能用一次

正常：事件触发非常频繁，而且每一次的触发，回调函数都要去执行（如果时间很短，而回调函数内部有计算，那么很可能出现浏览器卡顿

节流：在规定的时间间隔内不会重复触发回调，只有大于这个时间间隔才会触发回调，把频繁触发变为少量触发

防抖：前面的所有的触发都被取消，最后一次执行在规定的时间之后才会触发，也就是说如果连续快速的触发只会执行一次

9. 说一下this

this本质上就是指向它的调用者

全局调用
指向windows
方法调用
方法(method)指的是某个对象的属性是一个函数，如obj = {fn:function(){}}，而obj.fn()叫做方法调用****经过方法调用后，方法内的this指向拥有该方法的对象

new调用
关键在于记住**new做了哪些事情**：

创立一个临时对象，this指向该临时对象
把实例的__proto__指向类的prototype
return临时对象

10.怎么阻止默认事件

event.preventDefault()

11.怎么阻止事件冒泡

event.stopPropagation()

12.数组常用的方法

push() 向数组的末尾添加新内容
pop()删除数组的最后一项
shift()删除数组的第一项
unshift()向数组首位添加新内容
sort()排序 (对数组元素进行排序)
join()分隔 (将数组的每一项通过自己指定的字符进行拼接、默认连接为 ",")
reverse():反转 (将数组进行倒序)
splice()删除元素或者添加元素，如：splice('从哪里','删几位','添加的元素')
slice()按照条件查找出其中的部分内容
concat()用于连接两个或多个数组

13.数组去重知道哪些方法

方式一：new set

var arr1 = [1,2,3,2,4,1];
function unique(arr){
    return [...new Set(arr)]
}
console.log(  unique(arr1) );

方式二：indexOf

var arr2 = [1,2,3,2,4,1];
function unique( arr ){
    var brr = [];
    for( var i=0;i<arr.length;i++){
        if(  brr.indexOf(arr[i]) == -1 ){
            brr.push( arr[i] );
        }
    }
    return brr;
}
console.log( unique(arr2) );

方式三：sort

var arr3 = [1,2,3,2,4,1];
function unique( arr ){
	arr = arr.sort();
	var brr = [];
	for(var i=0;i<arr.length;i++){
		if( arr[i] !== arr[i-1]){
			brr.push( arr[i] );
		}
	}
	return brr;
}
console.log( unique(arr3) );

14.字符串操作方法

charAt() 返回在指定位置的字符。
charCodeAt() 返回在指定的位置的字符的 Unicode 编码。
concat() 连接字符串
indexOf() 检索字符串。indexOf() 方法对大小写敏感！
replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
slice() 提取字符串的片断，并在新的字符串中返回被提取的部分。
split() 把字符串分割为字符串数组
字符串操作方法

15.怎么判断一个数是不是素数，逻辑怎么写？

16. 怎么清除浮动

触发BFC
多创建一个盒子，添加样式：clear: both;
after方式 ul:after{ content: ''; display: block; clear: both; }

17. div怎么垂直居中

水平垂直居中
一、margin
二、绝对定位
三、flex布局

18. 怎么画0.5px的线

方法一、移动端，采用meta viewport的方式
方法二、采用 transform: scale()的方式
方法三、使用boxshadow
方法四、使用background-image结合SVG的方式
参考链接

19.说一下盒模型

标准盒子模型
IE盒子模型
标准盒模型会因为padiing被撑大，如果不想盒子因为padding被撑大就可以设置盒子box-sizing为border-box;

转换：box-sizing

box-sizing: content-box ：标准盒模型（默认值）。
box-sizing: border-box ：IE（替代）盒模型。
如果padding超上限（width）则会算上边框

20.两个异步请求数据操作怎么合并

21.v-model是谁的语法糖

v-model是value+input的语法糖,是v-band和v-on的简洁写法参考链接

22.query和params区别

1.首先就是写法的不同，query的写法是用path来编写传参地址，而params的写法是用name来编写传参地址 2.接收方法不同，一个用query来接收，一个用params接收，总结就是谁发的谁去接收
3.query 在刷新页面的时候参数不会消失，而 params 刷新页面的时候会参数消失，可以考虑本地存储解决
4.query传的参数都是显示在url地址栏当中，而 params传参不会显示在地址栏

23.vue怎么获取dom

通过 ref 来获取dom元素

<button ref="btn">按钮</button>
<div ref="box">
	<h1> ref</h1>
	<p> 测试</p>
</div>
<hr>
<div ref="myDiv">
	<p v-for="item in  10">{{item}}</p>
</div>

获取的时候 this.$refs. 跟上需要获取标签的 ref的属性值

"获取标签内容"： this.$refs.btn.innerHTML
"获取子标签"：this.$refs.box.children
"获取标签的高度"： this.$refs.myDiv.offsetHeight
"获取标签的距离顶部的高度"：this.$refs.myDiv.offsetTop
"获取并操作"：this.$refs.box.style.backgroundColor="red"

24.flex布局怎么把元素搞到右上角

25. promise有几种状态，会不会改变

pending（进行中）
fulfilled（已成功）
rejected（已失败）

26. async和await解决什么问题？

27. let和const区别

1、let和const的相同点：

①　只在声明所在的块级作用域内有效。
②　不提升，同时存在暂时性死区，只能在声明的位置后面使用。
③　不可重复声明。

2、let和const的不同点：

①　let声明的变量可以改变，值和类型都可以改变；const声明的常量不可以改变，这意味着，const一旦声明，就必须立即初始化，不能以后再赋值。

28. const定义对象里面的属性值能不能改？

const定义的对象属性可以修改，但是const定义的基本数据类型string，number等，定义后不可修改，如果修改会报错。

为什么

const定义中的不变指的是指向对象的指针不变，因为修改对象中的属性并不会让指向对象的指针发生改变，所以可以改变const定义对象的属性。

29.常见状态码

200 – 服务器成功返回网页
404 – 请求的网页不存在
503 – 服务器超时

30. 对同步和异步的理解

同步是指两个进程的运行是相关的，其中一个进程要阻塞等待另外一个进程的运行。异步的意思是两个进程毫无相关(不用互相等待)，自己运行自己的。
同步是阻塞模式，异步是非阻塞模式。

进程同步/异步指的是进程之间的运行关系，但是阻塞和非阻塞是访问资源的一种运行状态

31.常见的宏任务，微任务？

● 常见的微任务包括： promise 的回调、node 中的 process.nextTick 、对 Dom 变化监听的 MutationObserver。
● 常见的宏任务包括： script 脚本的执行、setTimeout ，setInterval ，setImmediate 一类的定时事件，还有如 I/O 操作、UI 渲染等。参考链接

32.怎么判断两个数组相等？

数组无法直接对比，但字符串可以

一、toString()

当两个数组元素类型相同，顺序相同时，直接判断是否相等，结果不相等；转化为字符串后，结果相等

[1,2,3].toString() === [1, 2, 3].toString(); //true
[1,2,3].toString() === ['1' , 2, 3].toString(); // true

二、join()

[1,2,3,'4' ].join() === [1,2,3, 4].join(); // true

三、 JSON.stringify()

JSON.stringify([{name:``'许善祥'``},{sex:``'男'``}]) ==JSON.stringify([{name:``'许善祥'``},{sex:``'男'`` }]); // true

33. es6遍历数组的方法?

for of
forEach
map
参考链接

34.前端怎么给数据加密？

base64
md5
sha1
参考链接

35.两个html文件怎么传值？

利用localstarage和sesionstorage存取值
sessionStorage.setItem(“key”, “value”);
localStorage.setItem(“site”, “js8.in”);
getItem获取value

36. vue3了解多少？

1.数据结构了解哪些

2.怎么查找两个数组的交集

filter加includes

var arr1=[1,2,3,4,5,6,"a","b"]
var arr2=['a','b',1,2]
var arr3=arr1.filter(item=>{
    return arr2.includes(item)
})
console.log(arr3);//[ 1, 2, 'a', 'b' ]
//filter()数组的过滤方法，会返回满足条件的元素组成一个新数组
//includes()方法如果在数组中查到该元素则返回true否则返回false

可以用for循环加indexOf加push方法
indexOf方法有两个缺点
一是不够语义化，它的含义是找到参数值的第一个出现位置，所以要去比较是否不等于 -1 ，表达起来不够直观。
二是，它内部使用严格相当运算符（ === ）进行判断，这会导致对NaN的误判。

3. 二叉树查找

4.了解哪些网络安全知识

数据加密：AES、DES、MD5、SHA1
VPN
防火墙

5.对称加密和非对称加密哪个效率高

对称加密算法相比非对称加密算法来说，加解密的效率要高得多。但是缺陷在于对于秘钥的管理上，以及在非安全信道中通讯时，密钥交换的安全性不能保障。所以在实际的网络环境中，会将两者混合使用。

6.web木马了解吗

web木马:用Web系统语言(如:ASO,PHP,JSP等)编写的木马，木马上传服务器后当成页面被攻击者访问，常当做后门参考链接

7. 用户输入url会发生什么

参考链接
输入网址--DNS解析--建立TCP连接--客户端发送请求--服务器处理请求--服务器响应请求--渲染HTML

8. flex布局元素怎么放右下角

参考链接

9. js的设计模式？

工厂模式、单例模式、模块模式
参考链接

10. var let const区别

区别一：
- var 具有变量提升的机制
- let和const没有变量提升的机制
区别二：
- var 可以多次声明同一个变量
- let和const不可以多次声明同一个变量
区别三：
- var、let声明变量的
- const声明常量
- var和let声明的变量可以再次赋值，但是const不可以再次赋值了。
区别四：
- var声明的变量没有自身作用域
- let和const声明的变量有自身的作用域

11.遍历数组的方法，哪个可以跳出循环，哪个效率最高

for of 可与break，continue，return配合

12. promise捕获错误的方式

13.异步任务有哪些

JS的异步是通过回调函数实现的。一般而言，异步任务有以下三种类型

1、普通事件，如click、resize等

2、资源加载，如load、error等

3、定时器，包括setInterval、setTimeout等

14. vue兼容到ie几

ie9

15. 组件通信

16.生命周期父子组件执行顺序

父

基本面试题