Vue 技术栈(全家桶)

尚硅谷前端研究院

第 1 章：Vue 核心

• Vue 简介官网英文官网: https://vuejs.org/中文官网: https://cn.vuejs.org/

网上看了一些diff的算法，但是感觉看完之后，还是那么的一知半解，为什么一个简单的diff算法，不能直接画个流程图就简单的明了了呢，说动就动，下面的是本人基于vue版本2.6.11源码为各位读友进行的解析

Vue的diff流程图

流程前说明

1. 由于diff的过程是对vnode（虚拟dom）树进行层级比较，所以以同一层级作为例子

Vue Flow 是一个轻量级的 Vue 3 组件库，它允许开发者以简洁直观的方式创建动态流程图。本篇文章记录一下Vue Flow的基本用法

安装

npm add @vue-flow/core

大家好，我是逍遥的码农，今天分享一下我制作的vue框架中模板编译过程的流程图，做这张图大概用了半个月时间，希望对大家有帮助。

说一下为什么要做这张图

1.看源码需要几个文件翻来翻去，很麻烦

2.如果一个过程跨了三四个页面，很容易看到后面已经忘了前面的内容，前后联系建立不起来

3.强迫症比较严重，想弄清楚模板编译的所有细节

流程图内容：几乎包括了模板编译的所有流程和代码以及重要代码的解释，文本解析和过滤器解析的过程没有加入，因为比较有代表性，所以打算单独拿出来进行讲解。