当前位置： 首页 > news >正文

vue设计与实现-框架设计

news 2026/4/19 15:23:34

权衡的艺术

命令式和声明式

视图层框架通常分为命令式和声明式，各有优缺。jquery是一种命令式框架。命令式框架关注过程，而声明式框架关注结果。对于vue来说，过程被vue封装了，所以vue内部是命令式的，但vue暴露给用户是声明式

性能与可维护性权衡

结论：声明式的性能不优于命令式。

因为声明式多了封装的开销，可以这么理解

那vue仍使用声明式的意义，就是保持注重结果同时减小封装开销

虚拟dom性能

虚拟dom是为了找出声明式和命令式之间的最小开销差而出现的

可以看到，虚拟dom理论上性能并不比js高，因为js是命令式。虽然命令式理论上性能好，但人们很难写出性能很ok的命令式代码，即使做到了也会消耗不少精力。有没有什么方法可以用较少精力还能保证性能不下降？这是虚拟dom要解决的问题

原生js不包含innerHTML方法，这个方法比较特殊

例子 比较innerHTML和虚拟dom性能，创建一个dom

方法1 js定义字符串dom，然后用innerHTML方法解析字符串dom

性能分析：dom操作开销比js原生语句开销高很多

当用innerhtml更新dom时，会销毁所有旧dom，然后创建所有新dom，因此开销较大

方法2 虚拟dom操作dom

创建虚拟dom树，遍历虚拟dom树找到目标dom，创建/更新目标dom

和js相比，虚拟dom多出了虚拟dom树构建与遍历的开销

运行时和编译时

类似于解释和编译，选择哪种方式。

框架设计核心要素

提升用户开发体验

vue报错会有一些用户友好的warn等，可以容易发现问题所在，而不是js原生报错，难以定位问题

控制框架代码体积

vue的warn的入参有个__DEV__，这个在vue用rollup.js构建时会输出两个版本，分别用于开发与生产，不同版本会设置__DEV__为True False，提高了代码使用效率

tree-shaking

tree-shaking指去除框架中用不到的代码

关于框架构建产物

特性开关

错误处理

良好的typescript类型支持

设计思路

声明式描述UI

就是用js对dom进行变量定义

渲染器

函数，可以入参虚拟dom和dom挂载点，在函数内部处理虚拟dom，变为真实dom

组件本质

模板工作原理

vuejs是模块组成的有机整体

相关文章：

vue设计与实现-框架设计

权衡的艺术 命令式和声明式 视图层框架通常分为命令式和声明式，各有优缺。jquery是一种命令式框架。命令式框架关注过程，而声明式框架关注结果。对于vue来说，过程被vue封装了，所以vue内部是命令式的，但vue暴露给用户…...

编程日记 2025/1/6 3:44:34

Stable Diffusion和Midjourney有什么区别？

Stable Diffusion 和 Midjourney 主要有以下区别： 目录 费用与可访问性 设备要求 安装与使用 学习成本 图像生成效果 可控性与定制性 私密性 费用与可访问性 Stable Diffusion：开源免费，任何人都可以免费下载并自行部署使用&#xf…...

编程日记 2025/1/6 3:35:23

即插即用，无痛增强模型生成美感！字节跳动提出VMix:细粒度美学控制，光影、色彩全搞定

文章链接：https://arxiv.org/pdf/2412.20800 代码地址：https://github.com/fenfenfenfan/VMix 项目地址：https://vmix-diffusion.github.io/VMix/ 亮点直击 分析并探索现有模型在光影、色彩等细粒度美学维度上生成图像的差异，提出…...

编程日记 2025/1/6 3:28:15

面向对象分析和设计OOA/D，UML，GRASP

目录 什么是分析和设计？ 什么是面向对象的分析和设计？ 迭代开发 UML 用例图 交互图 基于职责驱动设计 GRASP 常见设计原则 什么是分析和设计？ 分析，强调是对问题和需求的调查研究，不是解决方案。例如&#x…...

编程日记 2025/1/6 3:27:13

【每日学点鸿蒙知识】广告ID、NFC手机充值、CSS支持语法、PC与模拟器交互、SO热更新等

1、HamonyOS 样机获取成功返回Oaid为00000000-0000-0000-0000-000000000000？ 请求授权时需要触发动态授权弹窗,看一下是不是没有触发授权弹窗。 可以参考以下代码以及文档： // ets import identifier from ohos.identifier.oaid; import hilog from oh…...

编程日记 2025/1/6 3:25:11

30分钟学会HTML

HTML 基本语法 HTML（HyperText Markup Language）是构成网页内容的基础。它使用一系列的标签来描述网页的结构，包括文本、图片、链接等元素。浏览器会解析这些标签并渲染成我们看到的网页。 在线体验一下 CodePen (在线 HTML 编辑器)。 千万不…...

编程日记 2025/1/6 3:24:10

服务器信息整理：用途、操作系统安装日期、设备序列化、IP、MAC地址、BIOS时间、系统

文章目录 引言I BIOS时间Windows查看BIOS版本安装日期linux查看BIOS时间II 操作系统安装日期LinuxWindowsIII MAC 地址IV 设备序列号Linux 查看主板信息知识扩展Linux常用命令引言 信息内容：重点信息：用途、操作系统安装日期、设备序列化、IP、MAC地址、BIOS时间、系统 Linux…...

编程日记 2025/1/6 3:22:04

Golang设计模式目录

go语言实现设计模式 1 文章目录： 1.1 创建型模式 1.Golang设计模式之工厂模式2.Golang设计模式之抽象工厂模式3.Golang设计模式之单例模式4.Golang设计模式之建造者模式5.Golang设计模式之原型模式 1.2 结构型模式 6.Golang设计模式之适配器模式7.Golang设计模式之桥…...

编程日记 2025/1/6 3:18:59

选择IT驻场外包公司，要找有哪些资质的公司

在当今数字化快速发展的时代，IT驻场外包服务成为众多企业优化运营、提升竞争力的关键选择。无论是初创企业寻求技术起步支持，还是大型企业为降低成本、专注核心业务而将部分 IT 职能外包，IT 外包公司都扮演着至关重要的角色。然而&#xff0c…...

编程日记 2025/1/6 3:17:58

Java List 集合详解：基础用法、常见实现类与高频面试题解析

正文 在 Java 集合框架中，List 是一个非常重要的接口，广泛用于存储有序的元素集合。本文将带你深入了解 List 接口的基本用法、常见实现类及其扩展，同时通过实际代码示例帮助你快速掌握这些知识。 👉点击获取2024Java学习资料 1…...

编程日记 2025/1/6 3:16:57

Arduino UNO 驱动1.8 TFT屏幕显示中文

背景 最近入手了一块1.8寸的tft屏幕&#xff0c;通过学习文档&#xff0c;已经掌握了接线&#xff0c;显示英文、数字、矩形区域、划线、画点等操作&#xff0c; 但是想显示中文的时候操作比较复杂。 问题 1、arduino uno 驱动这款屏幕目前使的是自带的<TFT.h> 库操作…...

编程日记 2025/1/6 3:03:45

Flink operator实现自动扩缩容

官网文档位置&#xff1a; 1.Autoscaler | Apache Flink Kubernetes Operator 2.Configuration | Apache Flink Kubernetes Operator 1.部署K8S集群 可参照我之前的文章k8s集群搭建 2.Helm安装Flink-Operator helm repo add flink-operator-repo https://downloads.apach…...

编程日记 2025/1/6 2:59:39

分布式系统架构6：链路追踪

这是小卷对分布式系统架构学习的第6篇文章&#xff0c;关于链路追踪&#xff0c;之前写过traceId的相关内容&#xff1a;https://juejin.cn/post/7135611432808218661&#xff0c;不过之前写的太浅了&#xff0c;且不成系统&#xff0c;只是简单的理解&#xff0c;今天来捋一下…...

编程日记 2025/1/6 2:55:33

vite-plugin-imagemin安装问题

vite-plugin-imagemin 是一款图片资源压缩插件，能够在打包的时候显著的降低图片资源占用。不过，在安装过程中我们遇到了如下的问题。 对于上面的问题，有以下几种常见的解决方案： 1，使用 yarn 在 package.json 内配置(推荐) 打开 package.json 配置文件，然后添加如下脚本…...

编程日记 2025/1/6 2:49:28

Git revert回滚

回退中间的某次提交&#xff08;此操作在预生产分支上比较常见&#xff09;&#xff0c;建议此方式使用命令进行操作&#xff08;做好注释&#xff0c;方便后续上线可以找到这个操作&#xff09; Git操作&#xff1a; 命令&#xff1a;revert -n 版本号 1&#xff1a;git re…...

编程日记 2025/1/6 2:42:22

永磁同步电机预测模型控制（MPC)

永磁同步电机预测模型控制&#xff08;MPC) 文章目录 前言1、模型预测控制1.1 连续控制集模型预测控制&#xff08;CCS-MPC&#xff09;1.2 有限控制集模型预测控制&#xff08;FCS-MPC&#xff09;1.3 模型预测控制的优缺点 2、永磁同步电机模型预测控制2.1 预测模型2.2 价值…...

编程日记 2025/1/6 2:40:21

【JAVA】switch ... case ... 的用法

语法结构&#xff1a; switch(表达式){ case 值1&#xff1a; 表达式和值1匹配时执行的语句 break; case 值2&#xff1a; 表达式和值2匹配时执行的语句 break; …...

编程日记 2025/1/6 2:35:15

基于STM32的热带鱼缸控制系统的设计

文章目录 一、热带鱼缸控制系统1.题目要求2.思路3.电路仿真3.1 未仿真3.2 开始仿真&#xff0c;显示屏显示水温、浑浊度、光照强度等值3.3 当水温低于阈值&#xff0c;开启加热并声光报警3.4 当浑浊度高于阈值&#xff0c;开启自动换水并声光报警3.5 当光照低于阈值&#xff0c…...

编程日记 2025/1/6 2:33:11

Vue项目整合与优化

前几篇文章&#xff0c;我们讲述了 Vue 项目构建的整体流程&#xff0c;从无到有的实现了单页和多页应用的功能配置&#xff0c;但在实现的过程中不乏一些可以整合的功能点及可行性的优化方案&#xff0c;就像大楼造完需要进行最后的项目验收改进一样&#xff0c;有待我们进一步…...

编程日记 2025/1/6 2:24:03

WinForm开发-自定义组件-1. 工具栏: UcompToolStrip

这里写自定义目录标题 1. 工具栏: UcompToolStrip1.1 展示效果1.2 代码UcompToolStrip.csUcompToolStrip.Designer.cs 1. 工具栏: UcompToolStrip 自定义一些Winform组件 1.1 展示效果 1&#xff09;使用效果 2&#xff09;控件事件 1.2 代码 设计 编码 UcompToolStrip.…...

编程日记 2025/1/6 2:18:57

深度剖析ESP32蓝牙音频开发：实战优化方案与最佳实践

深度剖析ESP32蓝牙音频开发&#xff1a;实战优化方案与最佳实践 【免费下载链接】arduino-esp32 Arduino core for the ESP32 项目地址: https://gitcode.com/GitHub_Trending/ar/arduino-esp32 在物联网和智能音频设备快速发展的今天&#xff0c;ESP32凭借其强大的蓝牙…...

编程新知 2026/4/19 14:46:26

新手必看！BUFF67蓝牙机械键盘到手后，这5个设置不调真不行

新手必看&#xff01;BUFF67蓝牙机械键盘到手后&#xff0c;这5个设置不调真不行 刚拿到BUFF67这款支持蓝牙5.2双模的热插拔机械键盘&#xff0c;很多用户会迫不及待地插上USB线开始使用。但这款键盘的强大功能远不止"开箱即用"这么简单。出厂默认设置虽然能保证基本…...

编程新知 2026/4/19 14:25:57

Kubernetes的iptables 与 IPVS【20260419004篇】

文章目录 Kubernetes网络全景解析：内网/外网流量、CNI与Ingress深度指南 第一部分：Kubernetes网络流量模型 1.1 内网流量与外网流量的本质区别 1.1.1 流量类型定义与特征 1.1.2 流量路径对比 1.2 Kubernetes网络模型四大基础原则 第二部分：CNI插件深度解析 2.1 Flannel：简单…...

编程新知 2026/4/19 14:15:53

ESP32开发板到手后，除了点灯还能干啥？从Hello World到连接天猫精灵的完整项目实战

ESP32开发板实战&#xff1a;从点灯到智能家居语音控制的全链路开发指南 刚拿到ESP32开发板时&#xff0c;大多数人的第一个项目往往是点亮LED——这确实是验证硬件工作的好方法。但这款售价不到50元的开发板&#xff0c;实际上隐藏着足以支撑完整物联网项目的强大能力。本文将…...

编程新知 2026/4/19 11:58:46

避坑指南：PyTorch中ReflectionPad2d和ReplicationPad2d用错了？详解两者区别与适用场景

PyTorch边界填充终极指南&#xff1a;ReflectionPad2d与ReplicationPad2d的深度抉择 在图像处理任务中&#xff0c;边界填充&#xff08;Padding&#xff09;是一个看似简单却影响深远的关键操作。许多开发者在实现卷积神经网络时&#xff0c;往往只关注模型架构和损失函数的设…...

编程新知 2026/4/19 10:44:56

JAX自动微分超快

&#x1f493; 博客主页&#xff1a;瑕疵的CSDN主页 &#x1f4dd; Gitee主页&#xff1a;瑕疵的gitee主页 ⏩ 文章专栏&#xff1a;《热点资讯》 JAX自动微分&#xff1a;解锁AI训练的超高速引擎目录JAX自动微分&#xff1a;解锁AI训练的超高速引擎 引言 一、技术原理&#x…...

编程新知 2026/4/19 10:34:31

解锁学术新秘籍：书匠策AI——期刊论文的智能导航员

在学术的浩瀚海洋中&#xff0c;每一位探索者都渴望拥有一盏明灯&#xff0c;照亮前行的道路&#xff0c;尤其是在撰写期刊论文这一艰巨任务面前。传统上&#xff0c;这往往意味着无数次的文献检索、框架搭建、内容填充与反复修改&#xff0c;过程既耗时又费力。但如今&#xf…...

编程新知 2026/4/19 9:51:03

心跳反复加载 LM Studio 模型导致不完整回合 / Heartbeat repeatedly loads LM Studio model, ends in incomplete turn

Bug 报告：心跳反复加载 LM Studio 模型导致不完整回合 / Heartbeat repeatedly loads LM Studio model, ends in incomplete turn 链接: https://blog.csdn.net/cosmoslife 作者: cosmoslife 日期: 2026/04/18 11:15:30 仓库: openclaw/openclaw 创建时间: 2026-04-18 | 关闭时…...

编程新知 2026/4/19 9:36:23

树莓派Pico变砖别慌！手把手教你用官方UF2文件从‘未知设备’恢复（附文件下载）

树莓派Pico救砖指南&#xff1a;用官方UF2文件从“未知设备”状态完美恢复 当你兴致勃勃地调试树莓派Pico开发板时&#xff0c;突然发现设备管理器里只剩下一个冷冰冰的“Unknown Device”提示——这种瞬间的心跳加速&#xff0c;每个嵌入式开发者都深有体会。上周三凌晨两点&…...

编程新知 2026/4/19 9:29:57

QWEN-AUDIO部署案例：离线环境（无外网）中QWEN-AUDIO全组件本地化部署

QWEN-AUDIO部署案例&#xff1a;离线环境&#xff08;无外网&#xff09;中QWEN-AUDIO全组件本地化部署 1. 引言&#xff1a;当语音合成遇上“信息孤岛” 想象一下这个场景&#xff1a;你在一家对数据安全要求极高的金融机构、一个物理隔离的科研实验室&#xff0c;或者一个网…...

编程新知 2026/4/19 9:25:45