vue原理

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

    • 如果两者都有子节点，则执行updateChildren函数比较子节点

  • updateChildren

    主要做了以下操作：

    • 设置新旧VNode的头尾指针

    • 新旧头尾指针进行比较，循环向中间靠拢，根据情况调用patchVnode进行patch重复流程、调用createElem创建一个新节点，从哈希表寻找 key一致的VNode 节点再分情况操作

相同点： Vue和react的diff算法，都是不进行跨层级比较，只做同级比较

不同点：

  1. vue会在patch函数中给被操作的节点打补丁（patchflag），在diff的时候更清晰

  2. vue对比节点，当节点元素类型相同，但是className不同时，认为是不同类型的元素，删除重新创建；而react则认为是同类型节点，进行修改操作

  3. diff策略，vue的性能优于react

4、vue组件的渲染和更新流程




完整流程图




评论

发表评论

此博客中的热门博文

react底层原理

图片
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开始，遍历到叶子节点，每次遍历到...
阅读全文

Git操作

图片
  上传到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 分支名称 可以切换到指定的分支上进行开发 分支的快速创建...
阅读全文