- 博客(38)
- 收藏
- 关注
RSS订阅原创 都2024年了你还傻傻分不清楚“编译时”和“运行时”吗？
在写vue3编译原理揭秘电子书的时候，发现有不少粉丝还傻傻分不清楚什么是编译时？什么是运行时？这篇文章我们来让你彻底搞清楚编译时和运行时的区别。
2024-07-22 08:30:00
717
原创 想看源码但是无从下口怎么办？
相信不少同学都有欧阳这种情况，年初的时候给自己制定了一份关于学习英语和源码的详细年度计划。但是到了实际执行的时候因为各种情况制定的计划基本都没有完成，年底回顾时发现年初制定的计划基本都没完成。痛定思痛，第二年年初决定再次制定一份学习英语和源码的详细年度计划，毫无疑问又失败了。
2024-07-15 08:30:00
936
原创 最近很火的Vue Vine是如何实现一个文件中写多个组件
相信你最近应该看到了不少介绍Vue Vine的文章，这篇文章我们另辟蹊径来讲讲Vue Vine是如何实现在一个文件里面写多个vue组件。
2024-07-10 09:34:12
1093
原创 新知识get，vue3是如何实现在style中使用响应式变量？
这篇文章我们来讲讲vue是如何实现在style中使用script模块中的响应式变量
2024-07-08 09:31:39
651
原创 这篇文章我们来接着讲使用了scoped后，vue是如何给html增加自定义属性data-v-x
上篇文章中我们讲了使用scoped后，vue是如何给CSS选择器添加对应的属性选择器[data-v-x]。这篇文章我们来接着讲vue是如何给html增加自定义属性data-v-x
2024-07-03 08:30:00
853
原创 掉了两根头发后，我悟了！vue3的scoped原来是这样避免样式污染（上）
这篇我们来讲讲使用了scoped后，vue是如何给CSS选择器添加对应的属性选择器[data-v-x]
2024-06-27 09:25:10
582
原创 Vue3 中的 v-bind 指令：你不知道的那些工作原理
本文将通过debug源码的方式带你搞清楚，v-bind指令是如何实现简写、同名简写等多种方式将变量绑定到html的attributes属性上。
2024-06-24 08:00:00
991
原创 有点儿神奇，原来vue3的setup语法糖中组件无需注册因为这个
在setup语法糖中直接将组件import导入无需注册就可以使用，你知道这是为什么呢？
2024-06-20 08:00:00
689
原创 有点东西，template可以直接使用setup语法糖中的变量原来是因为这个
你知道为什么setup语法糖中的顶层绑定可以在template中直接使用的呢？setup语法糖是如何编译成setup函数的呢？
2024-06-14 08:00:00
530
原创 终于搞懂了！原来vue3中template使用ref无需.value是因为这个
众所周知，vue3的template中使用ref变量无需使用.value。你猜vue是在编译时就已经在代码中生成了.value，还是运行时使用Proxy拦截的方式去实现的呢？
2024-06-06 11:24:06
924
原创 彻底搞清楚vue3的defineExpose宏函数是如何暴露方法给父组件使用
众所周知，vue3的template中使用ref变量无需使用.value。你猜vue是在编译时就已经在代码中生成了.value，还是运行时使用Proxy拦截的方式去实现的呢？
2024-05-28 08:00:00
2441
1
原创 终于搞懂了！原来 Vue 3 的 generate 是这样生成 render 函数的
在之前的文章中讲了transform阶段会生成一棵javascript AST抽象语法树。这篇文章来接着讲generate阶段是如何根据这棵树生成render函数字符串
2024-05-20 09:04:55
657
原创 面试官：在原生input上面使用v-model和组件上面使用有什么区别？
解释了在原生input上面使用v-model和在组件上面使用v-model有什么区别？
2024-04-23 15:08:51
815
3
原创 面试官：来说说vue3是怎么处理内置的v-for、v-model等指令？
vue3的transform函数具体是如何处理vue内置的v-for、v-model等指令。
2024-04-18 10:09:18
367
原创 看不懂来打我，vue3如何将template编译成render函数
在我之前的文章中讲了vue文件是如何编译成js文件，今天这篇文章接着来讲讲vue3中是如何将template模块编译为render函数的。
2024-04-11 13:11:18
653
原创 父组件明明使用了v-model，子组件竟然可以不用定义props和emit抛出事件，快来看看吧
使用defineModel时，为什么子组件内没有任何关于props的定义和emit事件触发的代码？修改defineModel返回值会修改父组件上绑定的变量，这是否破坏了vue的单向数据流呢？
2024-04-08 09:20:57
694
原创 面试官：只知道v-model是:modelValue和@onUpdate语法糖，那你可以走了
你知道v-model指令是如何变成组件上的modelValue属性和@update:modelValue事件呢？这一过程是在编译时还是运行时进行的呢？
2024-03-26 08:50:56
1447
原创 天天用defineEmits宏函数，竟然不知道编译后是vue2的选项式API？
你知道defineEmits 宏函数经过编译后其实就是vue2的选项式API吗？你知道为什么 Vue 的 defineEmits 宏函数不需要 import 导入就可用吗？为什么defineEmits的返回值等同于$emit方法用于在组件中抛出事件？
2024-03-19 11:02:36
992
1
原创 为什么defineProps宏函数不需要从vue中import导入？
为什么defineProps不需要import导入？为什么不能在非setup顶层使用defineProps？defineProps是如何将声明的 props 自动暴露给模板？
2024-03-13 08:52:33
1051
原创 原来 vue3 文件编译是这样工作的！看完后更懂vue3了
通过debug的方式带你一步一步的搞清楚vue文件是如何编译为js文件的，看不懂你来打我。
2024-03-07 10:05:00
1560
1
原创 答应我，在vue中不要滥用watch好吗？
上周五晚上8点，开开心心的等着产品验收完毕后就可以顺利上线。结果产品突然找到我说要加需求，并且维护这一块业务的同事已经下班走了，所以只有我来做。虽然内心一万头草泥马在狂奔，但是嘴里还是一口答应没问题。
2024-02-29 19:54:35
1020
原创 Vue 3 的 setup语法糖到底是什么东西？
setup语法糖经过编译后是什么样子的？为什么在setup顶层定义的变量可以在template中可以直接使用？为什么import一个组件后就可以直接使用，无需使用components 选项来显式注册组件？
2024-02-26 08:57:42
1148
1
原创 vue3的宏到底是什么东西？
我们每天写vue代码时都会使用到这些宏，但是你有没有思考过vue中的宏到底是什么？为什么这些宏不需要手动从vue中import？为什么只能在setup顶层中使用这些宏？
2024-02-19 15:47:37
1013
1
原创 一文搞懂 Vue3 defineModel 双向绑定：告别繁琐代码！
type如果要使用系统内置的修饰符比如trim子组件也无需做任何修改，和上面其他的也支持自定义修饰符，比如我们要实现一个将输入框的字母全部变成大写的uppercase自定义修饰符，同时也需要使用内置的trim修饰符。// get我们这里不需要},});这时我们给传进去的第一个参数就是包含get和set方法的对象，当对modelValue变量进行读操作时会走到get方法里面去，当对modelValue变量进行写操作时会走到set方法里面去。
2024-02-04 13:44:10
2082
2
原创 没有虚拟DOM版本的vue（Vue Vapor）
随着Svelte和SolidJS的流行，无虚拟DOM模式逐渐开始火了起来。vue也推出了无虚拟DOM模式的版本
2024-01-26 09:13:40
1151
1
原创 有了Composition API后，有些场景或许你不需要pinia了
日常开发时有些业务场景功能很复杂，如果将所有代码都写在一个vue组件中，那个vue文件的代码量可能就几千行了，维护极其困难。这时我们就需要将其拆分为多个组件，拆完组件后就需要在不同组件间共享数据和业务逻辑。有的小伙伴会选择将数据和业务逻辑都放到`pinia`中，这样虽然可以解决问题。但是如果将所有的复杂的业务都放在`pinia`中，那么`pinia`就会变得很乱。
2024-01-23 15:01:26
788
1
原创 5分钟教会你如何在生产环境debug代码
有时出现的线上bug在测试环境死活都不能复现，靠review代码猜测bug出现的原因，然后盲改代码直接在线上测试明显不靠谱。
2024-01-19 13:26:01
1093
1
原创 你不知道的vue3：使用runWithContext实现在非 setup 期间使用inject
这篇文章我们先介绍了由于inject执行期间需要拿到当前的vue实例，然后才能从父组件提供的provides对象中找到相同key的值。如果我们在非setup期间执行，那么就拿不到当前vue实例。也找不到父组件，当然inject也没法拿到注入的值。在一些场景中我们确实需要在非setup期间执行inject，这时我们就可以使用将app对象作为注入上下文执行回调函数。然后在inject执行期间就能从app中拿到提供的provides对象中相同key的值。
2024-01-17 16:09:22
679
原创 直接在*.vue文件（SFC）中使用JSX/TSX渲染函数，真香!
这篇文件介绍了如何在*.vue文件中直接使用JSX/TSX渲染函数，只需要导入，然后将script标签的lang设置为tsx或者jsx。就可以在script中直接定义组件，然后在template中直接使用组件就可以了。这样我们既可以使用JSX/TSX渲染函数的灵活性，也可以使用vue模版语法中内置的指令等功能。如果我的文章对你有点帮助，欢迎关注公众号：【欧阳码农】，文章在公众号首发。
2024-01-12 14:43:09
658
2
原创 5分钟搞定vue3函数式弹窗
这篇文章主要介绍了如何创建函数式弹窗：创建一个常规的弹窗组件，有点不同的是close和confirm事件不是定义在emits中，而是作为回调定义在props中。创建一个函数，该函数返回一个Promiseresolve的值就是我们弹窗中输入的表单。调用createApp函数将步骤一的弹窗组件作为第一个参数传入，并且第二个对象参数中传入属性visible为true打开弹窗和注入弹窗close关闭和confirm确认的回调。使用者只需await调用就可以打开弹窗和拿到表单中填入的账号和密码。
2024-01-10 12:56:05
2200
原创 从vue2源码看为什么需要使用Vue.set()和this.$set()
从源码层次看vue提供的vue.set()和this.$set()这两个api还是很简单的，由于本文没有详细解释vue依赖收集和触发，所以有的地方说的还是很模糊。在后续文章中我们会进行vue3源码的解读，从源码出发讲清楚vue3中为什么不再需要使用Vue.set()和了。
2024-01-06 20:29:18
744
1
原创 零基础电气专业毕业生，花费9.9元自学前端，成都月薪6.5K
毕业于成都理工电气专业，大学毕业后进入了一家电气公司，月薪2000元。一直对互联网行业感兴趣，但由于没有相关专业背景，所以一直没有勇气转行。
2024-01-05 08:55:05
648
3
原创 --{module_name}_binary_host_mirror和--{module_name}_binary_site
要安装的包如果使用了（比如nodejieba），在.npmrc文件中配置国内预编译文件镜像URL就需要使用。其中的的值为包的中配置的的值。什么时候使用实际是由要安装的包内部自己实现的，典型的案例就是node-sass。
2023-12-30 09:02:12
405
原创 svelte响应式原理
再来看看invalidate函数的定义，invalidate函数就是在init时调用instance的时候传入的第三个参数。这个方法很简单，判断dom里面的值和新的值是否相等，如果不等直接修改dom的data属性，将最新值更新到dom里面去。当firstName的值被修改时，firstName是第一个定义的变量，i=0。同理当lastName的值被修改时，lastName是第二个定义的变量，i=1。说明从右边数第一个变量被标记为dirty。，1左移的位数为i和31求余的值。就是i/31然后取整。
2023-12-28 20:07:25
394
空空如也
关注公众号：前端欧阳
2024-03-18
关注公众号：前端欧阳
2024-03-02
TA创建的收藏夹 TA关注的收藏夹
TA关注的人