从0看vue3 源码记录

1 vue3 源码地址 https://github.com/vuejs/vue-next.git 跳转

2 看了很多文章把了解到的知识点做个总结

a.如果你要开发一个要发布的框架组件也就是package 建议使用 lerna，给你个链接不懂也不影响v3

b.clone下v3项目后如何运行起来 https://juejin.im/post/5d9c99a0f265da5b8f10762c 按照这个步骤修改 +创建html 即可不过记得要npm run dev 或者build一下 v3 才有dist哦（不过运行起来貌似没啥用只不过是装个b 跑起来了而已哈哈）

c.看了很多文章主要总结核心是 v3核心文件在 packages文件夹里其中reactivity 是最帅的数据监听部分也是很多想看源码的人关注的地方，之前v2面试总问 v2是如何实现数据监听的 Object.defineProperty 那么v3 是怎么实现的呢所以从这里开始即可(这里如果你还不知道v2是如何实现的，那么去这里,第一篇，第二篇，看完这2个对你理解v3的数据监听会有很大帮助，读第二篇的时候，又去补充了一下js队列的相关知识，链接这里，从这里你能理解microtasks 和 macrotasks的关系)

d.进入正题，查看v3 核心目录数据监听

e.楼主是跟着这篇文章走的链接讲的真的很好主要是带你看懂v3核心部分（当然是看了2遍后更加感悟的。）

不过我推荐先看这个链接主要是因为这部分我们主要讨论数据监听我们按着上面我推荐的文章开始学习

f.当你看了这篇文件第一大段的时候我相信你已经了解 v3核心的数据监听是new proxy 进行对象代理那么你内心一定想问这和v2 的 Object.defineProperty 有什么区别呢或者你还不知道 proxy 是个什么东西？

g. 那我推荐这个文章链接这里讲了 proxy 是如何进行代理的以及最重要的或者以后面试人员可能会问的痛点 v2 v3 代理的区别我简单总结2点 1 ）Object.defineProperty 存在缺陷无法监听数组（这也是v2项目为什么声明变量的时候尽量减少使用数组的关系） 2） proxy 属于es6 多了很多全新的实用的api 将v2中用繁琐代码实现的功能一个api搞定（就例如监听数组）

h.看完 g的推荐后我们接着 f里我推荐的文章再次放个链接此时你应该已经看到了

第二部分第一痛点 Proxy API 的一些细节这里我主要强调一下你一定要理解的东西这样如果没达到就反复再去看

第一，proxy是如何监听数组的也就是当他代理数组了那么当我给数组添加值后 set 后一定要返回true 否则报错这是api级别要注意的。

第二，无论是get 还是set 其实我们简单理解就是给对象赋值或者塞值但最后选择使用了 Reflect.get(target, key, receiver) 和 Reflect.set(target, key, value, receiver) 此时你需要理解 Reflect 是什么和 Reflect 的特点链接拿走把里面介绍的api 都敲一遍

i. 第二痛点多次的set/get 这里我主要强调一下

第一,数组set 先试set 最大索引的值然后重新 set 数组length的长度

j. 第三痛点 proxy只代理一层这里我主要强调一下

第一，proxy相对v2的defineproprety 可以监听数组了但是对于多层次结构还是无法做到的

k. 针对上面的3痛点文章给出了解决方案这里大家只需要理解思路即可不必过多纠结 v3里处理的相对会更巧妙

l.文章最后简述了 v3 处理的方法在这里我建议了解即可因为我在这也花了部分时间但是其实还是应该在v3源码里去理解更好些主要看懂了也串联不上适合二次阅读当然文章是真的好

m. 此时我们回到e 的第一个链接开始学习v3 代码

到这里数据侦测如果你学会了那么你应该也可以写一个简单的demo了这里我也是自己仿造了一个注意此时一定要能独立完成这个数据监测当然我这个例子回显数据的时候也没有太完整只是一个简例不必过多纠结

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id = 'gq'></div>
    name:<input type="text" oninput="changeInput(this,'name')">
    age:<input type="text" oninput="changeInput(this,'age')">
</body>
<script>
    const tip = (v) => document.querySelector('#gq').innerHTML = `值是${JSON.stringify(v)}`
    const isObject = (val) => val != null && typeof val == 'object'
    function gqProxy(t) {
        return new Proxy(t,{
            get(target, p, value) {
                const res = Reflect.get(target,p,value)
                // 如果返回的是对象 则需要递归代理
                if(isObject(res)){
                   return  gqProxy(res)
                }
                return res
            },
            set(target, p, value, receiver) {
                const set2 = Reflect.set(target,p,value)
                tip(receiver)
                return true
            }
        })
    }
    let t1 = {
        name:'gq',
        age:[18,19]
    }
    let t1_proxy = gqProxy(t1)
    tip(t1)
    const changeInput = (e,param) => isObject(t1_proxy[param]) ? t1_proxy[param].push(e.value): t1_proxy[param] = e.value
</script>
</html>

n.完成上述后我们开始阅读 v3 reactive.ts里的代码此时如果你的es6语法不是很了解那么看起来会有些吃力这里给你一个链接遇到问题可以对照理解读 reactive的时候在文章里的秘径追踪里跟着MARK 去理解

o. 从 reactive 开始到 createReactiveObject 搜的第一个点 weakmap 这是es6 里的一个map集合相关的 weakset等那么我们就该去了解一下是如何使用的而且优点在哪 weakmap 存储的特点是什么

这里你了解后会涉及到 js 的垃圾回收机制那么可以去学习一下 node.js 的垃圾回收机制自己去试一试这里提供一些手动测试js 垃圾回收机制的指令

node --expose-gc
- 参数 --expose-gc 表示允许手动执行垃圾回收机制。
global.gc() 手动执行一次垃圾回收
process.memoryUsage() 查看内存占用状态 heapUsed 内存占用
- process.memoryUsage() 方法返回Node.js进程的内存使用情况的对象，该对象每个属性值的单位为字节。
- heapTotal和 heapUsed 代表V8的内存使用情况。 external代表V8管理的，绑定到Javascript的C++对象的内存使用情况。 rss, 驻留集大小, 是给这个进程分配了多少物理内存(占总分配内存的一部分) 这些物理内存中包含堆，栈，和代码段。对象，字符串，闭包等存于堆内存。变量存于栈内存。实际的JavaScript源代码存于代码段内存。