4.vue的生命周期有哪些?并解释每个生命周期的意思
before creat 安装前 :创建vue对象之后
created 安装后 : 开始监控data对象数据变化,vue内部初始化事件之后
beforeMount 挂载前 : 开始执行挂载钩子,注意此时还没有生成html到页面上去
mounted 挂载后 : 模板中的html渲染到了html页面中,此时一般可以做一些ajax操作,mounted 只会执行一次
beforeUpdate 更新前 : 更新数据之前发生的事件钩子
updated 更新后 : 实时监控数据变化,随时更新dom
beforeDestroy 销毁前 :在实例销毁之前调用,实例仍然完全可用,这一步还可以用this来获取实例,
一般在这一步做一些重置的操作,比如清除掉组件中的定时器 和 监听的dom事件
Destroyed 销毁后 : 在实例销毁之后,所以的事件监听器会被移出,所有的子实例也会被销毁,该钩子在服务器端渲染期间不被调用
以下是组件之间的,keep-alive 才有的声明周期
activated : 是在被包裹组建被激活的状态下使用的生命周期钩子
deactivated : 在被包裹组件停止使用时调用
errorCaptured :防止当一个错误被捕获时该组件进入一个无限的渲染循环
5. 给数组[6,2,4,1,8,5,7]进行排序有哪几种方法可以实现?分别写出
let arr = [6,2,4,1,8,5,7]
let newArr = [...arr] // 不破坏原数组,深复制
第一种:快速排序
arr.sort() 反序 : arr.sort().reverse()
第二种:基本排序
function bubbleSort(arr) {
for (let i = arr.length - 1; i > 0; i--) {
for (let j = 0; j < i; j++) {
if (arr[j] > arr[j + 1]) {
swap(arr, j, j + 1);
}
}
}
return arr;
}
console.log(bubbleSort(arr));
6. 给数组[6,6,3,2,1,1,8,1,9]进行去重有哪几种方法可以实现?分别写出
let arr = [6, 6, 3, 2, 1, 1, 8, 1, 9]
第一种:ES6 写法 : [...new Set (arr)]
let es6 = [...new Set(arr)]
console.log(es6)
第二种:for嵌套:遍历循环比较是否一样,splice 去重 (ES5 常用)
for(let i = 0;i<arr.length;i++){
for(let j = i+1;j<arr.length;j++){
if(arr[i]==arr[j]){
arr.splice(j,1)
j--
}
}
}
第三种:利用 indexOf 去重:判断是否有此对象
判断对象是否是个数组,变量新数组,遍历循环判断新数组里面是否有就数组里面的数,没有就添加,有就不添加
let array = [];
for (let i = 0; i < arr.length; i++) {
if (array.indexOf(arr[i]) === -1) {
array.push(arr[i]);
}
}
console.log(array);
参考一下网址:https://segmentfault.com/a/1190000016418021
7. js中call、 apply、 bind有什么区别?
call 和 apply 立即执行
bind 手动执行
apply 传的参数是数组
call 和 bind 传的参数是选项
8. 闭包是什么?写出一个闭包的使用场景.
避免垃圾回收机制 , 回收执行完函数得到的结果
function fn1(){
var a = 1
function fn2(){
++a
console.log(a)
}
// 这个就是闭包
return fn2
}
var f = fn1()
f()
f()
f()
// 没有经过垃圾没收机制,直接在内存里面一直增加下去
9. 防抖函数和节流函数有什么区别?分别写出应用场景
防抖函数: 是函数在特定的时间内不被再调用后执行
节流函数: 是确保函数特定的时间内至多执行一次
他们都是可以防止一个函数被无意义的高频率调用
// 函数防抖
function fun(){ console.log('onresize') } function throttle(method,context){ clearTimeout(method.timer); method.timer=setTimeout(function(){ method.call(context); },500); } window.onresize = ()=>throttle(fun,window) // 函数节流 var canRun = true; document.getElementById("throttle").onscroll = function(){ if(!canRun){ return } canRun = false setTimeout( function () { console.log("函数节流") canRun = true }, 500) }10. mvvm模式是什么意思?相比jq有什么优势和劣势?
m : 模型 - 数据 v : 视图 - 标签 vm:视图模型 - vue - 链接标签和数据
mvvm和jq的区别:vue数据驱动,通过数据来显示视图层而不是节点操作
优势:渲染的速度快,方便
劣势:兼容性差,低版本用不了vue只能用jq
11. 深拷贝和浅拷贝有什么区别?分别写出实现方式。
浅拷贝:只能克隆第一层的对象
深拷贝:克隆整个对象
缺陷:无法实现对函数,RegExp等特殊对象的克隆
let obj = {
name:"团团",
children:{
name:"仙某某"
}
}
浅拷贝:
let obj3 = Object.create(obj)
obj3.name = "王大娘"
console.log(obj3)
console.log(obj)
深拷贝:
let obj2 = JSON.parse(JSON.stringify(obj))
console.log(obj2)
console.log(obj)
浅克隆和深克隆认识:https://blog.csdn.net/Runpire/article/details/108470974