文件系统格式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

好家伙，这是diff的最后一节了 0.暴力比对的使用场景 没有可复用的节点：当新旧虚拟DOM的结构完全不同，或者某个节点不能被复用时，需要通过暴力比对来创建新的节点，并在真实DOM上进行相应的插入操作。0.1.例子一：//创建vnodeletvm1=newVue({data:{name:'张三'

好家伙, 本节来解决我们上一章留下来的问题,新旧节点同时有儿子的情况本章继续解决 1.要做什么?本章将解决,1.在相同tag下子元素的替换问题2.使用双指针进行元素替换,实现效果如下: letvm1=newVue({data:{name:'张三'}})letrender1=compileToFunc

1.环境准备初始化项目：npxcreate-react-appsimple-react删除一些代码，最关键的内容就是：src/index.jspublic/index.htmlpackage.json中的dependencies和scripts：2.JSX介绍JSX是JavaScript的一种语法扩展。JSX到普通Javascript的代码的转化是通过babel完成的。3.React.createElement编

好家伙，本篇将会解释要以下效果的实现 1.目标我们要实现以下元素替换的效果gif: 以上例子的代码://创建vnodeletvm1=newVue({data:{name:'张三'}})letrender1=compileToFunction(`<a>{{name}}</a>`)letvnode1=render1.call(vm1)doc

抽空看了下vue源码，记录下newVue()的过程。 在package.json中运行命令添加sourcemap,打包后在源码案例目录下创建新的html文件，运行后可以在控制台断点调试 测试代码<scriptsrc="../../dist/vue.js"></script><divid="demo"><p@click="searchQuery=333">{{sear

<template><divclass="about"><h1>Thisisanaboutpage</h1><el-buttontype="primary"size="default"@click="onTest">测试</el-button><div></div&

好家伙， 前情提要：在上一篇我们已经成功将ast语法树转换为渲染函数 现在我们继续 1.项目目录代码已开源https://github.com/Fattiger4399/analytic-vue.git手动调试一遍,胜过我解释给你听一万遍新增文件：vnode/index.js  vnode/patch.js  lifecycle.js 2.虚

好家伙, 昨天,在学习vue源码的过程中,看到了这个玩意嘶,看不太懂,研究一下 1.上下文这段出现vue模板编译的虚拟node部分exportfunctionrenderMixin(Vue){Vue.prototype._c=function(){//创建标签returncreateElement(...arguments)

在某些情况下，我们需要对底层DOM进行操作，而内置的指令不能满足需求，就需要自定义指令。一个自定义指令由一个包含类似组件的生命周期的钩子的对象来定义，钩子函数会接收到指令所绑定的元素作为参数。定义指令常用两种方式进行自定义指令，一种是全局定义，另一种在当前组件中定义//局

什么是keep-alive“keep-alive”是Vue.js中的一个特殊组件，用于缓存组件的状态，以提高应用性能。在Vue.js中，组件通常是动态创建和销毁的，当切换到另一个页面或组件时，之前的组件会被销毁，再次进入时会重新创建和初始化。这样可能导致组件的状态丢失，需要重新初始化，增加了资源的消耗

前言大家好我是歌谣今天给大家带来react源码部分的实现创建项目首先npxcreate-react-appxxx降为17"dependencies":{"@testing-library/jest-dom":"^5.11.4","@testing-library/react":"^11.1.0","@testing-library/user-event&

一、虚拟DOM1.什么是虚拟DOM？一个用来表示真实DOM节点的JS对象，主要包含标签名tag、属性attrs和子元素对象children属性等。代码示例如下：<divclass="contain"id="baseNo"><h4class="item">标题</h4><pclass="item">段落内容</p>&