去除字符串的开头结尾
//方法一：trim
var str = " abcde "
str.trim()
//方法二：replace //更换字符串里的空格
var newStr = str.replace(/\s/g/,"")
//方法三：
//去除字符串里全部的空
let arr = str.split(' ')
arr.fliter(item=>item!='').join('')
截取3.1415926的后三位小数，然后向上取整。
let str = "3.1415926"
let number = str.slice(0,5)
Math.floor(Number(number))
箭头函数和普通函数的区别
1.箭头函数是匿名函数，普通函数既可以匿名也可以不匿名。
2.this不可改变，this永远指向上层作用的this。
3.没有原型prototype，proto,没有自己的arguments
4.不能作为构造函数来使用，因为构造函数是通过new来实现的，而new的过程是这样的：
- 创建一个对象
- 让this指向新创建的这个对象
- 执行构造函数，给新对象添加属性和方法
- 返回这个新对象
深拷贝和浅拷贝
防抖和节流
事件循环机制（ElentLoop）
宏任务：setTimeout、setInterval
微任务：Promise.then
时间循环的具体流程：
1.从宏任务队列中，按照入队顺序，找到第一个执行的宏任务，放入调用栈，开始执行；
2.执行完宏任务下所有的同步任务，即调用栈清空，该宏任务被推出宏任务队列，然后微任务队列开始按照入队顺序，依次执行其中的微任务，直至微任务队列清空；
3.当微任务队列清空后，一个事件循环结束；
4.接着从宏任务队列中，找到下一个执行的宏任务，开始第二个时间循环，直至宏任务队列清空为止。
这里几个重点：
- 当我们第一次执行的时候，解释器会将整体代码script放入宏任务队列中，因此事件循环是从第一个宏任务开始的；
- 如果在执行微任务的过程中，产生的微任务添加到微任务队列中，也需要一起清空；微任务队列没清空之前，是不会执行下一个宏任务的。
请参考地址：https://juejin.cn/post/6969028296893792286#heading-4
vue中的nexTick是什么？使用场景以及原理。
nexTick：在下次DOM更新循环结束后延迟回调。在数据修改结束之后理解使用，获取更新后的DOM。
使用场景：当你修改了一个元素的内容之后想立刻获取修改的内容时候可以调用。
<template>
<div class="hello">
<h3 id="h">{{testMsg}}</h3>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
testMsg:"原始值",
}
},
methods:{
changeTxt:function(){
let that=this;
that.testMsg="修改后的文本值"; //修改dom结构
that.$nextTick(function(){ //使用vue.$nextTick()方法可以dom数据更新后延迟执行
let domTxt=document.getElementById('h').innerText;
console.log(domTxt); //输出可以看到vue数据修改后并没有DOM没有立即更新，
if(domTxt==="原始值"){
console.log("文本data被修改后dom内容没立即更新");
}else {
console.log("文本data被修改后dom内容被马上更新了");
}
});
},
}
</script>
原理：vue中的NexTick方法其实做了两件事：
1.递归回调函数用try catch包裹放入到callbacks数组中。
2.执行timerFun,在浏览器的异步执行队列中加入刷新的callbacks函数。
vue的异步更新机制是如何实现的
vue的异步更新机制是利用浏览器的异步任务队列来实现的。
当响应式数据更新后，会调用dep.notify方法，通知dep中收集的watcher去执行updata方法，将wathcer放入一个异步队列中。
然后通过nexTick方法，将所有的回调函数都添加在callbacks这个数组中，执行timerFun，根据浏览器的兼容，来创建一个异步任务。
当异步任务完成后，执行对应的回调函数，对依赖进行排序，然后执行run方法，对dom进行更新。
vue的响应式原理
vue的响应式原理核心是通过object.defineProperty进行数据劫持。
响应数据分为两类：
- 对象：对象是通过遍历所有的属性，为每一个属性设置getter和setter，已达到拦截访问和设置，当对象的属性依旧为对象时；会递归对象的属性为其设置getter和setter。
1.访问数据时进行依赖收集，在dep中存储相关的watcher。
2.设置数据时由dep通知相关的watcher去更新。 - 数组 ：当响应式数据为数组的时候，回去增强数组改变原数组的七个方法,然后拦截起这些方法的操作
1.当添加新数据的时候进行响应式处理，然后有dep通知watcher去更新。
2.删除数据，也要有dep通知watcher去更新。
methods、computed、watch的区别
-
methods VS computed
如果在一次渲染中，有多个地方同时调用了methods和computed,methods会执行多次而computed只会执行一次。
多次访问computedProperty，只会在此一次执行computed属性的回调函数，后续其他访问，则直接使用第一次的执行结果，而这一些的实现原理则是通过watcher.dirty属性的控制来实现的。而methods，每一次的访问则是简单的方法调用。 -
computed VS watch
computed和watch的本质是一样，内部都是通过watcher来实现的，其实没有什么区别，非要说区别那就两点：1.使用场景的不同。2.computed默认是懒执行，切不可更改。 -
methods VS watch
methods和watch之间没有什么可比性，完全就是两个东西，不过可以把watch中的代码逻辑提取到methods中，提高代码的可读性。
网友评论