作者：lgd8981289
搬运自 https://github.com/lgd8981289/vue-next-mini
那么在上一小节中我们已经知道了如何对vue的源代码进行debugger ,但是如果想要学习或者了解 vue的代码执行，那么光靠 debugger是不够的,除此之外我们还需要掌握另外一个能力,那么如何阅读源代码
很多同学在去阅读源代码的时候,都会面临一个误区,那就是：我需要把源代码中每一行代码都读明
这是一个非常不对的行为，很容易让我们 事倍功半
Proxy与Object.definePropertyProxy
Proxy 将代理一个对象（被代理对象），得到一个新的对象（代理对象），同时拥有被代理对象中所有的属性。handler 的 getter 和 setterObject.defineProperty
Object.defineProperty 为指定对象的指定属性设置属性描述符getter 和 setter本文转自 typescript 中的 interface 和 type 到底有什么区别
作者：SunshowerC
弱引用：不会影响垃圾回收机制。即： WeakMap 的 key 不再存在任何引用时，会被直接回收。
强引用：会影响垃圾回收机制。存在强应用的对象永远不会被回收。
<script>
let obj1 = {
name: '张三'
}
let obj2 = {
name: '张三'
}
// 强引用
const map = new Map()
// 弱引用
const weakMap = new WeakMap()
map.set(obj1,'value')
weakMap.set(obj2,'value')
obj1 = null
obj2 = null
console.log('map',map) // Map(1) {{…} => 'value'}
console.log('weakMap',weakMap) // WeakMap {} 空
/**
此时 WeakMap 中不存在任何值，即: obj2不存在其他引用时， WeakMap 不会阻止垃圾回收，基于obj2的引用将会被清除。这就证明了 WeakMap 的 弱引用特性。
*/
</script>
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce
reduce(callbackFn)
reduce(callbackFn, initialValue)
this对象指向this要指向的对象，如果如果没有这个参数或参数为undefined或null，则默认指向全局windowapply是数组，而call是参数列表，且apply和call是一次性传入参数，而bind可以分为多次传入bind是返回绑定this之后的函数，apply、call 则是立即执行 /**
* 在某些场景下，页面的请求数可能会有很多，
* 比如：抓取、分片上传等，如果我们需要等一个请求完成后，
* 再发起下一个请求，是必效率会比较低。
* 为了提升效率，我们可以同时发出多个请求，但数量又不能太多，
* 如若某请求完成，剩余等待的请求继续补位执行，
* 将请求的结果（不论成功或失败），按原有数组的顺序返回。
*/
/**
* 11-并发事件
* @param {string[]} urls 请求地址数组
* @param {number} max 最大并发数
*/
function consurRequest(urls, max) {
return new Promise((resolve,reject) => {
// 判断传入urls长度，为空直接返回[]
if(urls.length === 0){
resolve([])
return
}
const results = []
let count = 0 // 标识请求的完成数量
let index = 0 // 下一个请求
// 发送请求
async function request(){
// 退出逻辑
if(index === urls.length){
return
}
// 存储 index，保持后续请求结果数组与urls数组对应
const i = index
const url = urls[index]
index++
try {
const resp = await fetch(url)
// resp加入到 results中
results[i] = resp
} catch (err) {
// err 加入到results
results[i] = err
console.log('err',err)
} finally {
// 判断是否所以的请求都完成
count++
// if(count === urls.length){
if(count === urls.length){
resolve(results)
return
}
request()
}
}
const times = Math.min(max,urls.length)
let promiseList = []
for(let i = 0; i < times; i++){
promiseList.push(request())
}
Promise.race(promiseList).then(() => {
}).catch((err) => {
reject(err)
})
})
}
Proxy与Object.definePropertyProxy
Proxy 将代理一个对象（被代理对象），得到一个新的对象（代理对象），同时拥有被代理对象中所有的属性。handler 的 getter 和 setterObject.defineProperty
Object.defineProperty 为指定对象的指定属性设置属性描述符getter 和 setter在本章中，我们对整个 vue 框架设计中的一些基本概念都做了一个了解。明确了如下基本概念：
当我们把这些基本概念了解清楚之后，那么下一章我们就可以准备开始构建我们的 vue 3 框架了。