web学习笔记

  上传到github 先git init, git add . ,git commit -m ' ', 再关联远程库 Git 中的三个 区域 ：工作区、暂存区、Git 仓库。 工作区：处理工作的区域 暂存区：已完成的工作的临时存放区域，等待被提交 Git 仓库：最终的存放区域 Git 中的三种 状态 ：已修改 modified 已暂存 staged 已提交 committed 已修改 ：表示修改了文件，但还没将修改的结果放到暂存区。 已暂存 ：表示对已修改文件的当前 版本做了标记，使之包含 在下次提交的列表中。 已提交 ：表示文件已经安全地保存 在本地的 Git 仓库中。 注意： ⚫ 工作区的文件被修改了，但还没有放到暂存区，就是已修改状态。 ⚫ 如果文件已修改并放入暂存区，就属于已暂存状态。 ⚫ 如果 Git 仓库中保存着特定版本的文件，就属于已提交状态。 Git的基本操作 git init 命令会创建一个名为 .git 的隐藏目录，这个 .git 目录就是当前项目的 Git 仓库，里面包含了初始的必要文件，这些文件是 Git 仓库的必要组成部分。 git add 开始跟踪一个文件，git add . 一次性将所有的新增和修改过的文件加入暂存区 git status 命令查看文件处于什么状态 git commit 命令进行提交, 其中 -m 选项后面是本次的提交消息，用来对提交的内容做进一步的描述： git commit - m '什么信息' 跳过使用暂存区域 Git 标准的工作流程是 工作区 → 暂存区 → Git 仓库 。Git 工作的流程简化为了 工作区 → Git 仓库 。 git commit - a - m '描述信息' 移除文件 从 Git 仓库中移除文件的方式有两种： ① 从 Git 仓库和工作区中同时移除对应的文件 ② 只从 Git 仓库中移除指定的文件，但保留工作区中对应的文件 Git分支的概念 master 主分支 功能分支 创建新分支 git branch 分支名称 基于当前分支，创建一个新的分支，创建好分支后，当前位置还是在master分支上 切换分支 git checkout 分支名称 可以切换到指定的分支上进行开发 分支的快速创建...

1、mvvm M：模型Model --->也就是data中的数据 V：视图View --->也就是dom VM：视图模型ViewModel --->也就是Vue实例（vm） 2、 vue响应式原理 核心api object.defineProperty vue响应式也叫作数据双向绑定，大致原理阐述： 首先我们需要通过Object.defineProperty()方法把数据(data)设置为getter和setter的访问形式，这样我们就可以在数据被修改时在setter方法设置监视修改页面信息，也就是说每当数据被修改，就会触发对应的set方法，然后我们可以在set方法中去调用操作dom的方法。 此外，如果页面有input用v-model绑定数据，我们需要在这种绑定了data的input元素上添加监听，添加input事件监听，每当input事件被触发时，就修改对应的data 原文链接： https://blog.csdn.net/weixin_48181168/article/details/120158346 vue3启用proxy https://blog.csdn.net/pagnzong/article/details/120389514 代码 proxy和object.defineProperty响应式的对比 vue2响应式的缺点： 检测不到对象属性的添加和删除 （需要使用vue.set, vue.delete） 数组 API 方法无法监听到 (需要特殊处理) 深度监听需要递归到底，造成性能问题 proxy解决的问题 克服了vue2响应式的问题 缺点：没有兼容ie等其他浏览器，无法实现polyfill 3、diff算法 当数据发生改变时，订阅者 watcher 就会调用 patch 给真实的 DOM 打补丁 通过 isSameVnode 进行判断，相同则调用 patchVnode 方法 patchVnode 做了以下操作： 找到对应的真实 dom ，称为 el 如果都有都有文本节点且不相等，将 el 文本节点设置为 Vnode 的文本节点 如果 oldVnode 有子节点而 VNode 没有，则删除 el 子节点 如果 oldVnode 没有子节点而 VNode 有，则将 VNode 的子节点真实化后添加到 el 如果两者都有子节点...

1. react的架构 https://juejin.cn/post/7211072055780573221#heading-0 https://juejin.cn/post/6926432527980691470 作为架构来说，之前 React15 的 Reconciler 采用递归的方式执行，数据保存在递归调用栈中，所以被称为 stack Reconciler 。 React16 的 Reconciler 基于 Fiber节点 实现，被称为 Fiber Reconciler 。 新版React架构分为三大部分： Scheduler调度器： 排序优先级，让优先级高的任务先进行reconcile Reconciler协调器：接受更新，创建虚拟dom树，找出哪些节点发生了改变，并打上不同的effectTag Renderer渲染器：将Reconciler中打好标签的节点渲染到视图上 Fiber这种数据结构后，能完成哪些事情呢， 工作单元 任务分解 ：Fiber最重要的功能就是作为工作单元，保存原生节点或者组件节点对应信息（包括优先级），这些节点通过指针的形似形成Fiber树 增量渲染 ：通过jsx对象和current Fiber的对比，生成最小的差异补丁，应用到真实节点上 根据优先级暂停、继续、排列优先级 ：Fiber节点上保存了优先级，能通过不同节点优先级的对比，达到任务的暂停、继续、排列优先级等能力，也为上层实现批量更新、Suspense提供了基础 保存状态： 因为Fiber能保存状态和更新的信息，所以就能实现函数组件的状态更新，也就是hooks 2. render阶段 render：Reconciler工作的阶段被称为render阶段。因为在该阶段会调用组件的render方法 render阶段的主要工作是构建Fiber树和生成effectList 开始工作前会先找到div#root对应的 rootFiber，称为 hostRootFiber ，然后开始生成 wip Fiber树 。 这个过程分为两个部分：beginWork 和completeWork。 这是一个深度优先遍历的过程。 beginwork :主要的工作是创建或复用子fiber节点（同时涉及到diff算法，为结点打上effectTags） 从根节点rootFiber开始，遍历到叶子节点，每次遍历到...