9月份学习记录
第一章 绪论
1.1 绪论
在计算机行业中，似乎天生带着“难”的底色，面对冰冷的代码、重复的调试， 枯燥感也油然而生。 可这份“难”的背后，也藏着行业独有的吸引力。一方面，计算机行业的薪资水 平，始终处于普通人可触及的高薪行业之列，这份实实在在的回报，成了我咬牙坚持 的动力；另一方面，当我熬过最初的手忙脚乱，会慢慢发现它的有趣之处——解决一 个困扰许久的bug，就像打败了一只难缠的小怪；独立写出一段能运行的代码、完成一个小项目，又像解锁了新的技能关卡，那种从“无从下手”到“豁然开朗”的成就感，让学习过程变得像“打怪升级”般充满乐趣，每一次突破都是对自己的肯定，也让这份成长更有滋味。
第二章 学习方法
在我前端学习过程中呢，遇到了许许多多的问题和困难，那就对于我⽽⾔ 这些⼤致分为两类：1 记忆类。2理解类。
2.1 记忆类
真的就是纯记忆啊，⽐如说 JS 的⼋⼤基本类型：这需要理解吗？不需要吧 我就是⽤谐⾳记的（u so nb）翻译过来就是： undifined string symbol object null number boolean bigint 我⾃⼰实践的确确实实⾼效的⽅法是：通过输出倒逼记忆留存 学习完⼀天的内容后写⼀篇总结⽂章，画⼀个知识图，给他⼈讲解（哪怕是空⽓），讲不明⽩的地⽅就是记忆漏洞。 毫不夸张地说，通过这些就可以把 99%的记忆类知识给搞定了。
2.2 理解类
理解性的东⻄就很神奇，你发现即使你再怎么输出，输出再多，你要是不理解，那就是 “盲⼈骑瞎⻢ —— 没把握” 。这类问题⾸先就是看⽂档，看好⻓时间还是不理 解，就去问AI，AI有时真的既方便又快捷，若还不理解，就去找视频，看了好⼏个视频依旧没有理解，就去问⼤佬，这个佬不⾏就去问那个佬，问完之后请他喝个奶茶，吃个饭应该是没有问题的吧。 一般到这⾥就会理解了，毕竟你前⾯沉淀了那么久，对不对？但如果你的脑⼦像是扭成了一根筋一样，死活不开窍，那我只能说：先把这问题扔边去，过⼏天再来战⽃！ 可不能因为这样⼀个⼩⼩的事情影响咱们的⼼情，影响咱们的⽣活 ！ 毕竟⼈的⼤脑认知⽔平是有限的，等过⼀段时间那些曾经让你绞尽脑汁也理解不了的 东⻄，也许在某⼀个微妙的时刻瞬间就恍然⼤悟了！
第三章 关于JS
3.1 认知迭代
我发现学习是存在认知迭代的, 就是我最开始学习所形成的理解极有可能是一种片面认知, 随着对知识的深入接触, 最终形成了更全面,更本质的理解.
比如有一次当我跟着视频做后台管理系统的时候,遇到了这样一个问题: 就是当我做到一个阻止链接跳转的小demo时(代码如图3.1):
图3.1 阻止链接跳转的代码片段
我以为这个传入的参数e ,目的就是借用e来调用preventDefault() 这个函数. 我把这个e理解为一种媒介,就是换了字母f也行, g也行. 但其实这样理解并不完全正确. 后来在读MDN文档的时候, 才发现这里的e (event) 其实叫做事件对象, e的作用远不止调用prventDefault(),它还包含了事件的核心信息,比如: e.target: 触发事件的DOM元素(比如具体是哪个链接被点击) e.type: 事件类型(如点击事件click, 键盘事件keydown) prventDefault()只是事件对象的一个方法,但事件对象的价值更多体现在它承载的事件细节上.
3.2 拦路虎
3.2.1 发现
记得我第一次学Vue时,没有看文档,只是跟着视频做着一个个小demo, 过了一遍Vue. 可回过头来总结的时候,发现我自己连最基本的reactive的工作原理都没搞清楚. 当研究reactive时, 又发现reactive这个API里面的Proxy是个什么东西啊? 要知道Vue3是基于Proxy实现响应式的 (Vue2使用 Object.defineProperty 实现响应式，但只能监听对象的属性变化) 所以我一定要拿下Proxy
图3.2 用Proxy自定义获取一个对象的属性
可当时看到 处理器, 陷阱, target , 不变式, 反射(reflect) 的时候直接懵了.这都什么意思啊?一大堆不懂的名词扑面而来. 然后我就尝试着理解这些概念, 一天 ,二天, 一周然后越拖越久,直到有一天我看了一下reactive的核心源码实现.
图 3.2.1 有关Proxy中的术语
3.2.2 解决
图 3.2.2 raective的核心源码底层逻辑
因为reactive是对对象的引用,当响应式对象的属性被修改时,依赖该属性的组件就 会自动重新执行. 那么我此时再把proxy的概念带入到reactive中去. handler就相当于是包含get,set 的配置对象 target就相当于那个obj,即被包装成响应式的原始对象 set 和get就相当于是陷阱,,而且陷阱这个名称非常的形象,当代码试图对对象执行 某些操作的时候,这些操作会掉进我预设的陷阱里,而不是直接作用于原始对象
所以这也就印证了Proxy的概念: proxy对象可以拦截某些操作并实现自定义功能. 通过将reactive的核心源码实现与proxy的基本概念对比起来. 就很容易理解proxy究竟是个什么东西了 !
第四章 关于Vue
当时了解到Vue比React更容易上手,所以就先学了Vue 大概4个Vue项目是跟着视频做的 跟着视频的问题是: 即使是很新的视频, 24年的,存在后端接口不能用,崩掉,或者用着用着就过期了等情况
我认为Vue最不好理解的就是Vue的基本原理, 每次看都能有新发现,新认识. Vue的核心思想是数据驱动视图. 传统的DOM操作需要手动修改DOM才能更新视图, 而Vue会让视图自动更新.自动渲染
还有就是Vue的响应式系统, 前面也说到过Vue3的响应式系统主要通过Proxy, Vue2是通过Object.defineProperty. 之前背过一道面试题: Vue和React的区别是什么? 了解到react强调组件化和函数式编程. 并且react对TS的兼容要比Vue强很多 后续未来也会学一下react, 做一做react项目.
第五章 未来计划
首先是夯实基础: 基础打牢真的是太重要了,很多深层次的问题都是建立在基础上的...
然后是多做项目: 多做项目不仅能巩固知识,还能遇见各种各样新的东西
最后是拓宽技术栈: 假如面试官在两份很相似的简历中去筛选,一份:会Three.js ,另一份没有写,那么大概率那位会three.js的人会获得面试机会...
