您现在的位置是:首页 >学无止境 >《Vue.js设计与实现》-框架设计概览-权衡的艺术网站首页学无止境

《Vue.js设计与实现》-框架设计概览-权衡的艺术

__松子 2024-06-16 00:01:02
简介《Vue.js设计与实现》-框架设计概览-权衡的艺术

命令式和声明式

视图层框架通常分为命令式和声明式

命令式框架:关注过程

声明式框架:关注结果

Vue.js帮我们封装了过程,因此,我们能够猜到Vue.js的内部实现一定是命令式的,而暴露给用户的却更加声明式。

性能与可维护性权衡

声明式代码的性能不优于命令式代码的性能

命令式代码的更新性能消耗=A

声明式代码的更新性能消耗=B+A

B 为找出更新视图差异的性能消耗

虚拟 DOM 的性能到底如何

虚拟Dom是为了最小化找出差异这一步的性能消耗而出现的

innerHTML(模板)虚拟 DOM原生 JavaScript
心智负担中等心智负担小心智负担大
性能差性能不错性能高
可维护性强可维护性差

我记得网上有一篇对“原生和虚拟DOM渲染速度到底有什么却别?”问题的回答是这样来形容

就好像你要去酒店入住,但是酒店不一定会有空房,原生渲染则是你需要去酒店问过才知道是否有空房,也就是说你可能白跑一趟,但是虚拟DOM渲染可以让你提前打电话给酒店询问是否有空房;
那么如果酒店有空房,当然就是原生渲染要快,因为少了打电话的过程,但是如果是没有空房,则是虚拟渲染要快的多;

这里其实是在介绍我们的业务需求是否需要每次都更新视图层全部元素,如果是视图层每次更新元素改变量比较大,那则原生更新会快些,否则每次都是局部更新,则使用虚拟DOM更新视图层性能会高的多。

运行时和编译时

编译时:将HTML字符串编译成树形结构的数据对象的过程,这通常是由一个名为Compiler的函数的功能实现的;

运行时:将树形结构的数据对象渲染成DOM元素的过程,这通常是由一个名为Render的函数的功能实现的;

vue项目通常都是在构建的时候就执行Compiler函数提前将用户提供的内容编译好,等到运行时就无需编译了;

风语者!平时喜欢研究各种技术,目前在从事后端开发工作,热爱生活、热爱工作。