.vue文件编译解析过程步骤

最新推荐文章于 2024-04-15 11:18:31 发布
最新推荐文章于 2024-04-15 11:18:31 发布
阅读量140 收藏
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43502666/article/details/133769745
版权

第一步:解析
编译器会读取并通过一定的语法规则解析.vue文件的内容,将文件分为模板、脚本和样式等部分;
(1)模板编译:解析器将模板部分编译,生成AST抽象语法树;
抽象语法树的本质为js对象,是源代码的抽象表示形式，它将代码解析成树状结构，每个节点代表着源代码的一个构成部分，如表达式、语句、函数等。
(2)脚本处理一般使用特定的预处理器(Babel)
(3)样式编译:使用样式处理器(less,Sass)等,将样式编译为Css

第二步:组件选项对象生成(生成了渲染函数)
在第一步完成模板、脚本以及样式编译处理后,编译器会将它们组装成一个对象,称为组件选项对象;
组件选项对象包含:模板的渲染函数,脚本部分的导出对象,样式部分的CSS.
第三步:生成虚拟DOM
在运行时,调用渲染函数,将数据转化为虚拟DOM(本质为一个JS对象)
第四步:DIFF算法
每次状态变化时,通过DIFF算法比较新旧虚拟DOM树,找出两者之间的差异.DIFF算法可以高效地定位变化的节点,减少不必要的DOM操作.
第五步:生成真实DOM

和科比合砍81分
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue.config.js 配置
weixin_48691904的博客
12-09 651
‘use strict’ const path = require(‘path’) const defaultSettings = require(’./src/settings.js’) function resolve(dir) { return path.join(__dirname, dir) } const name = defaultSettings.title || ‘文件’ // 标题 const port = process.env.port || process.env.npm_conf
基于Vue实例生命周期(全面解析)
12-10
Vue实例在创建时有一系列的初始化步骤，例如建立数据观察，编译模板，创建数据绑定等。在此过程中，我们可以通过一些定义好的生命周期钩子函数来运行业务逻辑。本文将详细介绍Vue实例的生命周期 图示 下图是Vue实例...
今天终于把 Vue 编译的原理搞懂了！
weixin_41839767的博客
02-08 1149
大家好，我是哈默。今天我们来学习一下 vue3 中是如何去编译我们写在 template 中的模板的。
Vue源码模板编译阶段----HTML解析器脑图
weixin_43405946的博客
12-04 228
文章引用：添加链接描述
vue 编译后的 js 文件解析
最新发布
仿佛若有光
04-15 103
总的有 3 个位置需要修改。
Vue 文件解析、编译流程
liubangbo的专栏
04-13 5126
文章转自：Vue 文件解析、编译流程 - 博客 - 编程圈 本文将以目前（2020/10/26）最新的 vue-cli 版本 @vue/cli-service4.5.8（后文以 CLI4 代指）以脉络，详细分享 .vue 文件解析和编译的过程。解析指.vue文件被解析为template|script|style三份源码，编译指template源码被编译为渲染函数。 写在前面的一些说明： 本文并不涉及过多编译细节，主要目的是帮助大家熟悉编译流程，为解决问题提供编译方向上的思路。 本文使...
VUE项目结构文件解析
Lxingling的博客
03-04 712
vue项目文件解析
原来 vue3 文件编译是这样工作的！看完后更懂vue3了
qq_36348403的博客
03-07 1368
通过debug的方式带你一步一步的搞清楚vue文件是如何编译为js文件的，看不懂你来打我。
2021Vue面试题笔记.pdf
12-14
* MVVM 将 Observer、Compile 和 Watcher 三者整合起来，通过 Observer 来监听自身的 model 数据变化，通过 Compile 来解析编译模板指令，最终利用 Watcher 搭起 Observer 和 Compile 之间的通信桥梁，达到数据变化 ...
vue常见面试题.pdf
12-14
MVVM 作为数据绑定的入口，整合 Observer、Compile 和 Watcher 三者，通过 Observer 来监听自身的 model 数据变化，通过 Compile 来解析编译模板指令，最终利用 Watcher 搭起 Observer 和 Compile 之间的通信桥梁，...
Vue面试题合集下载.pdf
12-14
* MVVM 作为数据绑定的入口，整合 Observer、Compile 和 Watcher 三者，通过 Observer 来监听自身的 model 数据变化，通过 Compile 来解析编译模板指令，最终利用 Watcher 搭起 Observer 和 Compile 之间的通信桥梁...
浅谈vue中.vue文件解析流程
08-27
主要介绍了浅谈vue中.vue文件解析流程,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2021vue.js面试题整理.pdf
12-14
MVVM 作为数据绑定的入口，整合 Observer、Compile 和 Watcher 三者，通过 Observer 来监听自身的 model 数据变化，通过 Compile 来解析编译模板指令，最终利用 Watcher 搭起 Observer 和 Compile 之间的通信桥梁，...
vue3项目运行时解析文件的顺序
夏日漱石的博客
09-12 348
vue3项目运行时解析文件的顺序
VUE 项目编译后逆向工程项目01
大乔技术笔记
05-16 3736
vue 文件 被编译后对应的 css 文件 关系 1.浏览器开发者工具查看 【源代码】 项目中 assets文件夹里的 SASS 文件夹下的 编译后统一合并成类似 app.xxxxxxxx.css 文件 2.如果每个 VUE 文件本身使用的 <style scoped> 后，编译后会独立生成类似 chunk-xxxxxxxx.xxxxxxxx.css 文件 3.主样式编译后会独立生成类似 chunk-vendors.xxxxxxxx.css 文件 4.vue 源文件可以通过 webpack:/
简析vue文件编译——AST
xy_peng的博客
08-31 811
首先了解一个概念AST）抽象语法树，按照大多数教程中的描述，这是一种源代码的抽象语法结构树，树上的每个节点都表示源代码中的一种结构，将源码中的各种嵌套括号等形式，隐含在树的结构中，不依赖于源语言的语法。这个概念不但名称AST很抽象， 描述得也很抽象，理解起来很难。个人习惯，将所有抽象的东西抽象的理解，（下文中都将简称为AST或语法树），粗暴的代入到各个场景中，抓住几个主要的过程描述：对于常见编译型语言（例如：Java）来说，编译步骤分为：词法分析->语法分析->语义检查->代码优化和字节码生成。
三言两语说透webpack对vue的编译
xuxian的博客
08-07 1048
Webpack作为当下最流行的前端构建工具，它可以处理模块化的JavaScript项目，进行代码打包和优化。在Vue项目中，Webpack发挥着不可或缺的作用，它负责分析项目中的依赖图谱，递归地构建bundles，从而实现整个项目的构建。
如何手动解析vue单文件并预览？
sinat_33488770的博客
09-14 1143
开头 笔者之前的文章里介绍过一个代码在线编辑预览工具的实现（传送门：快速搭建一个代码在线编辑预览工具），实现了css、html、js的编辑，但是对于demo场景来说，vue单文件也是一个比较好的代码组织方式，至少笔者就经常在写vue项目的同时顺便写写各种demo，但是分享不太方便，因为单文件不能直接运行看效果，基于此，笔者决定在之前的基础上再增加一个vue单文件的编辑及预览功能。 ps.如果没看过之前的文章也没关系，这里简单介绍一下该项目：code-run，基本框架使用的是vue3.x版本， 构建工具使
vue项目各文件说明
weixin_66059613的博客
03-05 3875
包裹，默认是影响全局的，如需定义作用域只在该组件下起作用，需在标签上加scoped，
vue.js中template编译理解
06-28
Vue.js的template编译过程包括以下几个步骤： 1. 解析模板：将template解析为抽象语法树（AST）。 2. 静态优化：对AST进行静态优化，例如删除不必要的节点、合并静态节点等。 3. 代码生成：将AST转换为渲染函数的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值