vue原理思考

对于一个a.vue文件(组件)，它有template，script,style三部分，使用的时候需要先import a from ./a.vue 经过vue-loader处理后 ， a 其实变成了一个

如何将这个模板<div class='red'></div >转化为Ast,在上节基础上。 需要做的是消除空字符以及对标签属性的解析 消除空字符需要用到正则 处理完空字符之后使用parseAttrib

编译器的第一步是将`模板字符串`解析为`抽象语法树（AST）`。这个AST表示模板的结构和层次关系，它包含了模板中的标签、属性、文本内容等等，并且将它们组织成一个`树状结构`。

Vue3之Teleport实现原理对于更新，只需要调用`patchChildren`比较子节点并替换。但是如果是Teleport组件的to属性改变了，代表要修改挂载点。因为子节点已经被替换，所以只需要

异步组件利用了动态import,下面链接指向对应的文档。 静态导入(The static import declaration) 动态导入(dynamic import, is a function-

Vue3中初始化一个程序: 将App(根组件)作为createApp的参数，返回一个app实例(对象)，再调用实例中的mount方法，将应用程序渲染到 id 为 'app' 的 HTML 元素中 那么

源码层面的优化 源码优化面向的是框架的开发者，目的是让框架本身的代码更易于开发和维护。源码的优化主要体现在使用monorepo和TypeScript开发和管理源码. Vue2的源码统一放在src下，3

Vue的 KeepAlive 组件可以避免被它包裹的组件被频繁地 销毁/重建。 例如 如果 Tab组件没有被KeepAlive包裹，v-if将真实的卸载DOM，挂载DOM。我们都知道这是很消耗性能的。

那么如果我们现在遇到了一个组件,应该怎么处理它呢.首先我们先来看看组件里有什么. 一个组件必须包含一个渲染函数，即 render 函数，并且render的返回值应该是虚拟 DOM。换句话说，组件的渲染

Vue3中使用的就是快速Diff算法性能优于Vue2所采用的双端 Diff 算法 可能其他的文章会让你先看一道算法题,即力扣第300题最长递增子序列,对于没有算法基础的同学理解会有困难. 里面涉及到动

先拿上一节简单Diff作比较 简单Diff在这种情况下要移动两次,但是我们可以直接看出只需要移动key为3的元素既可,也就是一次移动. 其实双端Diff并不复杂,也就是首首,尾尾,首尾,尾首比较.先获

key 属性就像虚拟节点的“身份证”号，只要两个虚拟节点的 type 属性值和 key 属性值都相同，那么我们就认为它们是相同的，即可以进行 DOM 的复用 先从最简单的情况开始(只修改内容),只需要

通常使用英文 renderer 来表达渲染器,作用是把虚拟 DOM(VNode) 渲染为特定平台上的真实元素(不只是浏览器). 另外还需要给他指定一个挂载的位置,他是一个DOM元素也就是容器,文章之后

proxy effect bucket 先解释一下这几个东西，proxy是用来监听对象的get set 操作，effect是注册副作用函数的函数，bucket是存放副作用的容器，即在副作用函数与被操作

执行调度 当触发trigger副作用函数重新执行时，能够决定副作用函数执行的时机、次数等。如何处理：给effect再添加一个参数，提前说明他是一个对象，因为以后还会包含其他选项。判断注册副作用函数时是

纠正一个问题 实现watch 首先说明watch的实现也需要effect加调度器，先实现一个基础的watch 上面只能监听一个属性，现在需要监听传入对象的任意属性都能触发 watch的参数也能传入一个

简单数据类型的代理 简单数据类型需要使用ref，实际上ref的背后还是reactive.本质是手动给他加一层，并且给他一个ref的标记__v_isRef setup暴露出的响应式对象，经过...会失去

Reflect Reflect函数还能接收一个参数，即指定接收者 receiver，你可以把它理解为函数调用过程中的 this 对下面的对象进行代理 当我们使用 p.bar 访问 bar属性时，它的