前言现有框架几乎都引入了虚拟DOM来对真实DOM进行抽象，也就是现在大家所熟知的VNode和VDOM，那么为什么需要引入虚拟DOM呢？下面就一起来了解下吧！！！VNode&VDOMVNode和VDOM是什么？直接看vue3中关于VNode部分的源码，文件位置：packages\runtime-core\src\vnode.ts

前言前面的文章中提到组件更新时，需要先执行编译器生成的渲染函数得到组件的vnode，而渲染函数生成vnode则是通过其中的_c、_l、、_v、_s等方法实现的.比如：普通节点被编译成了可执行_c函数v-for节点被编译成了可执行的_l函数…那么下面就一起来了解一下，什么

一、什么是虚拟DOM虚拟DOM（VirtualDOM）这个概念相信大家都不陌生，从React到Vue，虚拟DOM为这两个框架都带来了跨平台的能力（React-Native和Weex）实际上它只是一层对真实DOM的抽象，以JavaScript对象(VNode节点)作为基础的树，用对象的属性来描述节点，最终可以通过一

模版本质是个函数，模版执行最终生成一个vnode。vnode渲染到浏览器的DOM元素上，vnode让组件修改之后作更新。（响应式监听属性变化，属性变化之后生成新的render函数，进而生成新的vnode）with语法（有点反规则慎用）图灵完备：顺序执行循环判断的语言Vue组件可以用render代替

1.组件化基础如何理解MVVM?-----很久以前就有组件化，数据驱动视图（MVVM，setState）Vue、React框架的出现，使得我们可以直接去操控数据而不是原始的DOM节点。View：视图DOMModel：VUE组件里的data或者Vuex里state里面的数据。两者之间通过ViewModel相关联，使得我们在Model修改的

虚拟DOM定义虚拟DOM是一种用于在前端开发中模拟真实DOM的技术。它是一种抽象的数据结构（简单来说就是一个Javascript对象），用于描述HTML或XML文档的结构和内容。通过将页面的状态和结构保存在内存中，而不是直接操作真实的DOM，虚拟DOM能够减少不必要的DOM操作，从而提高页面性能。

更多内容前往个人网站：孔乙己大叔        在Vue.js的开发中，keep-alive 是一个非常重要的内置组件，它允许我们将组件状态或实例保持在内存中，避免重新渲染和重新创建组件，这对于需要频繁切换但内容较为复杂的组件场景非常有用，如标签页、列表项的详细视图等。Vue2和V

项目场景：系统：RT-Thread5.0.2硬件：STM32H743问题描述1.文件系统打开文件夹再关闭后，申请的内存没有释放2.elm-fatFs文件系统重复操作同一个文件夹，如复制，会引起系统崩溃原因分析：        DFS虚拟文件系统文件打开关闭逻辑错误，文件系统版本升级更新后，dfs_file结

概述vue3中内置了很多丰富实用的指令，如v-show、v-if/v-else或v-model等，但是实际开发中可能我们还需要某些统一的处理，比如交互按钮的防抖，输入框的自动focus等，这时我们就可以通过vue3的directive注册自定义指令。指令指令钩子vue3的自定义指令通常情况下是由一个包含类似

在Vue3中，组件的更新通过patch函数进行处理。patch函数源码位置：core/packages/runtime-core/src/renderer.tsatmain·vuejs/core(github.com)constpatch:PatchFn=(n1,n2,container,anchor=null,parentComponent=null,parentSuspen

组件初次渲染流程组件是对DOM树的抽象，组件的外观由template定义，模板在编译阶段会被转化为一个渲染函数，用于在运行时生成vnode。即组件在运行时的渲染步骤是：graphLR A[创建vnode]-->B[渲染vnode]-->C[生成DOM]vnode是一个用于描述视图的结构和属性的JavaScript对象。vnode

Vue1.权衡的艺术2.框架设计的核心要素3.vue.js3设计思路1.权衡的艺术框架设计：在保持可维护性的同时让性能损失最小化；命令式VS声明式从范式上来看，视图层框架分为命令式和声明式。命令式框架：关注过程，性能优；声明式框架：关注结果，可维护性好框架设计需要考虑可

文件系统格式windows:FAT,NTFS;Linux:ext,ext1/2/3/4,xfs;网络：NFS,SMB（sambaSMB/CIFS）云：VFS：Linux&MacOS在文件系统之上虚拟出一层文件系统，VirtualFS；POSIX：portableoperatingsysterminterfaceofUnix.来自用户进程的调用都通过POSIX系统调用(open,read,wr

虚拟DOM与AST抽象语法树的区别虚拟DOM是表示页面状态的JavaScript对象，(虚拟DOM只有实现diff算法)而AST是表示代码语法结构的树形数据结构。虚拟DOM通常用于优化页面渲染性能，而AST通常用于进行代码静态分析、代码转换等操作。（AST主要执行compiler编译）什么是虚拟DOM？用JavaSc

1.computed（计算属性）和方法有什么区别？计算属性本质上是包含getter和setter的方法当获取计算属性时，实际上是在调用计算属性的getter方法。vue会收集计算属性的依赖，并缓存计算属性的返回结果。只有当依赖变化后才会重新进行计算。方法没有缓存，每次调用方法都会导致重新执

一、下载vueGit仓库地址：https://github.com/vuejs/vue.gitGitclonehttps://github.com/vuejs/vue.gitPnpminstall（vue是用pnpm管理工具，用npm会报错，用yarn会找不到依赖包）Pnpmrundev学习思路：先自己搜索->描述->再深入源码学习 二、变化侦测0、现象在da

v-if能够控制是否生成vnode，也就间接控制了是否生成对应的dom。当v-if为true时，会生成对应的vnode，并生成对应的dom元素；当其为false时，不会生成对应的vnode，自然不会生成任何的dom元素。v-show始终会生成vnode，也就间接导致了始终生成dom。它只是控制dom的display属性，当v-show为true时

这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助一、Keep-alive是什么keep-alive是vue中的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOMkeep-alive 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们keep-alive可以设置以下props属性：i

Vue2.0相比Vue1.0最大的升级就是利用了虚拟DOM。在Vue1.0中视图的更新是纯响应式的。在进行响应式初始化的时候，一个响应式数据key会创建一个对应的dep，这个key在模板中被引用几次就会创建几个watcher。也就是一个key对应一个dep，dep内管理一个或者多个watcher

回首在零基础入门Vue之梦开始的地方——插值语法我记录了v-bind、v-on、v-model的学习在零基础入门Vue之Tobeornottobe——条件渲染我记录了v-if、v-else-if、v-else、v-show的学习在零基础入门Vue之影分身之术——列表渲染&渲染原理浅析我记录了v-for的学习为了推

1.diff算法是什么？diff算法是一种通过**同层的树节点**进行比较的高效算法Diff算法探讨的就是虚拟DOM树发生变化后，生成DOM树更新补丁的方式。对比新旧两株虚拟DOM树的变更差异，将更新补丁作用于真实DOM，以最小成本完成视图更新。1.1特点策略：深度优先，同层比较1.2原理分析

所谓diff算法，就是通过比对新旧两个虚拟节点不一样的地方，针对那些不一样的地方进行新增或更新或删除操作。接下来详细介绍节点更新的过程。首先进行静态节点处理，判断新旧两个虚拟节点是否是静态节点，如果是，就不需要进行更新操作，可以直接跳过更新比对的过程。再更新处理新老节点

5.1event平时开发工作中，处理组件间的通讯，原生的交互，都离不开事件。对于一个组件元素，不仅仅可以绑定原生的DOM事件，还可以绑定自定义事件，非常灵活和方便。那么接下来从源码角度来看看它的实现原理。为了更加直观，通过一个例子来分析它的实现：letChild={template:'<button

关于Vue中的diff算法说法错误的是（）A比较只会在同层级节点进行比较,不会跨层级比较B在diff比较的过程中，循环从两边向中间收拢。Cvue的虚拟dom渲染真实dom的过程中首先会对新老VNode的开始和结束位置进行标记：oldStartIdx、oldEndIdx、newStartIdx、newEndIdxD当老VNode节

//统计出单链表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