不得了的阿败魔王-CSDN博客

原创【Vue3源码学习】— CH3.2 VNode解析(下)

此过程涉及多种类型的输入处理，如文本、数组、插槽等，每种类型都有特定的处理逻辑来确保 VNode 正确反映了组件或元素的预期结构。总结来说，VNode 的创建和处理是 Vue 渲染机制的核心部分，它不仅涉及到数据结构的建立，还包括性能优化措施，以确保应用的响应性和效率。因为 VNode 是独立于浏览器 DOM 的，所以 Vue 可以在不同的环境中运行，如服务器端渲染（SSR）或原生移动应用，这是通过项目如 Vue Native 或 Weex 实现的。最终的结果是，App 组件被成功渲染到了页面上。

2024-04-17 18:29:01 899

原创【Vue3源码学习】— CH3.2 VNode解析(上)

在 Vue 3 中，VNode（虚拟节点）是框架内部用于表示真实 DOM 结构的 JavaScript 对象。VNode 使得 Vue 能够在不直接操作 DOM 的情况下，通过比较新旧 VNode 来决定是否需要更新 DOM。这种机制提高了渲染性能，并简化了数据与视图之间的同步过程。

2024-04-17 18:21:45 1022 1

原创【Vue3源码学习】— CH3.1 apiCreateApp.ts: 创建Vue应用实例

在Vue 3中，createApp是启动Vue应用的核心。apiCreateApp.ts文件包含了创建Vue应用实例的API，不仅允许开发者挂载根组件，还提供了配置全局属性、指令和组件的能力。本文将深入探讨createApp的工作原理和它提供的各种方法。

2024-04-16 15:01:39 1119

原创【Vue3源码学习】— CH3 探索核心运行时: runtime-core

Vue 3 的 runtime-core 包含了 Vue 的核心运行时逻辑，它负责组件的创建、更新、渲染等核心功能。runtime-core 设计的目的是为了让 Vue 更加轻量，并且能够被不同的平台（如 Web、小程序等）复用。以下是一些 runtime-core 的关键概念和组成部分：虚拟 DOM 是对真实 DOM 的抽象表示，它允许 Vue 在内存中以 JavaScript 对象的形式描述 UI 结构，然后高效地计算出最小的更新操作来实现视图的更新。这减少了直接操作 DOM 的次数，提高了性能。Vue

2024-04-12 11:19:47 580

原创【Vue3源码学习】— CH2.8 Vue 3 响应式系统小结

Vue的响应式系统利用ES6的Proxy和内部的依赖追踪机制来自动捕获依赖关系，并在响应式数据变化时自动触发更新。它们都遵循了观察者模式的基本原则，即当数据（被观察者）发生变化时，能够自动通知所有依赖于这些数据的订阅者（观察者），并触发相应的更新逻辑。Vue 3 的响应式系统利用现代 JavaScript 的特性，如 Proxy 和 Reflect，为开发者提供了一个强大且灵活的工具集，以简化响应式编程。同时，通过避免不必要的副作用执行和精细的依赖追踪，提高了更新的效率。

2024-04-02 10:57:06 1020

原创【Vue3源码学习】— CH2.7 Computed: Vue 3 计算属性深入解析

计算属性是 Vue 3 响应式系统中不可或缺的一部分，它通过缓存和自动更新机制，有效地优化了数据处理的性能。通过深入理解其背后的实现原理，我们能更好地利用 Vue 提供的响应式功能构建高效的应用。

2024-04-02 10:52:07 606

原创【Vue3源码学习】— CH2.6 effect.ts：详解

activeEffect是一个全局变量，用于存储当前正在执行的ReactiveEffect实例。当Vue的响应式系统执行一个副作用函数时，它会把这个副作用函数对应的ReactiveEffect实例设置为activeEffect，这样在副作用函数执行期间，任何响应式数据的访问都能通过activeEffect关联起来，实现依赖追踪。ReactiveEffect类封装副作用函数及其行为，代理副作用函数的执行来跟踪依赖，并在依赖数据变化时触发更新。

2024-03-29 14:47:46 845

原创【Vue3源码学习】— CH2.5 reactiveEffect.ts：Vue 3响应式系统的核心

在Vue中，每当我们操作响应式数据时，都会触发reactiveEffect来跟踪这些操作。无论是计算属性、watch监听器，还是组件的渲染函数，都被视为副作用函数，并被reactiveEffect所管理。

2024-03-27 15:40:41 1219

原创【Vue3源码学习】— CH2.4 Dep：依赖管理新思路

Vue 3的依赖管理策略通过全局的targetMap和依赖类型的改进，提升了响应式系统的性能和效率，特别是在处理大规模数据和复杂应用时。这种设计还为Vue 3带来了更好的TypeScript支持和现代JavaScript特性的利用，展现了Vue团队对框架性能和开发体验的持续优化。在深入理解了Dep类型和Vue 3的依赖管理机制之后，我们对于如何在Reactive对象的属性get和set操作中实施track和trigger有了更清晰的视角。让我们下一章中继续探索！

2024-03-22 19:59:56 1178

原创【Vue3源码学习】— CH2.3 MutableReactiveHandler详解

MutableReactiveHandler 类在 Vue 3 的响应式系统中扮演着核心角色，它继承BaseReacriverHandler类，并且扩展了处理非只读响应式对象的各种操作，包括属性的设置（set）、删除（deleteProperty）、存在性检查（has）和键的枚举（ownKeys）等。

2024-03-22 15:13:38 912

原创【Vue3源码学习】— CH2.2 baseHandlers详解

BaseReactiveHandler是Vue响应式系统中所有处理器的基础，提供了处理普通对象和数组代理行为的基本逻辑。这些处理器利用Proxy来拦截对对象的操作，比如属性访问、设置、枚举和函数调用等，以实现响应式特性。

2024-03-20 20:02:38 747

原创【Vue3源码学习】— CH2.1 reactive.ts详解

如果对象的某个属性是一个ref（引用），在通过reactive转换的响应式对象中访问该属性时，你将直接得到ref内部的值，而不需要使用.value来访问。重要的是，尽管ref被自动解引用，但对这些值的读取和修改仍然是响应式的，Vue会追踪这些操作并在值变化时更新UI。当你对一个对象使用reactive时，不仅该对象本身变为响应式的，它的所有嵌套属性也都将递归地被转换为响应式的。这个代理对象能够拦截对原始对象的各种操作（如属性读取、写入等），使Vue能够追踪这些操作，并在必要时自动更新UI。

2024-03-19 18:48:09 776

原创【Vue3源码学习】— CH2. 深入Vue 3的响应式系统: @vue/reactivity

Vue 3的响应式系统通过简洁的API和强大的内部机制，为现代前端开发提供了无与伦比的灵活性和效率。通过深入理解Vue 3响应式系统的依赖追踪机制，开发者可以更加精确地控制应用的数据流和视图更新。这不仅为构建高效、可维护的Vue应用提供了坚实的基础，也极大地提升了开发体验。

2024-03-19 17:34:28 612

原创【Vue3源码学习】— CH1. Vue 3 概览

Composition API是Vue 3的一个重要新特性，它提供了一种更灵活的方式来组织和重用逻辑。通过使用setup函数，开发者可以更自由地组合响应式状态和功能，使得代码更加清晰和易于维护。

2024-03-14 19:13:58 772

原创 JS里的空值问题——undefind/null

对于函数参数的默认值，在 ES6/TypeScript 中，如果调用函数时未传递参数，或者参数被明确传递为 undefined，那么会使用参数的默认值。但是，如果参数被传递为 null，null 会被视为一个有效的值，因此不会触发默认参数值的使用。在这个示例中，只有当 param 没有被传递或者被明确传递为 undefined 时，函数才会使用 “default value” 作为其值。如果 param 被传递为 null，则 null 会被视为一个显式的值，因此会输出 null。

2024-03-14 18:25:49 334

原创【Vue3源码学习】— 准备工作

进入Vue 3的世界，意味着踏上了探索现代JavaScript框架的精髓之旅。Vue 3不仅仅是一个版本迭代，它代表了Vue生态系统的一次飞跃，引入了许多创新的特性和改进，比如Composition API、响应式系统的重写，以及更好的TypeScript集成。为了深入理解这些概念，掌握Vue 3的内部机制，我决定从源码层面开始我的学习之旅。学习源码是一个既挑战又充满奖赏的过程。它不仅是学习一个框架，同时也会对JavaScript进行更深入的学习，还需要对工程化和现代前端开发流程有所了解。

2024-03-13 20:05:47 972

原创前端演化：技术的流变与时代的印记

从早期的门户网站到现在的SPA、SSR、微前端，从jQuery、Bootstrap到Vue、React，开发者们不仅迅速接纳了新技术，还在这个基础上做出了自己的创新和贡献，共同推动了前端技术的发展。Bootstrap以其丰富的组件、灵活的格栅系统和可定制性而广受欢迎，为网站的美观和用户体验设定了新的标准。2006年，jQuery应运而生，它用简洁的语法统一了浏览器之间的差异，极大地简化了HTML的遍历、操作和事件处理，让DOM操作变得前所未有的容易，解决了跨浏览器的兼容性问题。

2024-03-11 15:45:55 804

原创 ngx-markdown 安装和使用

ngx-markdown 安装和使用1 通过用以下命令安装 ngx-markdown ，安装成功后会同时将库添加到 package.json 文件中。npm install ngx-markdown --save2. 由于库使用 Marked 解析器，需要将js引用添加到 angular.json文件中，要激活 Prism.js语法高亮，还需要包含如下"styles": [ "src/styles.less", "node_modules/prismjs/the

2022-04-16 23:51:24 1480

原创 Markdown数学公式语法

Markdown 数学公式语法1. 引用公式2. 希腊字母3. 上标(^)和下标(_)4. 分组{}5. 括号6. 求和(∑\sum∑)与积分(∫\int∫)7. 分式8. 字体9.根式(\sqrt:x\sqrt{x}x)10. 特殊函数11. 符号12. 矩阵13. 方程组14. 数组15. 颜色1. 引用公式行内公式, 将公式放在$…$中 . $\sum_{i=0}^n i^2 = \frac{(n^2+n)(2n+1)}{6}$∑i=0ni2=(n2+n)(2n+1)6\sum_{i=0}

2021-04-07 18:40:23 1197 1

原创 Markdown 常用语法

Markdown 常用语法功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入功能快捷键撤销：Ctrl/Command + Z重做：Ctrl/Command + Y加粗：Ctrl/Command + B斜体：Ctrl/Comm

2021-04-06 14:28:00 119

原创在windows上从0开始Angular项目

目录在windows上从0开始Angular项目1.安装 vm-windows2.安装node.js 和 npm3.安装代码编辑器4.安装Git5.安装Angular在windows上从0开始Angular项目电脑重装完系统，又要重新安装环境和软件，免不了各种搜索文档，所以打算记录下来，刚好是一个从完全空空到起一个angular项目的完整过程。为什么是angular，从最早开始的原生三剑客HTML、JavaScript和CSS,到Angular1.0，再到React和Vue，不知不觉几年间Angula

2020-05-12 23:31:54 337

YSG的博客