- 2024-09-11Vue与React的Diff算法
虚拟DOM定义虚拟DOM是一种用于在前端开发中模拟真实DOM的技术。它是一种抽象的数据结构(简单来说就是一个Javascript对象),用于描述HTML或XML文档的结构和内容。通过将页面的状态和结构保存在内存中,而不是直接操作真实的DOM,虚拟DOM能够减少不必要的DOM操作,从而提高页面性能。
- 2024-09-02Vue 2 与 Vue 3 中 keep-alive 组件的深入解析
更多内容前往个人网站:孔乙己大叔 在Vue.js的开发中,keep-alive 是一个非常重要的内置组件,它允许我们将组件状态或实例保持在内存中,避免重新渲染和重新创建组件,这对于需要频繁切换但内容较为复杂的组件场景非常有用,如标签页、列表项的详细视图等。Vue2和V
- 2024-08-25[RT-Thread记录]DFS虚拟文件系统文件夹操作异常
项目场景:系统:RT-Thread5.0.2硬件:STM32H743问题描述1.文件系统打开文件夹再关闭后,申请的内存没有释放2.elm-fatFs文件系统重复操作同一个文件夹,如复制,会引起系统崩溃原因分析: DFS虚拟文件系统文件打开关闭逻辑错误,文件系统版本升级更新后,dfs_file结
- 2024-08-23一文带你读懂vue3中directive指令的那些事
概述vue3中内置了很多丰富实用的指令,如v-show、v-if/v-else或v-model等,但是实际开发中可能我们还需要某些统一的处理,比如交互按钮的防抖,输入框的自动focus等,这时我们就可以通过vue3的directive注册自定义指令。指令指令钩子vue3的自定义指令通常情况下是由一个包含类似
- 2024-08-21[vue3] vue3更新组件流程与diff算法
在Vue3中,组件的更新通过patch函数进行处理。patch函数源码位置:core/packages/runtime-core/src/renderer.tsatmain·vuejs/core(github.com)constpatch:PatchFn=(n1,n2,container,anchor=null,parentComponent=null,parentSuspen
- 2024-08-05[vue3] vue3初始化渲染流程
组件初次渲染流程组件是对DOM树的抽象,组件的外观由template定义,模板在编译阶段会被转化为一个渲染函数,用于在运行时生成vnode。即组件在运行时的渲染步骤是:graphLR A[创建vnode]-->B[渲染vnode]-->C[生成DOM]vnode是一个用于描述视图的结构和属性的JavaScript对象。vnode
- 2024-07-23vuejs设计与实现1-3
Vue1.权衡的艺术2.框架设计的核心要素3.vue.js3设计思路1.权衡的艺术框架设计:在保持可维护性的同时让性能损失最小化;命令式VS声明式从范式上来看,视图层框架分为命令式和声明式。命令式框架:关注过程,性能优;声明式框架:关注结果,可维护性好框架设计需要考虑可
- 2024-06-23inode and vnode
文件系统格式windows:FAT,NTFS;Linux:ext,ext1/2/3/4,xfs;网络:NFS,SMB(sambaSMB/CIFS)云:VFS:Linux&MacOS在文件系统之上虚拟出一层文件系统,VirtualFS;POSIX:portableoperatingsysterminterfaceofUnix.来自用户进程的调用都通过POSIX系统调用(open,read,wr
- 2024-06-02【vue源码】虚拟DOM和diff算法
虚拟DOM与AST抽象语法树的区别虚拟DOM是表示页面状态的JavaScript对象,(虚拟DOM只有实现diff算法)而AST是表示代码语法结构的树形数据结构。虚拟DOM通常用于优化页面渲染性能,而AST通常用于进行代码静态分析、代码转换等操作。(AST主要执行compiler编译)什么是虚拟DOM?用JavaSc
- 2024-04-27VUE知识体系、VUE面试题
1.computed(计算属性)和方法有什么区别?计算属性本质上是包含getter和setter的方法当获取计算属性时,实际上是在调用计算属性的getter方法。vue会收集计算属性的依赖,并缓存计算属性的返回结果。只有当依赖变化后才会重新进行计算。方法没有缓存,每次调用方法都会导致重新执
- 2024-04-06Vue | 底层分析
一、下载vueGit仓库地址:https://github.com/vuejs/vue.gitGitclonehttps://github.com/vuejs/vue.gitPnpminstall(vue是用pnpm管理工具,用npm会报错,用yarn会找不到依赖包)Pnpmrundev学习思路:先自己搜索->描述->再深入源码学习 二、变化侦测0、现象在da
- 2024-03-26v-if 和 v-show 的区别
v-if能够控制是否生成vnode,也就间接控制了是否生成对应的dom。当v-if为true时,会生成对应的vnode,并生成对应的dom元素;当其为false时,不会生成对应的vnode,自然不会生成任何的dom元素。v-show始终会生成vnode,也就间接导致了始终生成dom。它只是控制dom的display属性,当v-show为true时
- 2024-03-04说说你对keep-alive的理解是什么?
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助一、Keep-alive是什么keep-alive是vue中的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOMkeep-alive 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们keep-alive可以设置以下props属性:i
- 2024-03-04Vue源码解读:render和VNode
Vue2.0相比Vue1.0最大的升级就是利用了虚拟DOM。在Vue1.0中视图的更新是纯响应式的。在进行响应式初始化的时候,一个响应式数据key会创建一个对应的dep,这个key在模板中被引用几次就会创建几个watcher。也就是一个key对应一个dep,dep内管理一个或者多个watcher
- 2024-02-09零基础入门Vue之拘元遣将——其他常用指令&自定义指令
回首在零基础入门Vue之梦开始的地方——插值语法我记录了v-bind、v-on、v-model的学习在零基础入门Vue之Tobeornottobe——条件渲染我记录了v-if、v-else-if、v-else、v-show的学习在零基础入门Vue之影分身之术——列表渲染&渲染原理浅析我记录了v-for的学习为了推
- 2023-12-22探究vue的diff算法
1.diff算法是什么?diff算法是一种通过**同层的树节点**进行比较的高效算法Diff算法探讨的就是虚拟DOM树发生变化后,生成DOM树更新补丁的方式。对比新旧两株虚拟DOM树的变更差异,将更新补丁作用于真实DOM,以最小成本完成视图更新。1.1特点策略:深度优先,同层比较1.2原理分析
- 2023-12-08Vue2 的 diff 算法详解
所谓diff算法,就是通过比对新旧两个虚拟节点不一样的地方,针对那些不一样的地方进行新增或更新或删除操作。接下来详细介绍节点更新的过程。首先进行静态节点处理,判断新旧两个虚拟节点是否是静态节点,如果是,就不需要进行更新操作,可以直接跳过更新比对的过程。再更新处理新老节点
- 2023-11-17vue2.0源码简读(5. 扩展)
5.1event平时开发工作中,处理组件间的通讯,原生的交互,都离不开事件。对于一个组件元素,不仅仅可以绑定原生的DOM事件,还可以绑定自定义事件,非常灵活和方便。那么接下来从源码角度来看看它的实现原理。为了更加直观,通过一个例子来分析它的实现:letChild={template:'<button
- 2023-11-13vue的虚拟dom渲染真实dom的过程中首先会对新老VNode的开始和结束位置进行标记:oldStartIdx、oldEndIdx、newStartIdx、newEndIdx
关于Vue中的diff算法说法错误的是()A比较只会在同层级节点进行比较,不会跨层级比较B在diff比较的过程中,循环从两边向中间收拢。Cvue的虚拟dom渲染真实dom的过程中首先会对新老VNode的开始和结束位置进行标记:oldStartIdx、oldEndIdx、newStartIdx、newEndIdxD当老VNode节
- 2023-11-11练习
//统计出单链表L中结点的值等于给定值x的结点数;typedefstructLNode{ intdata; structLNode*next;}LNode,*linklist;intcount_x(linklist&L,intx){ if(!L)return0; LNode*vnode=newLNode; vnode->next=L; linklistp=vnode; intcount=0; while