Vue源码解析：模版字符串转AST语法树

了不起的厂长

2019-06-29

通过对 Vue2.0 源码阅读，想写一写自己的理解，能力有限故从尤大佬2016.4.11第一次提交开始读，准备陆续写：
模版字符串转AST语法树
AST语法树转render函数
Vue双向绑定原理
Vue虚拟dom比较原理
其中包含自己的理解和源码的分析，尽量通俗易懂！由于是2.0的最早提交，所以和最新版本有很多差异、bug，后续将陆续补充，敬请谅解！包含中文注释的Vue源码已上传...

问题

什么是AST？
AST（abstract syntax tree）意为抽象语法树，其实就是树形数据结构的表现形式，有父节点、子节点、兄弟节点等概念...
本身就是树形结构的HTML为什么还要转化？
因为真实DOM含不需要的属性太多了，如果筛选出我们需要的属性，再对其进行操作，将大大优化性能！
AST和虚拟节点vnode有什么关系？
它们结构很相似，AST其实算得上是vnode的前身，AST经过一系列的指令解析、数据渲染就会变成vnode！这边的AST其实只是简单的html解析。

开始

举个

了不起的厂长

0 关注 0 粉丝 0 动态

相关推荐

Vue源码中值得学习的方法

最近在深入研究vue源码，把学习过程中，看到的一些好玩的的函数方法收集起来做分享，希望对大家对深入学习js有所帮助。如果大家都能一眼看懂这些函数，说明技术还是不错的哦。

源码zanqunet 2020-10-28

Vue进阶面试必问，异步更新机制和nextTick原理

vue已是目前国内前端web端三分天下之一，同时也作为本人主要技术栈之一，在日常使用中知其然也好奇着所以然，另外最近的社区涌现了一大票vue源码阅读类的文章，在下借这个机会从大家的文章和讨论中汲取了一些营养，同时对一些阅读源码时的想法进行总结，出产一些文章

anchongnanzi 2020-09-21

深入解析 Vue 的热更新原理，尤大是如何巧用源码中的细节？

本文转载自微信公众号「前端从进阶到入院」，作者ssh前端。想知道这背后是怎么实现的吗，其实代码并不复杂。这个功能的实现底层用了vue-hot-load-api[1]这个库，得益于 vue 的良好设计，热更新的实现总共就一个 js 文件，200 行代码

CRMCRMCRMDS 2020-08-12

手写Vuex源码

Vuex是基于Vue的响应式原理基础，所以无法拿出来单独使用，必须在Vue的基础之上使用。首先我们要清楚Vuex的定位，它是一个插件。且必须基于之上Vue来使用，为什么这么说呢，因为他的数据响应是基于Vue的。③ Mutation 进行Vuex中store

Cricket 2020-07-27

Vue中使用JsonView来展示Json树的实例代码

前两天干活儿有个需求，在前端需要展示可折叠的Json树，供开发人员查看，这里采用JsonView组件来实现，它是一款用于展示Json的Vue组件，支持大体积的Json文件快速解析渲染，下面记录一下实现过程。{{item.value + (index ===

yuzhu 2020-11-16

详解Vue数据驱动原理

Vue区别于传统的JS库，例如JQuery，其中一个最大的特点就是不用手动去操作DOM，只需要对数据进行变更之后，视图也会随之更新。比如你想修改div#app里的内容:. 在代码层面上的最大区别就是，JQuery直接对DOM进行了操作，而Vue则对数据进行

85477104 2020-11-17

vue+echarts+datav大屏数据展示及实现中国地图省市县下钻功能

随着前端技术的飞速发展，大数据时代的来临，我们在开发项目时越来越多的客户会要求我们做一个数据展示的大屏，可以直观的展示用户想要的数据，同时炫酷的界面也会深受客户的喜欢。大屏展示其实就是一堆的图表能够让人一目了然地看到该系统下的一些基本数据信息的汇总，也会有

KANSYOUKYOU 2020-11-16

手把手教你搭建Vue服务端渲染项目

好了，下面开始正文。服务器返回一个包含了引入资源语句和 <div id="app"></div> 的 HTML 文件。服务器会查看当前路由组件需要哪些资源文件，然后将这些文件的内容填充到 HTML 文件。如果有

sjcheck 2020-11-03

Vue项目技巧这些你知道吗？

其实有很多人的项目可能都是直接 vue-cli 那一套，但是事实上，当项目稍微上一点规模，你需要对你的项目进行一个重新的架构。通常我们说的基础库包括-组件库、基础 css 库、基础工具库；2、层级管理。我们可以利用 cookie 或者 localstore

怪我瞎 2020-10-28

为 Vue 的惰性加载加一个进度条

通常用 Vue.js 编写单页应用时，当加载页面时，所有必需的资源都会被一起加载。在处理大文件时，这可能会导致用户体验不佳。借助 Webpack，可以用 import() 函数而不是 import 关键字在 Vue.js 中按需加载页面。Vue.js 中

gloria0 2020-10-26

你不得不知道的Vue项目技巧

一个基础库可能会耗费一定的开发时间，但是如果项目具有一个优秀的基础库作为支持，可以让项目推进的更快速。通常我们说的基础库包括-组件库、基础 css 库、基础工具库;我们可以利用 cookie 或者 localstore 缓存一下商品详情，如果这个商品的详

王军强 2020-10-21

超优秀 Vue3.0 开源UI组件库

之前就有很多小伙伴询问vue3组件库相关的问题。趁着vue.js 3.0发布的热潮，就给大家推荐几个Vue3 Beta组件库。有哪些互联网大厂率先推出自己的Vue3组件库呢？Vant有赞团队推出的Vue移动端组件库，已经完成并发布Vue3.0 beta版本

学习web前端 2020-09-28

聊聊技术选型 - Angular2 vs Vue2

目前没法确切的评估未来一段时间这两个框架的维护情况，但基本能确定的是，框架的生命周期不会比我们大部分业务的生命周期短。从国内的使用情况以及社区发展来看，Vue 更胜一筹。从学习曲线上看，Angular 要更陡峭，Vue 要相对平缓一些。从能够开发的应用的全

QiaoranC 2020-09-25

vue项目打包为APP,静态资源正常显示,但API请求不到数据的操作

Vue项目通过Hbuild打包为APP后，静态文件正常显示，但并没有像开发时那样请求到数据。因为APP并没有跨域，不存在跨域一说。在开发时这样做是没错的，但我们在打包时就不用设置这个跨域了，打包前直接将这个跨域注释掉，然后将API请求地址改为绝对地址。如果

安卓猴 2020-09-12

vue Cli 环境删除与重装教程 - 版本文档

vue-cli 3.0+版本，使用的不是vue-cli，而是@vue/cli；如果用以上的安装命令安装的并不是最新版的3.0+的，而如果安装3.0的话就需要使用新的命令。　　　　dry: false, //设置为f

Macuroon 2020-09-11

Vue axios获取token临时令牌封装案例

为什么非要写这个博客呢？因为这件事让我有一种蛋蛋的优疼。剩下的都别问，反正问我也不会说。因为流程图我都不想（懒得）画。关于token设计方案的初步设想是这样的：第一次进入的时候获取token，后端检查签名是否通过。不通过则弹框请从合法途径进入页面并且不消失

kiven 2020-09-11

Vue proxyTable配置多个接口地址,解决跨域的问题

最开始的时候，因为请求后台出现跨域问题。查找资料配置proxyTable，解决跨域问题。后面遇到需要连接不同的接口域名，我在proxyTable里增加了一个apiGas。axios请求存在获取得到api但是不能获取apiGas。查找了很多资料都没有具体的解

LittleCoder 2020-09-11

springcloud vue 分布式 flowable工作流前后分离有代码生成器

三：系统服务 -----------------------------------------------------------------------------------------------------1. 权限管理：点开二级菜单进入三级菜单

Cheetahcubs 2020-09-13

他写出了 Vue，却做不对这十道 Vue 笔试题

请原谅我起了这么个浓浓营销号味道的标题。但这可丝毫没有夸大宣传，而是前端娱乐圈今日份的瓜——。有十道关于 Vue 的选择题，在群里引出了一众社区知名人士竞折腰，最后钓出了@尤雨溪本人亲自挑战……然后他自己也做错了。鲁迅会做错鲁迅文选的阅读理解？所以，只要

小焊猪web前端 2020-09-10

快速入门Web前端开发的正确姿势

入门标准很简单，就一条：达到能参与 Web 前端实际项目的开发水平。请注意，是实际项目，这就需要了解如今的实际项目开发都用了哪些技术栈。几年前， jQuery + Bootstrap 可以说是一统江湖，是前端领域的绝对霸主。而这几年，随着 Angular

颤抖吧腿子 2020-09-04

了不起的厂长

W3CSchool教程: HTML 教程; CSS 教程; Bootstrap 教程; Javascript 教程; jQuery 教程

后端教程: C 教程; Java 教程; PHP 教程; Python 教程; Go 教程

移动开发: Android 教程; Swift 教程; Kotlin 教程; jQuery Mobile 教程; ionic 教程

关于我们: 新闻动态; 联系方式; 招聘英才; 安科实验室; 帮助与反馈

安科网(Ancii)，中国第一极客网

Copyright © 2013 - 2019 Ancii.com

京ICP备18063983号京公网安备11010802014868号