vue3编译原理揭秘
关注
分享
扫一扫
文章平均质量分 95
前端欧阳
关注公众号“前端欧阳”回复「666」，免费领取欧阳研究vue源码过程中收集的源码资料。还可以加欧阳的高质量vue源码交流群。
展开
-
都2024年了你还傻傻分不清楚“编译时”和“运行时”吗？
在写vue3编译原理揭秘电子书的时候，发现有不少粉丝还傻傻分不清楚什么是编译时？什么是运行时？这篇文章我们来让你彻底搞清楚编译时和运行时的区别。原创 2024-07-22 08:30:00 · 868 阅读 · 0 评论 -
想看源码但是无从下口怎么办？
相信不少同学都有欧阳这种情况，年初的时候给自己制定了一份关于学习英语和源码的详细年度计划。但是到了实际执行的时候因为各种情况制定的计划基本都没有完成，年底回顾时发现年初制定的计划基本都没完成。痛定思痛，第二年年初决定再次制定一份学习英语和源码的详细年度计划，毫无疑问又失败了。原创 2024-07-15 08:30:00 · 1006 阅读 · 0 评论 -
最近很火的Vue Vine是如何实现一个文件中写多个组件
相信你最近应该看到了不少介绍Vue Vine的文章，这篇文章我们另辟蹊径来讲讲Vue Vine是如何实现在一个文件里面写多个vue组件。原创 2024-07-10 09:34:12 · 1728 阅读 · 0 评论 -
新知识get，vue3是如何实现在style中使用响应式变量？
这篇文章我们来讲讲vue是如何实现在style中使用script模块中的响应式变量原创 2024-07-08 09:31:39 · 1163 阅读 · 0 评论 -
这篇文章我们来接着讲使用了scoped后，vue是如何给html增加自定义属性data-v-x
上篇文章中我们讲了使用scoped后，vue是如何给CSS选择器添加对应的属性选择器[data-v-x]。这篇文章我们来接着讲vue是如何给html增加自定义属性data-v-x原创 2024-07-03 08:30:00 · 1035 阅读 · 0 评论 -
掉了两根头发后，我悟了！vue3的scoped原来是这样避免样式污染（上）
这篇我们来讲讲使用了scoped后，vue是如何给CSS选择器添加对应的属性选择器[data-v-x]原创 2024-06-27 09:25:10 · 741 阅读 · 0 评论 -
Vue3 中的 v-bind 指令：你不知道的那些工作原理
本文将通过debug源码的方式带你搞清楚，v-bind指令是如何实现简写、同名简写等多种方式将变量绑定到html的attributes属性上。原创 2024-06-24 08:00:00 · 1138 阅读 · 0 评论 -
有点儿神奇，原来vue3的setup语法糖中组件无需注册因为这个
在setup语法糖中直接将组件import导入无需注册就可以使用，你知道这是为什么呢？原创 2024-06-20 08:00:00 · 1343 阅读 · 0 评论 -
有点东西，template可以直接使用setup语法糖中的变量原来是因为这个
你知道为什么setup语法糖中的顶层绑定可以在template中直接使用的呢？setup语法糖是如何编译成setup函数的呢？原创 2024-06-14 08:00:00 · 667 阅读 · 0 评论 -
终于搞懂了！原来vue3中template使用ref无需.value是因为这个
众所周知，vue3的template中使用ref变量无需使用.value。你猜vue是在编译时就已经在代码中生成了.value，还是运行时使用Proxy拦截的方式去实现的呢？原创 2024-06-06 11:24:06 · 1747 阅读 · 0 评论 -
彻底搞清楚vue3的defineExpose宏函数是如何暴露方法给父组件使用
众所周知，vue3的template中使用ref变量无需使用.value。你猜vue是在编译时就已经在代码中生成了.value，还是运行时使用Proxy拦截的方式去实现的呢？原创 2024-05-28 08:00:00 · 6041 阅读 · 1 评论 -
终于搞懂了！原来 Vue 3 的 generate 是这样生成 render 函数的
在之前的文章中讲了transform阶段会生成一棵javascript AST抽象语法树。这篇文章来接着讲generate阶段是如何根据这棵树生成render函数字符串原创 2024-05-20 09:04:55 · 867 阅读 · 0 评论 -
vue3编译优化之“静态提升”
本文讲了vue3是如何实现编译优化之“静态提升”，静态节点无需每次执行render函数都去生成一次虚拟DOM原创 2024-05-14 08:30:29 · 1051 阅读 · 0 评论 -
vue3早已具备抛弃虚拟DOM的能力了
vue3在编译阶段是如何找出动态节点，以及运行时阶段当响应式变量修改后，是如何靶向更新视图。原创 2024-05-06 08:08:20 · 809 阅读 · 0 评论 -
面试官：在原生input上面使用v-model和组件上面使用有什么区别？
解释了在原生input上面使用v-model和在组件上面使用v-model有什么区别？原创 2024-04-23 15:08:51 · 948 阅读 · 3 评论 -
面试官：来说说vue3是怎么处理内置的v-for、v-model等指令？
vue3的transform函数具体是如何处理vue内置的v-for、v-model等指令。原创 2024-04-18 10:09:18 · 453 阅读 · 0 评论 -
看不懂来打我，vue3如何将template编译成render函数
在我之前的文章中讲了vue文件是如何编译成js文件，今天这篇文章接着来讲讲vue3中是如何将template模块编译为render函数的。原创 2024-04-11 13:11:18 · 845 阅读 · 0 评论 -
父组件明明使用了v-model，子组件竟然可以不用定义props和emit抛出事件，快来看看吧
使用defineModel时，为什么子组件内没有任何关于props的定义和emit事件触发的代码？修改defineModel返回值会修改父组件上绑定的变量，这是否破坏了vue的单向数据流呢？原创 2024-04-08 09:20:57 · 857 阅读 · 0 评论 -
面试官：只知道v-model是:modelValue和@onUpdate语法糖，那你可以走了
你知道v-model指令是如何变成组件上的modelValue属性和@update:modelValue事件呢？这一过程是在编译时还是运行时进行的呢？原创 2024-03-26 08:50:56 · 1745 阅读 · 0 评论 -
天天用defineEmits宏函数，竟然不知道编译后是vue2的选项式API？
你知道defineEmits 宏函数经过编译后其实就是vue2的选项式API吗？你知道为什么 Vue 的 defineEmits 宏函数不需要 import 导入就可用吗？为什么defineEmits的返回值等同于$emit方法用于在组件中抛出事件？原创 2024-03-19 11:02:36 · 1289 阅读 · 1 评论 -
Vue 3 的 setup语法糖到底是什么东西？
setup语法糖经过编译后是什么样子的？为什么在setup顶层定义的变量可以在template中可以直接使用？为什么import一个组件后就可以直接使用，无需使用components 选项来显式注册组件？原创 2024-02-26 08:57:42 · 1297 阅读 · 1 评论 -
vue3的宏到底是什么东西？
我们每天写vue代码时都会使用到这些宏，但是你有没有思考过vue中的宏到底是什么？为什么这些宏不需要手动从vue中import？为什么只能在setup顶层中使用这些宏？原创 2024-02-19 15:47:37 · 1289 阅读 · 1 评论 -
原来 vue3 文件编译是这样工作的！看完后更懂vue3了
通过debug的方式带你一步一步的搞清楚vue文件是如何编译为js文件的，看不懂你来打我。原创 2024-03-07 10:05:00 · 2733 阅读 · 1 评论