前言 大家好，我是林三心，在日常面试中，Diff算法都是绕不过去的一道坎，用最通俗的话，讲最难的知识点一直是我写文章的宗旨，今天我就用通俗的方式来讲解一下Diff算法吧？Lets Go 什么是虚拟DO

想要搞明白 Vue3 的 DOM Diff 核心算法，我们要从一道 LeetCode 真题说起。 LeetCode 真题 300. 最长上升子序列 给定一个无序的整数数组，找到其中最长上升子序列的长度。 可能会有多种最长上升子序列的组合，你只需要输出对应的长度即可。 你算法的时…

模板编译的主要作用是将Vue模板编译为渲染函数，首先将模板解析成AST（抽象语法树），然后使用AST生成渲染函数。 首先我们要知道Vue每次渲染，都会生成一份新的vNode与旧的vNode进行对比，在生成渲染函数之前还会遍历一遍AST，为所有的静态节点做一个编辑，在重新渲染时，…

vue原生的模板编译功能的作用是将模板生成AST，然后通过AST生成渲染函数，再执行渲染函数生成vnode，最后根据vnode进行渲染今天来实现一个简单版的模板编译功能，通过节点筛选和指令解析来完成渲

在上一篇里，我们主要聊了下Vue数据绑定简析，明白了其观察者模式的基本原理。我们知道在观察者中有一种属于渲染函数观察者(vm._watcher)，通过对渲染函数的求值计算来触发依赖收集，进而进行响应式的数据绑定，但是对于渲染函数如何编译却不曾了解。 这一篇我们将通过compil…

说起编译原理，印象往往只停留在本科时那些枯燥的课程和晦涩的概念。作为前端开发者，编译原理似乎离我们很远，对它的理解很可能仅仅局限于“抽象语法树（AST）”。但这仅仅是个开头而已。编译原理的使用，甚至能让我们利用JS直接写一个能运行JS代码的解释器。

写过 Vue 的同学肯定体验过， .vue 这种单文件组件有多么方便。但是我们也知道，Vue 底层是通过虚拟 DOM 来进行渲染的，那么 .vue 文件的模板到底是怎么转换成虚拟 DOM 的呢？这一块对我来说一直是个黑盒，之前也没有深入研究过，今天打算一探究竟。 Vue 3 发…

抽象语法树（abstract syntax code，AST）是源代码的抽象语法结构的树状表示。这里特指编程语言的源代码。 树上的每个节点都表示源代码中的一种结构，之所以说是抽象的，是因为抽象语法树并不会表示出真实语法出现的每一个细节，比如说，嵌套括号被隐含在树的结构中，并没有…

抽象语法树（Abstract Syntax Tree，AST），或简称语法树（Syntax tree），是源代码语法结构的一种抽象表示。它以树状的形式表现编程语言的语法结构，树上的每个节点都表示源代码中的一种结构。 抽象语法树在很多领域有广泛的应用，比如浏览器，智能编辑器，编译…