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

vue设计与实现-框架设计

news 2026/2/7 18:06:39

权衡的艺术

命令式和声明式

视图层框架通常分为命令式和声明式，各有优缺。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

【Linux】C语言执行shell指令

在C语言中执行Shell指令 在C语言中&#xff0c;有几种方法可以执行Shell指令&#xff1a; 1. 使用system()函数 这是最简单的方法&#xff0c;包含在stdlib.h头文件中&#xff1a; #include <stdlib.h>int main() {system("ls -l"); // 执行ls -l命令retu…...

编程新知 2025/11/20 18:42:48

Java-41 深入浅出 Spring - 声明式事务的支持 事务配置 XML模式 XML+注解模式

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

编程新知 2026/2/6 11:05:22

linux 下常用变更-8

1、删除普通用户 查询用户初始UID和GIDls -l /home/ ###家目录中查看UID cat /etc/group ###此文件查看GID删除用户1.编辑文件 /etc/passwd 找到对应的行&#xff0c;YW343:x:0:0::/home/YW343:/bin/bash 2.将标红的位置修改为用户对应初始UID和GID&#xff1a; YW3…...

编程新知 2025/10/7 15:08:22

【决胜公务员考试】求职OMG——见面课测验1

2025最新版&#xff01;&#xff01;&#xff01;6.8截至答题&#xff0c;大家注意呀&#xff01; 博主码字不易点个关注吧,祝期末顺利~~ 1.单选题(2分) 下列说法错误的是:&#xff08; B &#xff09; A.选调生属于公务员系统 B.公务员属于事业编 C.选调生有基层锻炼的要求 D…...

编程新知 2025/11/8 16:25:01

C++中string流知识详解和示例

一、概览与类体系 C 提供三种基于内存字符串的流&#xff0c;定义在 <sstream> 中&#xff1a; std::istringstream&#xff1a;输入流&#xff0c;从已有字符串中读取并解析。std::ostringstream&#xff1a;输出流&#xff0c;向内部缓冲区写入内容&#xff0c;最终取…...

编程新知 2025/11/30 11:30:47

鱼香ros docker配置镜像报错：https://registry-1.docker.io/v2/

使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题 一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题&#xff1a;docker pull 失败 网络不同&#xff0c;需要使用镜像源 按照如下步骤操作 sudo vi /etc/docker/dae…...

编程新知 2025/12/31 6:28:08

多模态大语言模型arxiv论文略读（108）

CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文标题&#xff1a;CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文作者&#xff1a;Sayna Ebrahimi, Sercan O. Arik, Tejas Nama, Tomas Pfister ➡️ 研究机构: Google Cloud AI Re…...

编程新知 2026/2/1 6:11:51

自然语言处理——循环神经网络

自然语言处理——循环神经网络 循环神经网络应用到基于机器学习的自然语言处理任务序列到类别同步的序列到序列模式异步的序列到序列模式 参数学习和长程依赖问题基于门控的循环神经网络门控循环单元&#xff08;GRU&#xff09;长短期记忆神经网络&#xff08;LSTM&#xff09…...

编程新知 2026/2/4 11:21:40

LabVIEW双光子成像系统技术

双光子成像技术的核心特性 双光子成像通过双低能量光子协同激发机制&#xff0c;展现出显著的技术优势&#xff1a; 深层组织穿透能力&#xff1a;适用于活体组织深度成像 高分辨率观测性能&#xff1a;满足微观结构的精细研究需求 低光毒性特点&#xff1a;减少对样本的损伤…...

编程新知 2026/1/31 13:04:44

（一）单例模式

一、前言 单例模式属于六大创建型模式，即在软件设计过程中，主要关注创建对象的结果，并不关心创建对象的过程及细节。创建型设计模式将类对象的实例化过程进行抽象化接口设计，从而隐藏了类对象的实例是如何被创建的，封装了软件系统使用的具体对象类型。 六大创建型模式包括…...

编程新知 2026/1/30 6:03:31