web学习笔记

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开始，遍历到叶子节点，每次遍历到...