前言 还是上一篇面试官：来说说vue3是怎么处理内置的v-for、v-model等指令？文章的那个粉丝，面试官接着问了他另外一个v-model的问题。 面试官：vue3的v-model都用过吧，来讲讲。 粉丝：v-model其实就是一个语法糖，在编译时v-model会被编译成:modelValue属性和@update:modelValue事件。一般在子组件中定义一个名为modelValue的props来接收父组件v-model传递的值，然后当子组件表单的值变化时再使用@update:modelValue抛出事件给父组件，由父组件来更新v-model绑定的变量。 面试官：你说的这个是在组件上面...

前言 最近有粉丝找到我，说被面试官给问懵了。 粉丝：面试官上来就问“一个vue文件是如何渲染成浏览器上面的真实DOM？”，当时还挺窃喜这题真简单。就简单说了一下先是编译成render函数、然后根据render函数生成虚拟DOM，最后就是根据虚拟DOM生成真实DOM。按照正常套路面试官接着会问vue响应式原理和diff算法，结果面试官不讲武德问了我“那render函数又是怎么生成的呢？”。 我：之前写过一篇看不懂来打我，vue3如何将template编译成render函数文章专门讲过这个吖。 粉丝：我就是按照你文章回答的面试官，底层其实是调用的一个叫baseCompile的函数。在baseCo...

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

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

前言 我们每天都在用v-model，并且大家都知道在vue3中v-model是:modelValue和@update:modelValue的语法糖。那你知道v-model指令是如何变成组件上的modelValue属性和@update:modelValue事件呢？将v-model指令转换为modelValue属性和@update:modelValue事件这一过程是在编译时还是运行时进行的呢？ 先说结论 下面这个是我画的处理v-model指令的完整流程图： 首先会调用parse函数将template模块中的代码转换为AST抽象语法树，此时使用v-model的node节点的props属性中还是v-m...

前言 我们每天都在使用defineEmits宏函数，但是你知道defineEmits宏函数经过编译后其实就是vue2的选项式API吗？通过回答下面两个问题，我将逐步为你揭秘defineEmits宏函数的神秘面纱。为什么Vue的defineEmits宏函数不需要import导入就可用？为什么defineEmits的返回值等同于$emit 方法用于在组件中抛出事件？ 举两个例子 要回答上面提的几个问题我们先来看两个例子是如何声明事件和抛出事件，分别是vue2的选项式语法和vue3的组合式语法。 我们先来看vue2的选项式语法的例子，options-child.vue文件代码如下： &lt...

前言 我们每天写vue代码时都在用defineProps，但是你有没有思考过下面这些问题。为什么defineProps不需要import导入？为什么不能在非setup顶层使用defineProps？defineProps是如何将声明的props自动暴露给模板？ 举几个例子 我们来看几个例子，分别对应上面的几个问题。 先来看一个正常的例子，common-child.vue文件代码如下： <template> <div>contentis{{content}}</div> </template> <scriptsetuplang="ts"&g...

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

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

前言 我们每天写vue3项目的时候都会使用setup语法糖，但是你有没有思考过下面几个问题。setup语法糖经过编译后是什么样子的？为什么在setup顶层定义的变量可以在template中可以直接使用？为什么import一个组件后就可以直接使用，无需使用components 选项来显式注册组件？ vue文件如何渲染到浏览器上 要回答上面的问题，我们先来了解一下从一个vue文件到渲染到浏览器这一过程经历了什么？ 我们的vue代码一般都是写在后缀名为vue的文件上，显然浏览器是不认识vue文件的，浏览器只认识html、css、jss等文件。所以第一步就是通过webpack或者vite将一...