随笔分类 - Vue
摘要：How vue-router solve the problem: function changeLocation( to: HistoryLocation, state: StateEntry, replace: boolean ): void { /** * if a base tag is p
阅读全文
摘要：通过前面的代码，其实我们已经完成了从模板AST到Javascript AST的转换 const ast = parse(template); transform(ast); 那接下来，我们只需要再根据Javascript AST生成具体的js代码就行了，比如再执行下面的函数： generate(as
阅读全文
摘要：我们现在已经有了模板AST，那么根据之前的顺序，我们现在需要把模板AST转化为JSAST。 要知道，模板AST是对模板的描述，那么JSAST就是对JS代码的描述。 也就是说，我们最终希望得到的代码是下面这样的： function render(){ return h('div',[ h('p','V
阅读全文
摘要：在转换AST节点的过程中，往往需要根据其子节点的情况来决定如何对当前节点进行转换，这就要求父节点的转换操作必须等待其所有子节点全部转换完毕之后再执行。 但是我们现在设计的转换流程并不支持这个能力，我们是从根节点开始，顺序往下执行的流程，如下图： 当一个节点被处理时，意味着它的子节点已经被处理完毕了，
阅读全文
摘要：For example, we have following code doing AST transform from templateAST to Javascript AST function traverseNode(ast) { const currentNode = ast; // If
阅读全文
摘要：In Vue 3’s reactivity engine (as of v3.5), globalVersion is a single, ever‐incrementing counter that bumps whenever any reactive value changes. Each c
阅读全文
摘要：It can be a performance bottleneck if you frequently add/remove event listener bind to a DOM element. patchProps(el, key, prevValue, nextValue) { if (
阅读全文
摘要：竞态问题通常在多线程编程中被提及。 多线程中的竞态问题（Race Condition）是指多个线程或进程在并发执行时，由于对共享资源（如变量、内存、文件等）的访问和修改顺序不确定，导致程序行为不可预测的问题。 竞态问题的关键点在于： 共享资源：多个线程同时访问并修改同一个资源，如全局变量或内存位置。
阅读全文
摘要：生成 JavaScript AST 我们要对整个模板的 AST 进行转换，转换为 JS AST。 我们目前的代码已经有了遍历模板 AST，并且针对不同的节点，做不同操作的能力。 我们首先需要知道 JS AST 长什么样子： function render(){ return null; } 上面的代
阅读全文
摘要：转换器 主要的目的是将模板的 AST 转换为 JS 的 AST，整个模板的编译过程如下： // Vue 的模板编译器 function compile(template) { // 1. 得到模板的 AST const ast = parse(template); // 2. 将模板 AST 转为
阅读全文
摘要：模板编译整体流程 首先我们看一下什么是编译？ 所谓编译（Compile），指的是将语言 A 翻译成语言 B，语言 A 就被称之为源码（source code），语言 B 就被称之为目标代码（target code），这个事情谁来做？编译器来做。编译器你也不用想得那么神秘，就是一段程序而已。 完整的编
阅读全文
摘要：If you work with SSR, you have probably seen a warning like this. This happens when the server-side rendered HTML and the client-side rendered HTML fr
阅读全文
摘要：Lazy hydration has been implemented as part of the Vue’s Async Component API. So before we get to lazy hydration, let’s take a quick look at async com
阅读全文
摘要：A template ref is a ref that connects to an element and allows you to manipulate the underlying HTML element using the DOM API. This is generally not
阅读全文
摘要：Code 📁 /src/App.vue <script setup lang="ts"> import { ref } from 'vue' const text = ref('') </script> <template> <ChildComponent v-model="text" /> <p
阅读全文
摘要：v-bind is a commonly used feature in Vue.js. It can be used to bind a reactive value to an attribute or the content of an element. <script setup lang=
阅读全文
摘要：Vue 3.3 brings an upgraded experience for using TypeScript with compiler macros such as: defineProps defineEmits defineSlots First, defineProps in its
阅读全文
摘要：In Vue 3.3, you can create generic components. Generic is an important feature in many statically typed languages, including TypeScript. It’s basicall
阅读全文
摘要：defineOptions Previously, if you were using script setup, and you wanted to define some options such as name or inheritAttrs for your component, you w
阅读全文
摘要：<style> v-bind is a new feature in Vue 3.2 that might remind you of v-bind:style, which is a classic Vue.js technique for binding some reactive value
阅读全文
浙公网安备 33010602011771号