前端面试：vue的compile过程

最新推荐文章于 2024-09-10 08:18:22 发布
最新推荐文章于 2024-09-10 08:18:22 发布
阅读量108 收藏
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43592064/article/details/130963234
版权
Vue在创建组件时，首先查找render函数来生成虚拟DOM。如果没有render，它会处理template选项，将其转化为AST并标记静态节点，然后生成渲染函数。这个过程包括模板解析、静态节点检测和渲染函数创建，确保高效的DOM更新。
摘要由CSDN通过智能技术生成

Vue在实例化组件时候会生成虚拟DOM，Vue先判断是否有render函数，如果有的话调用render生成虚拟DOM；如果没有render函数，则获取template选项，template选项可以是选择器、模版字符串、dom元素，Vue根据template选项进行模板编译；如果没有template，则获取el以及其子内容作为模版。

模板编译有三个步骤

1. 将模板解析为AST。（Abstract Syntax Tree，抽象语法树）。

2. 遍历AST标记静态节点。

3. 使用AST生成渲染函数。

啃火龙果的兔子
关注
Vue 模板编译的过程
qt的博客
01-09 689
Vue 模板编译的过程 Vue中的模板编译就是将模板编译成render渲染函数 模板编写，便于阅读，便于交互，编写render函数比较复杂 编译过程 入口： src/platforms/web/entry-runtime-with-compile.js 如果有render函数，进行render调用，没有render，进行模板转换render函数 调用createCompile函数，接收baseCompile函数 将模板转换为ast语法树，描述代码结构 使用optimize(ast,options)优
【Vue原理】Compile - 源码版 之 从新建实例到 compile结束的主要流程
神仙朱的博客
08-09 476
写文章不容易，点个赞呗兄弟 专注 Vue 源码分享，文章分为白话版和 源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧 研究基于 Vue版本 【2.5.17】 如果你觉得排版难看，请点击 下面链接 或者 拉到 下面关注公众号也可以吧 【Vue原理】Compile - 源码版 之 从新建实例到 compile结束的主要流程 Compile 的内容十分之多，今...
Vue Compile 使用教程
最新发布
gitblog_00065的博客
09-10 389
Vue Compile 使用教程 vue-compileCompile the blocks in Vue single-file components to use JS/CSS instead of Babel/Sass/Stylus.项目地址:https://gitcode.com/gh_mirrors/vu/vue-compile 1. 项目介绍 vue-compile 是一个用于在 V...
【Vue原理】Compile - 白话版
chongzhun5695的博客
08-09 275
写文章不容易，点个赞呗兄弟 <br> <br> 专注 Vue 源码分享，文章分为白话版和 源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧 研究基于 Vue版本 【2.5.17】 如果你觉得排版难看，请点击 下面链接 或者 拉到 下面关注公...
vue html解释器,Vue 中的compile操作方法
weixin_32377497的博客
06-09 269
在 Vue 里，模板编译也是非常重要的一部分，里面也非常复杂，这次探究不会深入探究每一个细节，而是走一个全景概要，来吧，大家和我一起去一探究竟。初体验我们看了 Vue 的初始化函数就会知道，在最后一步，它进行了 vm.$mount(el)的操作，而这个 $mount 在两个地方定义过，分别是在 entry-runtime-with-compiler.js(简称：eMount) 和 runtime/...
Vue Compile原理分析
lznism666的博客
09-22 3411
Vue中Compile是一个非常复杂的内容，Compile的主要作用是解析模板，生成渲染模板的render, 而render的作用主要是为了生成VNode, Compile主要分为3大块: parse 接受template原始模板，按着模板的节点和数据生成对应的ast optimize 遍历ast的每一个节点，标记静态节点，这样就知道哪部分不会变化，于是在页面需要更新时，减少去对比这部分DOM，提升性能 generate 把前两步生成完善的ast，组成render字符串，然后将render字符串通过new
前端面试题: 精选Vue面试题及答案.pdf
12-14
Vue面试题总结 本资源总结了 Vue 面试题的知识点，涵盖了 Vue 的基本原理、双向数据绑定的原理、MVVM、MVC、MVP 等架构设计模式的区别等内容。 1. Vue 的基本原理 Vue 的基本原理是通过 Object.defineProperty() ...
前端面试题之VUE.pdf
02-16
Vue.js 是一款流行的前端JavaScript框架，用于构建用户界面。在面试中，理解Vue的基本原理、数据绑定机制以及与其他架构模式的对比是至关重要的。以下是对这些知识点的详细解释： 1. **Vue的基本原理** 当创建一个...
VUE前端面试题 附答案.pdf
12-14
"VUE前端面试题 附答案.pdf" 本文档是关于VUE前端面试题的汇总，涵盖了VUE框架的基础知识点，包括VUE的基本原理、双向数据绑定的原理、MVVM、MVC、MVP架构设计模式等。 VUE的基本原理 VUE框架的基本原理是通过...
精选前端开发面试题(Vue部分).pdf
12-14
Vue.js面试题知识点总结 1. Vue 基础知识点 * Vue 实例创建时，Vue 会遍历 data 中的属性，使用 Object.defineProperty 或 Proxy 将它们转换为 getter/setter，并在内部追踪相关依赖。 * 每个组件实例都有相应的 ...
经典面试题: 2021Vue经典面试题总结(含答案).pdf
12-14
Vue经典面试题总结 一、Vue基础 1. Vue的基本原理：当一个Vue实例创建时，Vue会遍历data中的属性，使用 Object.defineProperty（vue3.0使用proxy）将它们转为getter/setter，并且在内部追踪相关依赖，在属性被访问...
Vue 中的compile操作方法
08-27
主要介绍了Vue 中的compile操作方法，非常不错，具有参考借鉴价值，需要的朋友参考下吧
揭秘，Vue3 compile 和 runtime 结合的 patch 过程（源码分析）
五柳
09-24 1020
前言 在上一篇文章中，我们分析了在编译过程静态节点的提升。并且，在文章的结尾也说了，下一篇文章将会介绍 patch 过程。 说起「Vue3」的 patch 过程，其中最为津津乐道的就是靶向更新。靶向更新，顾名思义，即更新的过程是带有目标性的、直接性的。而，这也是和静态节点提升一样，是「Vue3」针对 VNode 更新性能问题的一大优化。 那么，今天，我们就来揭秘「Vue3」compile 和 runtime 结合的 patch过程 究竟是如何实现的！ 什么是 shapeFlag 说起「Vue3」的 patc
vue3源码阅读【vue\src\index.ts】【compile】
qq_38862234的博客
07-21 245
vue3源码
Vue3 compile模块①——学习编写AST抽象语法树
小白菜的博客
07-09 1046
文章目录前言一、AST抽象语法树是什么？二、看一眼AST语法树三、写一下AST语法树第1步、语义拆分，将标签拆分成数组第2步、数组转换成树，利用递归实现AST总结 前言 最近在看vue3.0的compile模块，用到了AST抽象语法树，在网上找资料发现国内比较缺乏相关内容，看到热门的是用一个插件去解析和操纵JavaScript版的AST语法树，但我想了解的是单页面应用里的标签是怎么形成语法树的，自己能否学着写一下。 一、AST抽象语法树是什么？ AST（Abstract Syntax Tree）是源代
实现一个简易Vue（三）Compiler
m0_51400347的博客
05-04 279
3. Compiler 功能 负责编译模板，解析指令/插值表达式 负责页面的首次渲染 当数据变化后重新渲染视图 代码 class Compiler { constructor(vm) { this.el = vm.$el this.vm = vm this.compile(this.el) } // 编译模板，处理文本节点和元素节点 compile(el) { let childNodes = el.childNodes // 获取所有子节点
Vue3源码 第五篇-Vue3 模版compile AST生成篇
不忘初心
04-03 1544
vue3如何将模版转变成AST语法树的呢，本文章将带你简单了解其中的过程。
【vue3】vue3源码探索之旅：compiler-core（一）
qq_2511276124的博客
01-29 1321
compiler-core包是vue3源码代码编译的核心代码包，且与平台无关，这个包**主要功能是将代码解析成ast、然后转换成codegenNode对象、再编译生成可执行代码（render渲染函数）**
Vue前端面试深度解析：原理与双向绑定详解
Vue前端面试题是一份重要的参考资料，其中涵盖了Vue框架的基础知识和面试过程中常被提问的问题。面试者需要掌握以下几个关键点： 1. Vue基础原理： - Vue实例创建时，会使用`Object.defineProperty`或`proxy`（在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值