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

vue设计与实现-框架设计

news 2026/2/9 6:21:43

权衡的艺术

命令式和声明式

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

Cursor实现用excel数据填充word模版的方法

cursor主页&#xff1a;https://www.cursor.com/ 任务目标&#xff1a;把excel格式的数据里的单元格&#xff0c;按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例&#xff0c;…...

编程新知 2025/8/23 5:46:26

简易版抽奖活动的设计技术方案

1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑，确保抽奖活动能够公平、公正、公开地进行，同时满足高并发访问、数据安全存储与高效处理等需求，为用户提供流畅的抽奖体验，助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...

编程新知 2026/2/7 17:41:40

苍穹外卖--缓存菜品

1.问题说明 用户端小程序展示的菜品数据都是通过查询数据库获得&#xff0c;如果用户端访问量比较大&#xff0c;数据库访问压力随之增大 2.实现思路 通过Redis来缓存菜品数据&#xff0c;减少数据库查询操作。 缓存逻辑分析&#xff1a; ①每个分类下的菜品保持一份缓存数据…...

编程新知 2026/2/7 15:39:49

Spring Boot面试题精选汇总

&#x1f91f;致敬读者 &#x1f7e9;感谢阅读&#x1f7e6;笑口常开&#x1f7ea;生日快乐⬛早点睡觉 &#x1f4d8;博主相关 &#x1f7e7;博主信息&#x1f7e8;博客首页&#x1f7eb;专栏推荐&#x1f7e5;活动信息 文章目录 Spring Boot面试题精选汇总⚙️ **一、核心概…...

编程新知 2025/9/24 23:08:17

大模型多显卡多服务器并行计算方法与实践指南

一、分布式训练概述 大规模语言模型的训练通常需要分布式计算技术，以解决单机资源不足的问题。分布式训练主要分为两种模式： 数据并行：将数据分片到不同设备，每个设备拥有完整的模型副本 模型并行：将模型分割到不同设备，每个设备处理部分模型计算 现代大模型训练通常结合…...

编程新知 2025/12/10 20:45:02

docker 部署发现spring.profiles.active 问题

报错&#xff1a; org.springframework.boot.context.config.InvalidConfigDataPropertyException: Property spring.profiles.active imported from location class path resource [application-test.yml] is invalid in a profile specific resource [origin: class path re…...

编程新知 2025/9/20 12:14:18

uniapp手机号一键登录保姆级教程（包含前端和后端）

目录 前置条件创建uniapp项目并关联uniClound云空间开启一键登录模块并开通一键登录服务编写云函数并上传部署获取手机号流程(第一种) 前端直接调用云函数获取手机号&#xff08;第三种&#xff09;后台调用云函数获取手机号 错误码常见问题 前置条件 手机安装有sim卡手机开启…...

编程新知 2026/1/27 2:03:36

GitHub 趋势日报 (2025年06月06日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 590 cognee 551 onlook 399 project-based-learning 348 build-your-own-x 320 ne…...

编程新知 2026/1/29 5:21:31

iview框架主题色的应用

1.下载 less要使用3.0.0以下的版本 npm install less2.7.3 npm install less-loader4.0.52./src/config/theme.js文件 module.exports {yellow: {theme-color: #FDCE04},blue: {theme-color: #547CE7} }在sass中使用theme配置的颜色主题&#xff0c;无需引入&#xff0c;直接可…...

编程新知 2026/1/31 9:29:45

三分算法与DeepSeek辅助证明是单峰函数

前置 单峰函数有唯一的最大值&#xff0c;最大值左侧的数值严格单调递增&#xff0c;最大值右侧的数值严格单调递减。 单谷函数有唯一的最小值&#xff0c;最小值左侧的数值严格单调递减&#xff0c;最小值右侧的数值严格单调递增。 三分的本质 三分和二分一样都是通过不断缩…...

编程新知 2026/1/31 2:50:32