1.定时器设置与清空
设置:setInterval(function(){
console.log("这是一个setInterval定时器!");
}, 1000);
清除:var intervalBox = setInterval(function(){
console.log(intervalBox);//打印interval定时器,查看interval定时器效果
}, 1000);
clearInterval(intervalBox);//清除interval定时器
面试问题:一个按钮,一个数字,点击按钮,数字开始倒计时。
2.由A复选框控制其他复选框的选中状态,其他复选框有一个未选中,A复选框也应该未选中,反之选中
html部分
<input type="checkbox" @change="checkedAll" v-model="checkedStatus">
<input @change="funChecked" style="margin-left:20px;" type="checkbox" v-for="(item,index) in checkedList" :key="index" v-model="item.checked" >
js部分省略(有待完善)
3.arr=[1,2,3,1,3,5,6,1];找出数组中重复的数字以及出现的次数
var obj={};
arr.forEach((key)=>{
if(obj[key]){
obj[key]++;
}else{
obj[key]=1;
}
})
console.log(obj);
4.箭头函数和普通函数的区别
1)this指向不同,在普通函数中,this总是指向调用它的对象,如果用作构造函数,this指向创建的对象实例。
2)箭头函数本身没有this,但是它在声明时可以捕获其所在上下文的this供自己使用。
具体的this指向,根据实例分析。。
(1).箭头函数不能Generator函数,不能使用yeild关键字。
(2).箭头函数不具有prototype原型对象。
(3).箭头函数不具有super。
(4).箭头函数不具有new.target。
5.this.$nextTick()的使用,作用以及运用场景
6.map,set的使用
ES6提供了新的数据结构Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。
(1) var data = new Set([1,2,3]);
//Set {1, 2, 3}
console.log(data);
(2).添加: add
data.add(4);
//Set {1, 2, 3, 4}
console.log(data);
//Set不会重复添加成员
data.add(4);
//Set {1, 2, 3, 4}
console.log(data);
(3).成员个数:size
//4
console.log(data.size);
(4).删除:delete
data.delete(1);
//Set {2, 3, 4}
console.log(data);
(5).查找:has
//true
console.log(data.has(2));
(6).遍历: forEach
//2
//3
//4
data.forEach(d=>{
console.log(d);
});
ES6提供了Map数据结构。它类似于对象,也是键值对的集合
也就是说,Object结构提供了“字符串—值”的对应,Map结构提供了“值—值”的对应,是一种更完善的Hash结构实现。
(1) var data = new Map();
//Map {}
console.log(data);
(2).添加 set(key,value)
data.set('a',1);
data.set('b',2);
data.set('c',3);
//Map {"a" => 1, "b" => 2, "c" => 3
console.log(data);
(3).获得: get(key)
//1
console.log(data.get('a'));
(4).成员个数: size
//3
console.log(data.size);
(5).删除:delete
data.delete('a');
//Map {"b" => 2, "c" => 3}
console.log(data);
(6).查找:has
//true
console.log(data.has('b'));
(7).遍历:forEach
//b=2
//c=3
data.forEach((value,key)=>{
console.log(key+'='+value);
});
7.watch和computed的区别以及使用场景
watch:一对多, 一个数据影响多个数据
监听的函数接收两个参数,第一个参数是最新的值;第二个参数是输入之前的值;
不支持缓存,数据变,直接会触发相应的操作;
watch支持异步;
computed:一对一,一对多; 一个数据受多个数据的影响
支持缓存,只有依赖数据发生改变,才会重新进行计算
不支持异步,当computed内有异步操作时无效,无法监听数据的变化
8.vue生命周期,created和mounted的区别
9.变量提升的理解
10.封装my-input的组件<my-input v-model="inputStr"></my-input> 可以清空value
**11.prototype和proto **
prototype是函数才有的属性
proto_是每个对象都有的属性
12.v-if和v-show的区别
v-show相当于 display的block和none,
v-if是直接去掉该元素
13.axios和promise,feach的区别
promise
Promise主要用于解决异步回调嵌套的问题。promise是一个对象 可以获取异步操作的消息,可以避免多层异步调用嵌套的问题(回调地狱),提供了简洁的API 使得控制异步操作更加容易,基于promise发送ajax请求
使用场景: 主要用于保证多个异步请求都完成以后,再进行后续的业务。
resolve成功状态
reject拒绝状态
then是前面返回promise的处理
1】.实例方法
.then() 得到异步任务的正确结果
.catch() 得到异常信息
.finally() 成功与否都会执行
2】.对象方法
Promise.all() 并发处理多个异步任务 所有任务都执行完成才能得到结果
Promise.race() 并发处理多个异步任务 只要有一个任务完成就能得到结果
axios
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,本质上也是对原生XHR的封装,只不过它是Promise的实现版本,符合最新的ES规范,它本身具有以下特征:
1.从浏览器中创建 XMLHttpRequest
2.支持 Promise API
3.客户端支持防止CSRF
4.提供了一些并发请求的接口(重要,方便了很多的操作)
5.从 node.js 创建 http 请求
6.拦截请求和响应
7.转换请求和响应数据
8.取消请求
9.自动转换JSON数据
fetch
fetch优势:
- 语法简洁,更加语义化
- 基于标准 Promise 实现,支持 async/await
- 同构方便,使用 isomorphic-fetch
- 更加底层,提供的API丰富(request, response)
- 脱离了XHR,是ES规范里新的实现方式
二、fetch存在问题
fetch是一个低层次的API,你可以把它考虑成原生的XHR,所以使用起来并不是那么舒服,需要进行封装。
- fetch只对网络请求报错,对400,500都当做成功的请求,服务器返回 400,500 错误码时并不会 reject,只有网络错误这些导致请求不能完成时,fetch 才会被 reject。
- fetch默认不会带cookie,需要添加配置项: fetch(url, {credentials: 'include'})
- fetch不支持abort,不支持超时控制,使用setTimeout及Promise.reject的实现的超时控制并不能阻止请求过程继续在后台运行,造成了流量的浪费
- fetch没有办法原生监测请求的进度,而XHR可以
14.移动端滚动监听
window.addEventListener
15防抖节流
防抖(debounce):
在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时,重新出发定时器。
this.$nettick
keep-alive
webpact配置打包
vue的响应原理
在浏览器输入url后发生了什么
1.DNS域名解析;
2.建立TCP连接;
3.发送HTTP请求;
4.服务器处理请求;
5.返回响应结果;
6.关闭TCP连接;
7.浏览器解析HTML;
8.浏览器布局渲染;