vue3编译原理揭秘-腾讯云开发者社区

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

vue3编译原理揭秘

本专栏通过debug源码带你一步步深入理解 Vue 3 编译机制，揭秘 setup 语法糖、defineProps、defineEmits 等宏如何工作，以及它们如何被编译成运行时的代码。

专栏作者

20

文章

2679

阅读量

13

订阅数

vue3早已具备抛弃虚拟DOM的能力了

函数 dom vue3 变量编译

jquery时代更新视图是直接对DOM进行操作，缺点是频繁操作真实 DOM，性能差。react和vue时代引入了虚拟DOM，更新视图是对新旧虚拟DOM树进行一层层的遍历比较，然后找出需要更新的DOM节点进行更新。这样做的缺点就是如果DOM树很复杂，在进行新旧DOM树比较的时候性能就比较差了。那么有没有一种方法是不需要去遍历新旧DOM树就可以知道哪些DOM需要更新呢？

2024-05-09

1510

置顶

通过debug搞清楚.vue文件怎么变成.js文件

字符串 debug 编译对象函数

我们每天写的vue代码都是写在vue文件中，但是浏览器却只认识html、css、js等文件类型。所以这个时候就需要一个工具将vue文件转换为浏览器能够认识的js文件，想必你第一时间就想到了webpack或者vite。但是webpack和vite本身是没有能力处理vue文件的，其实实际背后生效的是vue-loader和@vitejs/plugin-vue。本文以@vitejs/plugin-vue举例，通过debug的方式带你一步一步的搞清楚vue文件是如何编译为js文件的，看不懂你来打我。

2024-04-24

2270

置顶

vue3编译优化之“静态提升”

vue3 变量编译函数优化

在上一篇 vue3早已具备抛弃虚拟DOM的能力了文章中讲了对于动态节点，vue做的优化是将这些动态节点收集起来，然后当响应式变量修改后进行靶向更新。那么vue对静态节点有没有做什么优化呢？答案是：当然有，对于静态节点会进行“静态提升”。这篇文章我们来看看vue是如何进行静态提升的。

2024-05-17

240

有了Composition API后，有些场景或许你不需要pinia了

函数 api composition count 变量

日常开发时有些业务场景功能很复杂，如果将所有代码都写在一个vue组件中，那个vue文件的代码量可能就几千行了，维护极其困难。这时我们就需要将其拆分为多个组件，拆完组件后就需要在不同组件间共享数据和业务逻辑。有的小伙伴会选择将数据和业务逻辑都放到pinia中，这样虽然可以解决问题。但是如果将所有的复杂的业务都放在pinia中，那么pinia就会变得很乱。

2024-04-24

770

没有虚拟DOM版本的vue（Vue Vapor）

dom vapor 变量函数浏览器

随着Svelte和SolidJS的流行，无虚拟DOM模式逐渐开始火了起来。vue也推出了无虚拟DOM模式的版本，就是我们今天要讲的Vue Vapor。

2024-04-24

1380

一文搞懂 Vue3 defineModel 双向绑定：告别繁琐代码！

vue3 变量对象事件原理

随着vue3.4版本的发布，defineModel也正式转正了。它可以简化父子组件之间的双向绑定，是目前官方推荐的双向绑定实现方式。

2024-04-24

4920

为什么defineProps宏函数不需要从vue中import导入？

import 编译对象函数字符串

我们每天写vue代码时都在用defineProps，但是你有没有思考过下面这些问题。为什么defineProps不需要import导入？为什么不能在非setup顶层使用defineProps？defineProps是如何将声明的 props 自动暴露给模板？

2024-04-24

1030

天天用defineEmits宏函数，竟然不知道编译后是vue2的选项式API？

函数字符串 api 编译对象

我们每天都在使用 defineEmits 宏函数，但是你知道defineEmits 宏函数经过编译后其实就是vue2的选项式API吗？通过回答下面两个问题，我将逐步为你揭秘defineEmits 宏函数的神秘面纱。为什么 Vue 的 defineEmits 宏函数不需要 import 导入就可用？为什么defineEmits的返回值等同于$emit 方法用于在组件中抛出事件？

2024-04-24

610

看不懂来打我，vue3如何将template编译成render函数

对象函数语法 render vue3

在之前的通过debug搞清楚.vue文件怎么变成.js文件文章中我们讲过了vue文件是如何编译成js文件，通过那篇文章我们知道了，template编译为render函数底层就是调用了@vue/compiler-sfc包暴露出来的compileTemplate函数。由于文章篇幅有限，我们没有去深入探索compileTemplate函数是如何将template模块编译为render函数，在这篇文章中我们来了解一下。

2024-04-24

1190

答应我，在vue中不要滥用watch好吗？

产品同步异步渲染 watch

上周五晚上8点，开开心心的等着产品验收完毕后就可以顺利上线。结果产品突然找到我说要加需求，并且维护这一块业务的同事已经下班走了，所以只有我来做。虽然内心一万头草泥马在狂奔，但是嘴里还是一口答应没问题。由于这一块业务很复杂并且我也不熟悉，加上还饿着肚子，在梳理代码逻辑的时候我差点崩溃了。需要修改的那个vue文件有几千行代码，迭代业务对应的ref变量有10多个watch。我光是梳理这些watch的逻辑就搞了很久，然后小心翼翼的在原有代码上面加上新的业务逻辑，不敢去修改原有逻辑（担心搞出线上bug背锅）。

2024-04-24

740

面试官：在原生input上面使用v-model和组件上面使用有什么区别？

input model 变量函数事件

还是上一篇面试官：来说说vue3是怎么处理内置的v-for、v-model等指令？文章的那个粉丝，面试官接着问了他另外一个v-model的问题。

2024-04-24

2360

面试官：来说说vue3是怎么处理内置的v-for、v-model等指令？

函数数组 model vue3 对象

先来看一下我画的transform函数执行流程图，让你对整个流程有个大概的印象，后面的内容看着就不费劲了。如下图：

2024-04-24

1331

父组件使用v-model，子组件竟然不用定义props和emit抛出事件

事件 model 变量对象函数

vue3.4增加了defineModel宏函数，在子组件内修改了defineModel的返回值，父组件上v-model绑定的变量就会被更新。大家都知道v-model是:modelValue和@update:modelValue的语法糖，但是你知道为什么我们在子组件内没有写任何关于props的定义和emit事件触发的代码吗？还有在template渲染中defineModel的返回值等于父组件v-model绑定的变量值，那么这个返回值是否就是名为modelValue的props呢？直接修改defineModel的返回值就会修改父组件上面绑定的变量，那么这个行为是否相当于子组件直接修改了父组件的变量值，破坏了vue的单向数据流呢？

2024-04-24

1170

5分钟教会你如何在生产环境debug代码

函数源码 debug 变量对象

有时出现的线上bug在测试环境死活都不能复现，靠review代码猜测bug出现的原因，然后盲改代码直接在线上测试明显不靠谱。这时我们就需要在生产环境中debug代码，快速找到bug的原因，然后将锅丢出去。

2024-04-24

630

你不知道的vue：使用runWithContext实现在非 setup 期间使用inject

源码 app key 对象函数

日常开发时有些特殊的场景需要在非 setup 期间调用inject函数，比如app中使用provide注入的配置信息需要在发送http请求时带上传给后端。对此我们希望不在每个发起请求的地方去修改，而是在发起请求前的拦截进行统一处理，对此我们就需要在拦截请求的函数中使用inject拿到app注入的配置信息。

2024-04-24

680

直接在*.vue文件（SFC）中使用JSX/TSX渲染函数，真香!

jsx 函数数据语法渲染

在日常开发中vue的模版语法在大多数情况都能够满足我们的需求，但是在一些复杂的业务场景中使用模版语法就有些麻烦了。这个时候灵活的JSX/TSX渲染函数就能派上用场了，大多数同学的做法都是将*.vue文件改为*.tsx或者*.jsx文件。其实我们可以直接在*.vue文件中直接使用JSX/TSX渲染函数。

2024-04-24

830

5分钟搞定vue3函数式弹窗

vue3 表单对象函数事件

最近接到一个需求，需要在一些敏感操作进行前要求输入账号和密码，然后将输入的账号和密码加到接口请求的header里面。如果每个页面都去手动导入弹窗组件，在点击按钮后弹出弹窗。再拿到弹窗返回的账号密码后去请求接口也太累了，那么有没有更简单的实现方式呢？

2024-04-24

1400

面试官：只知道v-model是modelValue语法糖，那你可以走了

model 编译函数浏览器语法

大家好，我是欧阳！本文约3500+字，整篇阅读大约需要12分钟。前言我们每天都在用v-model，并且大家都知道在vue3中v-model是:model

2024-04-24

1470

vue3的宏到底是什么东西？

vue3 编译对象函数浏览器

从vue3开始vue引入了宏，比如defineProps、defineEmits等。我们每天写vue代码时都会使用到这些宏，但是你有没有思考过vue中的宏到底是什么？为什么这些宏不需要手动从vue中import？为什么只能在setup顶层中使用这些宏？

2024-04-24

1250

Vue 3 的 setup语法糖到底是什么东西？

对象函数语法变量编译

我们每天写vue3项目的时候都会使用setup语法糖，但是你有没有思考过下面几个问题。setup语法糖经过编译后是什么样子的？为什么在setup顶层定义的变量可以在template中可以直接使用？为什么import一个组件后就可以直接使用，无需使用components 选项来显式注册组件？

2024-04-24

1010

点击加载更多

社区活动

RAG七天入门训练营

鹅厂大牛手把手带你上手实战

Python精品学习库

代码在线跑，知识轻松学

博客搬家 | 分享价值百万资源包

自行/邀约他人一键搬运博客，速成社区影响力并领取好礼

技术创作特训营·精选知识专栏

往期视频·千货材料·成员作品最新动态