vue设计与实现-权衡的艺术

命令式和声明式

视图层框架通常分为命令式和声明式,各有优缺。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原生语句开销高很多

方法2 虚拟dom创dom

相关推荐
Surmon4 小时前
彻底搞懂大模型 Temperature、Top-p、Top-k 的区别!
前端·人工智能
木斯佳7 小时前
前端八股文面经大全:bilibili生态技术方向二面 (2026-03-25)·面经深度解析
前端·ai·ssd·sse·rag
不会写DN7 小时前
Gin 日志体系详解
前端·javascript·gin
冬夜戏雪7 小时前
实习面经记录(十)
java·前端·javascript
爱学习的程序媛8 小时前
【Web前端】JavaScript设计模式全解析
前端·javascript·设计模式·web
小码哥_常9 小时前
从SharedPreferences到DataStore:Android存储进化之路
前端
老黑9 小时前
开源工具 AIDA:给 AI 辅助开发加一个数据采集层,让 AI 从错误中自动学习(Glama 3A 认证)
前端·react.js·ai·nodejs·cursor·vibe coding·claude code
薛先生_0999 小时前
js学习语法第一天
开发语言·javascript·学习
jessecyj9 小时前
Spring boot整合quartz方法
java·前端·spring boot
苦瓜小生9 小时前
【前端】|【js手撕】经典高频面试题:手写实现function.call、apply、bind
java·前端·javascript