Vue3核心源码解析

/packages/complier-core

  • 定位​​：​​编译时核心​​，处理 Vue 模板的编译逻辑。
  • ​​核心功能​​：
    • ​​模板解析​​：将 .vue 文件的模板语法（HTML-like）解析为 ​​抽象语法树 (AST)​​。
    • ​​转换优化​​：静态节点提升（Hoist Static）、Patch Flags 标记（动态节点标记）。
    • ​​代码生成​​：将 AST 转换为可执行的 ​​渲染函数（render 函数）​​。
  • ​​特点​​：
    • 与平台无关，不直接处理浏览器或 DOM，只负责语法层面的转换。
    • 支持自定义编译器指令（如 v-xxx 的自定义扩展）。

  vue3模板编译原理

模板编译分为三个阶段：

1.解析阶段

       该阶段的核心任务是将原始的 HTML 模板字符串转换为初始的​​抽象语法树（AST）​​。解析器通过​​状态机（State Machine）​​逐字符扫描模板，识别出标签、属性、事件、插值表达式（如 {{ }}）和组件标签等语法单元。例如，对于 <div :class="cls">{{ text }}</div>，解析器会拆解出标签名 div、动态属性 :class 及其绑定表达式 cls，以及插值内容 text，最终构建出一棵树形结构的原始 AST。此阶段的 AST 仅保留模板的语法结构，尚未包含任何优化信息，但它为后续的转换和代码生成提供了基础数据结构。

2.转换阶段(transform)

转换阶段是 Vue3 编译流程的​​核心优化环节​​，通过对 AST 的多轮遍历，实现语义分析和结构改造。这一阶段包含多项关键技术：

1. Node Transforms 多步处理​​
​​作用​​：通过一系列转换函数（如 transformIf、transformFor）逐层处理 AST 节点，将模板声明式语法转换为可执行的 JavaScript 逻辑。
​​技术细节​​：

  • 递归遍历 AST，依次应用 v-if → 条件表达式、v-for → 循环结构等转换规则
  • 动态绑定分析（如识别 :class 和 {{ text }} 的动态性差异）
  • 为后续优化阶段（如静态提升）提供结构化标记

2. ​​静态提升（Static Hoisting）​​：识别纯静态内容（如无动态绑定的 <div>Static</div>），将其提取为常量并复用，避免重复创建虚拟节点。

3. ​​Patch Flags 标记​​：为动态节点添加二进制标志（如 CLASS | STYLE | PROPS），指导运行时仅对比变化的属性，跳过全量 Diff。例如，动态绑定的 :class 和 {{ text }} 会被标记为不同的 Patch Flag。

4. ​​块追踪（Block Tracking）​​：将包含动态子节点的父节点标记为“块”（Block），运行时通过 openBlock()（标记一个动态块的开始，开始收集后续动态节点） 和 closeBlock() （通过createBlock()自动关闭块，无需显式调用）控制更新范围，缩小虚拟 DOM 的比对粒度。

5. ​​缓存优化​​：对事件处理函数和动态属性值进行逻辑赋值缓存（如 _cache[0] || (_cache[0] = ...)），避免重复创建函数或计算表达式。

这些优化使得 AST 从“原始语法描述”升级为“富含运行时提示的中间形态”，为生成高效代码奠定了基础。

3.生成阶段

生成阶段将优化后的 AST 转换为​​可执行的渲染函数代码​​。代码生成器遍历 AST 节点，根据节点类型和优化标记拼接字符串，最终输出类似 function render() { ... } 的 JavaScript 函数。例如，一个包含静态提升和动态绑定的模板会被编译为：

const _hoisted_1 = createVNode("div", null, "Static");  
function render() {  return (openBlock(), createBlock("div", null, [  _hoisted_1,  createVNode("p", null, ctx.text, 1 /* TEXT */)  ]));  
}

此阶段还会注入运行时代码（如 createVNode、openBlock），并确保生成的代码符合 JavaScript 语法规范。最终输出的渲染函数与 Vue 的运行时协作，在组件渲染时高效生成和更新虚拟 DOM。

/packages/reactivity

  • 定位​​：​​响应式系统的独立实现​​，Vue3 的「数据驱动」核心。
  • ​​核心功能​​：
    • ​​依赖追踪​​：通过 Proxy + Reflect 实现数据的响应式代理。
    • ​​核心 API​​：
      • reactive：创建深度响应式对象。
      • ref：包装基本类型值为响应式引用。
      • effect：副作用函数（替代 Vue2 的 Watcher）。
      • computed：计算属性。
    • ​​依赖收集与触发​​：通过 track 和 trigger 管理依赖关系。

proxy通过new Proxy(target,handler) 生成，new Proxy是JS原生API,用于创建一个代理对象，这个代理对象会包装原始对象(target),并允许通过拦截器(handler)定义目标对象的操作行为

Proxy

一、new Proxy 的核心作用

1. 创建代理包装器
  • ​​输入​​：一个原始对象 target 和一个拦截器对象 handler
  • ​​输出​​：生成一个​​代理对象​​（Proxy Instance），该代理对象会​​转发所有操作到原始对象​​，但允许通过 handler 拦截特定操作
const raw = { a: 1 };
const handler = {get(target, key) {console.log(`读取属性 ${key}`);return target[key];}
};
const proxy = new Proxy(raw, handler);console.log(proxy.a); // 输出 "读取属性 a"，然后输出 1
2. 定义拦截行为
  • handler 对象中可定义​​陷阱函数（Traps）​​，用于拦截 13 种对象操作（如 get、set、deleteProperty 等）
  • 当对 Proxy 实例进行操作时，会优先触发对应的陷阱函数，未定义的陷阱会直接转发到原始对象

二、生成的 Proxy 实例特点

1. ​​透明访问性​​
  • ​​镜像原始对象​​：Proxy 实例的属性访问、方法调用等行为会默认转发到 target 
    const raw = { x: 10 };
const proxy = new Proxy(raw, {});
console.log(proxy.x); // 10（未定义陷阱，直接访问原始对象）
2. ​​操作可拦截性​​
  • ​​精细拦截​​：通过陷阱函数可拦截以下操作：
    陷阱函数拦截的操作
    get读取属性（如 obj.prop）
    set设置属性（如 obj.prop = 1）
    hasin 操作符（如 'prop' in obj）
    deletePropertydelete 操作符（如 delete obj.prop）
    apply函数调用（如 fn()）
    constructnew 操作符（如 new Fn()）
    ownKeysObject.keys()、for-in 循环等
3. ​​引用独立性​​
  • ​​独立对象​​：Proxy 实例是一个独立的对象，与 target 是不同引用 
    const raw = {};
const proxy = new Proxy(raw, {});
console.log(proxy === raw); // false
4. ​​动态关联性​​
  • ​​实时关联​​：Proxy 实例的操作会实时影响原始对象 
    const raw = { a: 1 };
const proxy = new Proxy(raw, {});
proxy.a = 2;
console.log(raw.a); // 2（修改代理实例会影响原始对象）
5. ​​不可变性​​
  • ​​代理不可逆​​：无法通过 Proxy 实例直接获取原始的 handler 或 target（需通过特殊属性或方法） 
    const proxy = new Proxy({}, {});
console.log(proxy); // 控制台输出 Proxy 对象，但无法直接看到 handler 和 target

三、在 Vue 3 中的特殊设计

在 packages/reactivity 模块中，Vue 3 的 reactive() 函数生成的 Proxy 实例有以下特点：

1. ​​响应式触发器​​
  • get 陷阱：触发依赖收集（track）
  • set 陷阱：触发更新通知（trigger）
2. ​​嵌套对象懒代理​​
  • 仅在访问嵌套属性时，才递归生成子 Proxy 对象 
    const obj = reactive({ nested: { a: 1 } // 此时 nested 未被代理
});
console.log(obj.nested); // 访问时生成嵌套 Proxy
3. ​​原始对象标记​​
  • 通过 ReactiveFlags.RAW 标记可获取原始对象

四、与普通对象的对比

特性普通对象Proxy 实例
动态属性拦截不支持支持（如新增属性、删除属性）
引用关系独立对象独立对象，但操作关联原始对象
操作拦截能力无可拦截 13 种操作
性能开销无微小（但频繁操作可能累积开销）

五、示例：实现一个简易响应式

const handler = {get(target, key) {console.log(`读取 ${key}`);return target[key];},set(target, key, value) {console.log(`设置 ${key} 为 ${value}`);target[key] = value;return true;}
};const raw = { count: 0 };
const proxy = new Proxy(raw, handler);proxy.count++; // 输出 "读取 count"，然后 "设置 count 为 1"

Reflect

一、Reflect 的本质

Reflect 是 ES6 引入的全局对象，提供了一套​​与对象操作方法一一对应的函数式 API​​。例如：

  • Reflect.get(target, key) ↔ 对应 target[key]
  • Reflect.set(target, key, value) ↔ 对应 target[key] = value
  • Reflect.has(target, key) ↔ 对应 key in target

其核心设计目标是​​规范化对象操作​​，使得原本隐式的操作（如属性读写、in 操作符）可以通过函数显式调用。

二、在 Proxy 陷阱中的必要性

当使用 Proxy 时，必须通过 Reflect 方法​​转发默认操作​​，否则会导致原始对象行为的丢失。以下是关键原因：

1. ​​保持 receiver 上下文正确性​​

在访问器属性（getter/setter）中，this 的指向需要正确绑定到代理对象（而非原始对象）。
通过 Reflect.get(target, key, receiver) 的第三个参数 receiver，可以确保 this 指向代理对象。

​​示例：​​

const raw = {_value: 0,get value() {return this._value; // this 必须指向代理对象}
};const proxy = new Proxy(raw, {get(target, key, receiver) {// 使用 Reflect 传递 receiverreturn Reflect.get(target, key, receiver);}
});console.log(proxy.value); // 正确触发代理的 get 陷阱
2. ​​返回值标准化​​

Reflect 方法返回布尔值或操作结果，与 Proxy 陷阱的返回值要求一致。例如：

  • Reflect.set 返回 boolean 表示是否设置成功
  • Reflect.deleteProperty 返回 boolean 表示是否删除成功

​​示例：​​

const proxy = new Proxy({}, {set(target, key, value, receiver) {// 必须返回布尔值return Reflect.set(target, key, value, receiver);}
});
3. ​​避免破坏对象内部方法​​

直接操作 target[key] 可能绕过对象内部的 [[Get]]、[[Set]] 等内部方法，而 Reflect 确保操作符合规范。

在 JavaScript 中，直接通过 target[key] 操作对象属性可能会绕过对象内部的 [[Get]] 和 [[Set]] 等内部方法，原因如下：

一、[[Get]] 和 [[Set]] 的本质

对象的属性访问（如 obj.prop）和赋值（如 obj.prop = value）本质上会触发对象内部的 [[Get]] 和 [[Set]] 方法。这些内部方法负责：

  1. ​​访问器属性（getter/setter）的执行​​
  2. ​​原型链的查找​​
  3. ​​属性描述符（如 writable、configurable）的校验​​

二、直接操作 target[key] 的问题

当在 Proxy 的陷阱函数中直接操作 target[key] 时，可能绕过以下关键逻辑：

1. ​​绕过访问器属性（getter/setter）​​

如果目标对象（target）的属性是访问器属性（定义了 get 或 set），直接通过 target[key] 访问或赋值会​​跳过访问器逻辑​​，直接操作底层值。

​​示例：​​

const obj = {get value() {console.log("getter 被调用");return this._value;},set value(v) {console.log("setter 被调用");this._value = v;}
};const proxy = new Proxy(obj, {get(target, key) {// 直接返回 target[key]，绕过 getterreturn target[key]; // ❌ 错误方式},set(target, key, value) {// 直接赋值 target[key]，绕过 settertarget[key] = value; // ❌ 错误方式return true;}
});proxy.value = 1; // 不会触发 setter 的 console.log
console.log(proxy.value); // 不会触发 getter 的 console.log
  • ​​结果​​：直接操作 target[key] 会导致访问器逻辑被绕过，_value 被直接读写。
2. ​​破坏 this 绑定​​

访问器属性中的 this 默认指向原始对象（target），而非代理对象（proxy）。这会导致依赖代理对象的逻辑（如嵌套响应式）失效。

​​示例：​​

const raw = {get value() {return this._value; // this 指向 raw，而非 proxy}
};const proxy = new Proxy(raw, {get(target, key) {return target[key]; // ❌ this 错误绑定到 raw}
});proxy._value = 42;
console.log(proxy.value); // 42，但若 proxy 有拦截逻辑，this 指向错误会导致问题
3. ​​绕过嵌套 Proxy​​

如果目标对象本身是另一个 Proxy，直接操作 target[key] 会​​绕过其陷阱函数​​，直接访问原始值。

​​示例：

const inner = new Proxy({ a: 1 }, {get(target, key) {console.log("inner 的 get 陷阱");return Reflect.get(target, key);}
});const outer = new Proxy(inner, {get(target, key) {// 直接访问 target[key]，绕过 inner 的 Proxy 陷阱return target[key]; // ❌ 不会触发 inner 的 get 陷阱}
});console.log(outer.a); // 直接输出 1，无日志
4. ​​忽略原型链和属性描述符​​

直接操作 target[key] 可能绕过原型链查找和属性描述符（如 writable）的校验。

​​示例：​​

const parent = { a: 1 };
const child = Object.create(parent);
const proxy = new Proxy(child, {get(target, key) {return target[key]; // ❌ 直接返回 undefined（不会查找原型链）}
});console.log(proxy.a); // undefined（正确应为 1）

三、为什么 Reflect 能避免这些问题？

Reflect 方法（如 Reflect.get）会严格遵循对象的 [[Get]] 和 [[Set]] 内部方法，确保以下行为：

1. ​​触发访问器属性​​
const proxy = new Proxy(obj, {get(target, key, receiver) {return Reflect.get(target, key, receiver); // ✅ 触发 getter},set(target, key, value, receiver) {return Reflect.set(target, key, value, receiver); // ✅ 触发 setter}
});
2. ​​绑定正确的 this（通过 receiver 参数）​​
Reflect.get(target, key, receiver);
  • receiver 参数确保访问器属性中的 this 指向代理对象（而非原始对象）。
3. ​​处理原型链和属性描述符​​
Reflect.get(target, key, receiver); // ✅ 沿原型链查找属性
Reflect.set(target, key, value, receiver); // ✅ 校验 `writable` 等属性
4. ​​支持嵌套 Proxy​​
// 通过 Reflect 触发内层 Proxy 的陷阱
Reflect.get(innerProxy, key, receiver); // ✅ 触发 innerProxy 的 get 陷阱

四、关键对比

操作方式直接操作 target[key]使用 Reflect
​​访问器属性​​绕过 getter/setter正确触发 getter/setter
​​this 绑定​​指向原始对象（target）指向代理对象（通过 receiver）
​​原型链​​可能中断查找完整执行原型链查找
​​嵌套 Proxy​​绕过内层 Proxy 的陷阱触发内层 Proxy 的陷阱
​​属性描述符校验​​忽略 writable、configurable 等严格校验

三、在 Vue 响应式系统中的具体应用

Vue 3 的 reactive() 函数通过 Proxy + Reflect 实现响应式代理。以下是核心场景：

1. ​​依赖收集（Track）​​

在 get 陷阱中，通过 Reflect.get 获取值，并收集依赖：

function createGetter() {return function get(target: object, key: string | symbol, receiver: object) {// 使用 Reflect.get 获取原始值const res = Reflect.get(target, key, receiver);// 依赖追踪track(target, TrackOpTypes.GET, key);// 递归代理嵌套对象if (isObject(res)) {return reactive(res);}return res;};
}
2. ​​触发更新（Trigger）​​

在 set 陷阱中，通过 Reflect.set 设置值，并触发更新：

function createSetter() {return function set(target: object,key: string | symbol,value: unknown,receiver: object): boolean {// 获取旧值const oldValue = (target as any)[key];// 使用 Reflect.set 设置值const result = Reflect.set(target, key, value, receiver);// 触发更新（仅当值变化时）if (hasChanged(value, oldValue)) {trigger(target, TriggerOpTypes.SET, key);}return result;};
}
3. ​​处理 has 和 ownKeys 陷阱​​

拦截 in 操作符和 Object.keys()：

四、Reflect 与直接操作对象的区别

操作方式直接操作对象（如 target[key]）使用 Reflect
​​this 绑定​​this 指向原始对象通过 receiver 参数控制 this 指向
​​返回值​​无标准返回值（可能抛出错误）标准化布尔值或操作结果
​​原型链处理​​可能无法正确处理继承属性严格遵循对象原型链规则
​​函数式调用​​无法以函数形式调用函数式 API，便于组合和抽象

五、关键设计思想总结

  1. ​​行为一致性​​
    Reflect 方法严格遵循 ECMAScript 规范，确保代理对象的行为与原对象一致。

  2. ​​代理链完整性​​
    在多层代理（如 Vue 的 readonly(reactive(obj))）中，Reflect 能正确传递 receiver，维护代理链的上下文。

  3. ​​错误处理简化​​
    通过 Reflect 的布尔返回值，避免手动处理异常（如设置不可写属性时的 TypeError）。

示例：没有 Reflect 的陷阱

若在 Proxy 陷阱中不使用 Reflect，会导致意外行为：

const raw = { a: 1 };
const proxy = new Proxy(raw, {get(target, key) {// 错误！未使用 Reflect.get，this 指向错误return target[key];},set(target, key, value) {// 错误！未返回布尔值target[key] = value;return true;}
});const child = { __proto__: proxy };
console.log(child.a); // 期望触发 get 陷阱，但实际不会！

/packages/runtime-core

  • 定位​​：​​运行时核心​​，实现 Vue 组件的生命周期、虚拟 DOM、渲染调度等。
  • ​​核心功能​​：
    • ​​虚拟 DOM 算法​​：Diff 算法（patchKeyedChildren）、节点 Patch 逻辑。
    • ​​组件系统​​：组件实例化、Props/Emits 处理、Slots 管理。
    • ​​生命周期钩子​​：onMounted、onUpdated 等 Composition API 的实现。
    • ​​自定义渲染器​​：提供 createRenderer API，支持跨平台渲染（如小程序、Canvas）。
  • ​​特点​​：
    • 平台无关，不直接操作 DOM，依赖外部传入的 ​​宿主环境 API​​。
    • 包含 Vue 的核心逻辑，但需与 runtime-dom 结合才能用于浏览器。

/packages/runtime-dom

  • 定位​​：​​浏览器端运行时​​，提供 DOM 相关的原生操作。
  • ​​核心功能​​：
    • ​​DOM 操作 API​​：封装 document.createElement、parent.appendChild 等原生方法。
    • ​​事件处理​​：标准化事件监听（如 onClick 的自动转换）。
    • ​​属性处理​​：处理 HTML Attributes、DOM Properties、类名、样式等。
  • ​​特点​​：
    • 基于 runtime-core 实现，是 Vue 在浏览器环境下的 ​​默认渲染器​​。
    • 导出 createApp 等浏览器端专用 API。

/packages/runtime-test

  • ​​定位​​：​​测试用运行时​​，用于单元测试场景。
  • ​​核心功能​​：
    • ​​轻量级 DOM 模拟​​：提供内存中的虚拟 DOM 操作，避免依赖真实浏览器环境。
    • ​​序列化输出​​：将渲染结果序列化为字符串，方便断言（Assertion）。
    • ​​生命周期追踪​​：记录组件生命周期钩子的调用顺序。
  •  ​​使用场景​​：
    • 测试组件渲染逻辑，不依赖 jsdom 或浏览器。
    • 验证虚拟 DOM 的 Diff 算法是否正确。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/diannao/79962.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

n8n 中文系列教程_05.如何在本机部署/安装 n8n（详细图文教程）

n8n 中文系列教程_05.如何在本机部署/安装 n8n（详细图文教程）

n8n 是一款强大的开源工作流自动化工具&#xff0c;可帮助你连接各类应用与服务&#xff0c;实现自动化任务。如果你想快速体验 n8n 的功能&#xff0c;本机部署是最简单的方式。本教程将手把手指导你在 Windows 或 MacOS 上通过 Docker 轻松安装和运行 n8n&#xff0c;无需服务…
阅读更多...
【python】pyCharm常用快捷键使用-（2）

【python】pyCharm常用快捷键使用-（2）

pyCharm常用快捷键使用 快速导入任意类 【CTRLALTSPACE】代码补全【CTRLSHIFTENTER】代码快速修正【ALTENTER】代码调试快捷键
阅读更多...
Docker 镜像、容器和 Docker Compose的区别

Docker 镜像、容器和 Docker Compose的区别

前言&#xff1a;Docker 的镜像、容器和 Docker Compose 是容器化技术的核心组件&#xff0c;以下是对它们的详细解析及使用场景说明。 ​​1、Docker 镜像&#xff08;Image&#xff09;​​ ​​定义​​&#xff1a; 镜像是只读模板&#xff0c;包含运行应用程序所需的代码、…
阅读更多...
算法——背包问题（分类）

算法——背包问题（分类）

背包问题&#xff08;Knapsack Problem&#xff09;是一类经典的组合优化问题&#xff0c;广泛应用于资源分配、投资决策、货物装载等领域。根据约束条件和问题设定的不同&#xff0c;背包问题主要分为以下几种类型&#xff1a; 1. 0-1 背包问题&#xff08;0-1 Knapsack Probl…
阅读更多...
多路由器通过RIP动态路由实现通讯（单臂路由）

多路由器通过RIP动态路由实现通讯（单臂路由）

多路由器通过RIP动态路由实现通讯&#xff08;单臂路由&#xff09; R1(开启端口并配置IP) Router>en Router#conf t Router(config)#int g0/0 Router(config-if)#no shu Router(config-if)#no shutdown Router(config-if)#ip add 192.168.10.254 255.255.255.0 Router(c…
阅读更多...
从底层设计原理分析并理解SQL 的执行顺序

从底层设计原理分析并理解SQL 的执行顺序

​一、执行顺序的底层设计原理​​ ​​1. 数据源的确定与连接&#xff08;FROM → ON → JOIN&#xff09;​​ ​​FROM​​&#xff1a;数据库首先需要确定数据的物理来源&#xff0c;从磁盘加载表或子查询的原始数据。此时尚未应用任何筛选&#xff0c;仅读取元数据&#…
阅读更多...
游戏引擎学习第237天:使用 OpenGL 显示图像

游戏引擎学习第237天:使用 OpenGL 显示图像

win32_game.cpp: 禁用 PFD_DOUBLEBUFFER 我们正在处理一个新的开发阶段&#xff0c;目标是在使用 OpenGL 渲染的同时能正常通过 OBS 进行直播。昨天我们已经尝试了一整天来解决这个问题&#xff0c;希望能找到一种方式让 OBS 能正确地捕捉到 OpenGL 的窗口画面。虽然我们不确定…
阅读更多...
(二)mac中Grafana监控Linux上的MySQL(Mysqld_exporter)

(二)mac中Grafana监控Linux上的MySQL(Mysqld_exporter)

框架&#xff1a;GrafanaPrometheusMysqld_exporter 一、监控查看端安装 Grafana安装-CSDN博客 普罗米修斯Prometheus监控安装&#xff08;mac&#xff09;-CSDN博客 1.启动Grafana服务 brew services start grafana 打开浏览器输入http://localhost:3000进入grafana登录…
阅读更多...
GitHub 趋势日报 (2025年04月17日)

GitHub 趋势日报 (2025年04月17日)

本日报由 TrendForge 系统生成 https://trendforge.devlive.org/ &#x1f4c8; 今日整体趋势 Top 10 排名项目名称项目描述今日获星总星数语言1Anduin2017/HowToCook程序员在家做饭方法指南。Programmer’s guide about how to cook at home (Simplified Chinese onl…⭐ 224…
阅读更多...
(一)mac中Grafana监控Linux上的CPU等(Node_exporter 安装使用)

(一)mac中Grafana监控Linux上的CPU等(Node_exporter 安装使用)

框架&#xff1a;GrafanaPrometheusNode_exporter 机器状态监控(监控服务器CPU,硬盘&#xff0c;网络等状态) Node_exporter安装在被测服务器上&#xff0c;启动服务 各步骤的IP地址要换为被测服务器的IP地址Prometheus.yml的 targets值网页访问的ip部分grafana添加数据源的…
阅读更多...
java IO/NIO/AIO

java IO/NIO/AIO

(✪▽✪)曼波~~~~&#xff01;让曼波用最可爱的赛马娘方式给你讲解吧&#xff01;(⁄ ⁄•⁄ω⁄•⁄ ⁄) &#x1f3a0;曼波思维导图大冲刺&#xff08;先看框架再看细节哦&#xff09;&#xff1a; &#x1f4da; 解释 Java 中 IO、NIO、AIO 的区别和适用场景&#xff1a; …
阅读更多...
Silverlight发展历程（微软2021年已经停止支持Silverlight 5）

Silverlight发展历程（微软2021年已经停止支持Silverlight 5）

文章目录 Microsoft Silverlight 发展历程引言起源与背景&#xff08;2006-2007&#xff09;互联网技术格局与微软的挑战WPF/E 项目的启动 Silverlight 1.0 的诞生&#xff08;2007&#xff09;正式命名与首次发布初步的市场定位 Silverlight 2.0&#xff1a;真正的突破&#x…
阅读更多...
【大数据、数据开发与数据分析面试题汇总（含答案）】

【大数据、数据开发与数据分析面试题汇总（含答案）】

在大数据、数据开发与数据分析领域的面试中&#xff0c;扎实掌握各类知识点至关重要。以下是精心整理的面试题&#xff0c;涵盖单选题和多选题&#xff0c;助你备考一臂之力。 试题目录 大数据、数据开发与数据分析高频面试题解析1. 数据仓库分层架构设计2. 维度建模与范式建模…
阅读更多...
Docker部署禅道21.6开源版本

Docker部署禅道21.6开源版本

将数据库相关环境变量分开&#xff0c;增加注释或空格使得命令更易读。 如果你的 MySQL 主机、端口等配置没有变化&#xff0c;应该确保这些信息是安全的&#xff0c;并考虑使用 Docker secrets 或环境变量配置来避免直接暴露敏感信息。 docker run -d -it --privilegedtrue …
阅读更多...
Yocto项目实战教程 · 第4章：4.2小节-菜谱

Yocto项目实战教程 · 第4章：4.2小节-菜谱

&#x1f50d; B站相应的视频教程&#xff1a; &#x1f4cc; Yocto项目实战教程-第4章-4.2小节-菜谱 记得三连&#xff0c;标为原始粉丝。 在 Yocto 项目中&#xff0c;**菜谱&#xff08;Recipe&#xff09;**承载了包的配置信息、源码获取方式、编译与安装步骤&#xff0c;是…
阅读更多...
【pytorch】torch.nn.Unfold操作

【pytorch】torch.nn.Unfold操作

说明 一个代码里涉及到了unfold的操作&#xff0c;看了半天官网都没整明白维度怎么变化的&#xff0c;参考这个链接搞明白了&#xff1a; https://blog.csdn.net/ViatorSun/article/details/119940759 https://zhuanlan.zhihu.com/p/361140988 维度计算 输入&#xff08; N,…
阅读更多...
Linux 固定IP地址

Linux 固定IP地址

一.查看网口状态&#xff1a; $ ip a 二.配置静态IP文件&#xff1a; $ sudo vi /etc/network/interface auto eth0 iface eth0 inet static address 192.168.0.252 gateway 192.168.0.1 netmask 255.255.255.0 #network 192.168.0.0 #broadcast 192.168.0.255 三.重启网卡让新…
阅读更多...
android的 framework 有哪些知识点和应用场景

android的 framework 有哪些知识点和应用场景

Android Framework 知识点 1. 四大组件 Activity&#xff08;活动&#xff09; 是 Android 应用中最基本的组件&#xff0c;用于实现用户界面。一个 Activity 通常对应一个屏幕的内容。有自己的生命周期&#xff0c;包括 onCreate、onStart、onResume、onPause、onStop、onDe…
阅读更多...
如何在PDF.js中改造viewer.html以实现PDF的动态加载

如何在PDF.js中改造viewer.html以实现PDF的动态加载

在PDF.js中改造viewer.html实现PDF动态加载&#xff0c;需结合参数传递、文件流处理及跨域配置等技术。以下是综合多个技术方案的核心实现步骤&#xff1a; ​一、基础参数传递法​ 1. ​URL参数动态加载​ 通过修改viewer.html的URL参数传递PDF路径&#xff0c;适用于静态文…
阅读更多...
组件之间的数据通信方式

组件之间的数据通信方式

Vue 的传值方式&#xff08;即组件之间的数据通信方式&#xff09;根据组件关系不同&#xff08;父子、兄弟、跨层级&#xff09;有所区别。下面是常见的传值方式&#xff0c;按使用场景来分类&#xff1a; 一、父子组件传值 1. props&#xff08;父 -> 子&#xff09; 父…
阅读更多...
最新文章

Copyright @ 2022~2023