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

vue设计与实现-框架设计

news 2026/1/17 1:00:47

权衡的艺术

命令式和声明式

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

【WiFi帧结构】

文章目录 帧结构MAC头部管理帧 帧结构 Wi-Fi的帧分为三部分组成&#xff1a;MAC头部frame bodyFCS&#xff0c;其中MAC是固定格式的&#xff0c;frame body是可变长度。 MAC头部有frame control&#xff0c;duration&#xff0c;address1&#xff0c;address2&#xff0c;addre…...

编程新知 2026/1/15 6:53:59

Mybatis逆向工程，动态创建实体类、条件扩展类、Mapper接口、Mapper.xml映射文件

今天呢&#xff0c;博主的学习进度也是步入了Java Mybatis 框架&#xff0c;目前正在逐步杨帆旗航。 那么接下来就给大家出一期有关 Mybatis 逆向工程的教学&#xff0c;希望能对大家有所帮助&#xff0c;也特别欢迎大家指点不足之处&#xff0c;小生很乐意接受正确的建议&…...

编程新知 2026/1/15 5:21:25

Robots.txt 文件

什么是robots.txt&#xff1f; robots.txt 是一个位于网站根目录下的文本文件&#xff08;如&#xff1a;https://example.com/robots.txt&#xff09;&#xff0c;它用于指导网络爬虫&#xff08;如搜索引擎的蜘蛛程序&#xff09;如何抓取该网站的内容。这个文件遵循 Robots…...

编程新知 2025/9/9 5:38:23

均衡后的SNRSINR

本文主要摘自参考文献中的前两篇&#xff0c;相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程&#xff0c;其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt​ 根发送天线&#xff0c; n r n_r nr​ 根接收天线的 MIMO 系…...

编程新知 2026/1/16 21:10:12

【学习笔记】erase 删除顺序迭代器后迭代器失效的解决方案

目录 使用 erase 返回值继续迭代使用索引进行遍历 我们知道类似 vector 的顺序迭代器被删除后&#xff0c;迭代器会失效&#xff0c;因为顺序迭代器在内存中是连续存储的&#xff0c;元素删除后&#xff0c;后续元素会前移。 但一些场景中&#xff0c;我们又需要在执行删除操作…...

编程新知 2025/9/30 8:10:20

LOOI机器人的技术实现解析：从手势识别到边缘检测

LOOI机器人作为一款创新的AI硬件产品&#xff0c;通过将智能手机转变为具有情感交互能力的桌面机器人&#xff0c;展示了前沿AI技术与传统硬件设计的完美结合。作为AI与玩具领域的专家&#xff0c;我将全面解析LOOI的技术实现架构&#xff0c;特别是其手势识别、物体识别和环境…...

编程新知 2025/6/10 21:22:04

【SpringBoot自动化部署】

SpringBoot自动化部署方法 使用Jenkins进行持续集成与部署 Jenkins是最常用的自动化部署工具之一&#xff0c;能够实现代码拉取、构建、测试和部署的全流程自动化。 配置Jenkins任务时&#xff0c;需要添加Git仓库地址和凭证&#xff0c;设置构建触发器&#xff08;如GitHub…...

编程新知 2025/11/18 2:17:20

用鸿蒙HarmonyOS5实现中国象棋小游戏的过程

下面是一个基于鸿蒙OS (HarmonyOS) 的中国象棋小游戏的实现代码。这个实现使用Java语言和鸿蒙的Ability框架。 1. 项目结构 /src/main/java/com/example/chinesechess/├── MainAbilitySlice.java // 主界面逻辑├── ChessView.java // 游戏视图和逻辑├──…...

编程新知 2025/8/18 11:32:48

6️⃣Go 语言中的哈希、加密与序列化：通往区块链世界的钥匙

Go 语言中的哈希、加密与序列化：通往区块链世界的钥匙 一、前言：离区块链还有多远？ 区块链听起来可能遥不可及，似乎是只有密码学专家和资深工程师才能涉足的领域。但事实上，构建一个区块链的核心并不复杂，尤其当你已经掌握了一门系统编程语言，比如 Go。 要真正理解区…...

编程新知 2025/10/12 1:37:40

Linux安全加固：从攻防视角构建系统免疫

Linux安全加固：从攻防视角构建系统免疫 构建坚不可摧的数字堡垒 引言：攻防对抗的新纪元 在日益复杂的网络威胁环境中，Linux系统安全已从被动防御转向主动免疫。2023年全球网络安全报告显示，高级持续性威胁（APT）攻击同比增长65%，平均入侵停留时间缩短至48小时。本章将从…...

编程新知 2025/9/30 15:48:08