Vue源码分析（3）—— 编译原理

最新推荐文章于 2023-10-09 17:31:44 发布

辅助不是混

最新推荐文章于 2023-10-09 17:31:44 发布

阅读量190

点赞数

分类专栏： vue源码总结文章标签： vue

本文链接：https://blog.csdn.net/weixin_44844528/article/details/106265818

版权

vue源码总结专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1. 编译

循环解析字符串，匹配标签起始符，用正则匹配出所有属性，然后入栈，生成该标签的AST节点，建立AST父子关系
匹配标签内文本节点，解析文本字符串，生成执行表达式，生成文本AST，建立AST父子关系
匹配标签结束符，进行出栈操作比对标签，重置参数
进行收尾，防止还有未出栈的标签，返回AST树的根节点

2. 优化

遍历AST树，标记静态节点和非静态节点，静态节点则在更新时直接跳过

3. 生成代码

遍历AST树，递归解析并生成对应AST节点的执行代码，会包括该节点所有的data,event,directive等一系列信息，最终生成整个组件的render函数

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

辅助不是混

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Vue源码分析——第三章

Lee的博客

09-10

601

Vue源码分析——第一章 Vue源码分析——第二章 // only used in dev mode //检测 val必需是数字 function checkDuration(val, name, vnode) { if (typeof val !== 'number') { warn( "<transition> explicit " + name + " duration is not a valid number - " + "got " + ...

Vue源码分析——第一章

Lee的博客

09-09

2020

参与评论您还未登录，请先登录后发表或查看评论

vue-next:个人vue3源码分析-中文注释（编译原理，运行原理）

03-23

vue-next 这是Vue 3.0的存储库。快速开始通过CDN： [removed][removed] 上的浏览器内游乐场通过脚手架： npm init vite-app hello-vue3 # OR yarn create vite-app hello-vue3 通过支架： npm install -g @vue/cli # OR yarn global add @vue/cli vue create hello-vue3 # select vue 3 preset 与Vue 2相比的变化请查阅《。注意：IE11支持仍在等待中。支持图书馆我们所有的官方库和工具现在都支持Vue 3，但其中大多数仍处于beta状态，并在NPM上的next dist标签next分发。我们计划在2021年初稳定并切

从 Vue 3 源码切入，全面掌握前端编译原理

GitChat

11-18

426

这首先是一篇源码剖析 Chat。Vue 3.0 源码发布一月有余。目前针对 Vue 3.0 的源码分析基本围绕响应式原理展开，鲜有对模板编译原理进行分析的。这篇 Chat 首先会带大家来啃下这块“硬骨头”——理解 Vue 3 中的 compiler-core。这同时还是一篇面向任何阶段前端而写的编译原理课程。编译原理作为大厂面试中的热门考点，具备极高的区分度，但其对应的书面学习材料却普遍具备一定...

Vue3 编译原理

最新发布

10-09

611

compile函数涉及到。

Vue3编译器原理

我的博客简介

04-19

357

Vue3编译器是什么将用户编写的模板template 转换为渲染函数render。为什么需要编译器前端程序员更加喜欢使用html格式去描述试图声明式渲染有利于性能优化下面就是直接编写渲染的过程，很显然不方便用户编写代码 <script> const {createApp, h} = Vue createApp({ render() { return h(Vue.Fragment, [ h('h1', 'vue 编译器'),

浅析Vue原理(部分源码解析)

aimolia8633的博客

06-24

143

响应式 Object.defineProperty Object.defineProperty(obj, prop, descriptor) // 对象、属性、描述符　　Object.defineProperty是es5新加的给对象属性设置描述符的方法,可以用来监听属性值的变化 var obj ={}; var _name ='张三' O...

Vue3源码分析——编译模块和编译器

厦门在乎科技

10-30

730

Vue3的编译模块包含4个目录： compiler-core // 编译核心 Compiler-DOM // 浏览器相关 Compiler-sfc // 单文件组件 Compiler-SSR // 服务端渲染其中，compiler-core模块是Vue编译的核心模块，与平台无关。其余三个基于compiler-core，适用于不同的平台。 Vue的编译分为三个阶段，即解析(Parse)、转换(Transform)和代码生成(Codegen)。 Parse阶段将模板字符串转换为语法抽象树...

Vue源码分析——第二章

Lee的博客

09-10

528

/* * Object.defineProperty(person,'name',{ configurable:false,//能否使用delete、能否需改属性特性、或能否修改访问器属性、，false为不可重新定义，默认值为true 是否可以编辑 enumerable:false,//对象属性是否可通过for-in循环，flase为不可循环，默认值为true 是否可以枚举遍历 writable:false,//对象属性是否可修改,flase为不可修改，默认值为true value.

Vue源码分析——Vue的构造函数分解

yolo0927的前端学习之路

10-15

2843

大概按照自己的思路与理解，解读了下 Vue 构造函数的设计过程，本人也是在深入学习阶段，还是一句，多去看看设计思想，而不是琢磨某个api，思想才是学习中最重要的。

编译原理教学辅助系统.zip

04-15

此系统为C语言编写，包含可执行文件，使用vc++6.0打开，如果用vs打开可能会报错，附部分源代码，另包含一份说明文件，仅供参考

vue3编译器原理

我的博客简介

06-22

523

2.vue为什么需要编译器编译器是将一门语言转换另一门语言 vue是声明式渲染编译器会将编译为函数( ) 前端程序员，更加喜欢用描述视图，开发效率高性能优化静态分析 3.vue template 和 react jsx异同？异曲同工都是为了生成虚拟dom js、jsx、ts、tsx 提高前端程序员视图开发效率 jsx：babel转换工具将create函数的调用，最后转换为vdom template：compile编译模板后生成render函数，在未来某个时间执行生成vdom

Vue3模版编译原理

weixin_44719258的博客

08-31

454

Vue3模版编译就是把template字符串编译成渲染函数。我会按照编译流程分3步分析。 parse, transform, generate

vue核心原理之--图解 Vue3.0 编译器核心原理（Vue3.0源码解析）

绝对零度的博客

05-31

2606

图解vue3.0编译器核心原理概览 Vue.js作为目前最流行的前端框架之一，一些概念和原理还是需要我们前端开发人员了解与深入理解的。 Vue.js涉及的知识点很多，一些重要概念，例如：如何使用proxy实现响应式effect，虚拟DOM的Diff算法及演变过程，渲染器原理的实现、编译器、解析器的工资原理及末班编辑的优化过程等等；现在重点采用图解步骤分析一下编译器的简单工作原理；编译器概念编译器其实就是一段JavaScript代码程序，它将一种语言（A）编译成另外一种语言(B)，其中前者A通常被叫做

【Vue原理系列】（一）简要总结Vue3运行时+编译时原理

Younguys

07-01

2152

要讨论vue3的运行时和编译时框架设计，我们可以先来看看什么叫命令式什么叫声明式？首先我们先确定 Vue3是运行时+编译时的框架，其次我们再来看看为什么是？单纯的运行时或者编译时又有什么优缺点呢？命令式框架最突出的就是关注编码过程，例如Jquery就是一个命令式框架哟。所以，命令式就是看中过程，有种隐隐的过程与代码的逻辑一一对应的感觉。声明式更关注结果，内部过程则是予以封装了。例如上面的代码可以用声明式的方式：看起来很简洁吧，这是Vue封装后的。但Vue的内部实现一定是命令式的，只是暴露给开发者的

Vue3.0（正式版）核心技术精讲

04-07

工作一两年，还在做静态页面，能力停滞不前？只接过简单的功能需求，没机会用Vue做完整项目？

Vue3 模板编译原理

分享我的编程经验和学习心得

08-12

715

Vue 的编译模块包含 4 个目录： compiler-core compiler-dom // 浏览器 compiler-sfc // 单文件组件 compiler-ssr // 服务端渲染其中 compiler-core 模块是 Vue 编译的核心模块，并且是平台无关的。而剩下的三个都是在 compiler-core 的基础上针对不同的平台作了适配处理。 Vue 的编译分为三个阶段，分别是：parse、transform、codegen。其中 parse 阶段将模板字符串转化为语法抽象树 AST。

Vue3 模板编译原理 （Vue 的编译模块整体逻辑）

More_Action的博客

11-19

1182

Vue 的编译模块包含 4 个目录： compiler-core compiler-dom // 浏览器 compiler-sfc // 单文件组件 compiler-ssr // 服务端渲染复制代码其中 compiler-core 模块是 Vue 编译的核心模块，并且是平台无关的。而剩下的三个都是在 compiler-core 的基础上针对不同的平台作了适配处理。 Vue 的编译分为三个阶段，分别是：parse、transform、codegen。其中 parse 阶段将模板字符串转化为语法抽象..

vue几种编译_Vue3 模板编译原理

weixin_28700411的博客

01-09

2501

Vue 的编译模块包含 4 个目录：compiler-core compiler-dom // 浏览器 compiler-sfc // 单文件组件 compiler-ssr // 服务端渲染其中 compiler-core 模块是 Vue 编译的核心模块，并且是平台无关的。而剩下的三个都是在 compiler-core 的基础上针对不同的平台作了适配处理。Vue 的编译分为三个阶段，分别是：pa...