Vue.js框架中权衡的艺术

theme: juejin

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天，点击查看活动详情

前言

8月更文活动又开始了，冲这奖品也得肝一肝，先给自己定个小目标，活动结束之前，先肝个7篇，完成个最基础的任务。

无奈，平时积累的文章不够，恰好，上个月读了一段时间《Vue.js设计与实现》，有整理部分笔记，先发几篇。

所以，后面几篇内容都是对这本书内容的整理总结

详细情况可以查看专栏学习理解《Vue.js设计与实现》

《Vue.js 设计与实现》是Vue.js官方团队成员 霍春阳 倾力打造，基于Vue.js3 深入解析Vue.js设计细节。

这本书一大特点就是贵，定价120，到手价格90。

image.png

设计框架里到处都体现了权衡的艺术

牛逼！！！

其实说人话就是 就是设计时的技术方案的选型，然后为什么选这个，不选那个，高大上一点就是 权衡。

命令式 和 声明式的权衡

视图层的框架一般分为 命令式和声明式。

命令式框架：如Jquery和原生js，更关注更改视图，修改dom的过程。

声明式框架：如vue,更关注结果，操作dom,修改dom的过程我们不用关心，vue去帮我们我们完成，我们只需要告诉框架我们需要什么样的东西

以一个操作dom的场景为例子

• 获取一个dom\
• 设置文本内容hello world\
• 为其绑定点击事件\
• 当点击时弹出ok ```js // jquery 实现 $('#app') // 获取div .text("hello world") // 设置文本内容 .on("click",()=>{ alert('ok') }) // 增加监听事件

// 原生js实现 const div = document.querySelector('#app') // 获取div div.innnerText = 'hello world' // 设置文本内容 div.addEventListner('clilk',() => { alert('ok') } }) // 增加监听事件

// vue 实现

hello word

``` 命令式框架，更加符合人脑处理事情的思路，面向过程，一步一步去做。

声明式框架，更加傻瓜式一些，只需要告诉框架，我需要的结果，但是如果告诉框架，有框架自定义的一套规范，有学习成本和使用成本。

权衡之后，vue 决定按 一套 声明式框架来设计

性能与可维护的权衡

命令式框架的性能 优于 声明式的框架的性能

简单来说，就是jquery 性能优于 vue

当我们需要更新dom时

• 对于vue 框架来说，修改dom 需要先找到真实dom 和虚拟dom的差异，更新dom有差异的地方。
• 对于jquery 框架来说，修改dom 直接去修改就可以了。

vue 等声明式框架的更新性能消耗 = 直接修改的性能消耗 + 找出差异的性能消耗

jquery 等命令式框架的更新性能消耗 = 直接修改的性能消耗

所以说，jquery 性能优于 vue

当然了vue的可维护性更强，所以我们需要做的是，努力减小找出差异的性能消耗，这样就可以使vue的性能无限接近jquery

因此我们提出了虚拟dom,来最小化找出差异

虚拟DOM的性能

其实性能这个东西，很难直接说，好不好，没有对比就没有伤害

我们把它和原生js 修改dom 进行对比

虚拟dom 简单来讲它就是将HTML的DOM，用一套JS对象来表示。

为了更好的说明虚拟dom的性能，我们用innerHTML来比较。

innerHTML 是html5 提出的一个新的获取操作dom的方法。

不知道这个api的可以去查一查，活着看下我之前写的dom bom博客，

从零开始学习dom bom

innerHTML

• 可以获取调用元素的所有子节点对应的html片段
• 可以是根据指定的值创建DOM树，替换原有的元素节点

一般我们插入大量新HTML标记时，使用innerHTML 与 通过多次DOM操作先创建节点再指定它们之间的关系相比，效率更高，因为在设置innerHTML 时就会先创建一个HTML解析器，这个解析是在浏览器级别的基础上代码（c++）运行的，因此比执行js 快得多，当然也会带来 创建销毁 html 解析器也有性能消耗。所以控制使用次数。

当新建页面时

const html = 	`
  <div><span>...</span></div>
`
div.innerHTML = html

通过 innerHtml 创建页面的性能 = HTML字符串拼接的计算量 + innerHTML的DOM计算量

通过 虚拟dom 创建页面的性能 = 创建虚拟dom的计算量 + 创建真实DOM的计算量

新建页面时，JavaScript运算和DOM构建层面相差不大，innerHTML 性能甚至优于 虚拟dom

当更新页面时

更新dom 时，虚拟DOM性能更加优越

修改dom的三个方法对比

权衡之后，vue 使用的 虚拟dom 性能是很不错的，目前没有更好的方案

运行时和编译时的权衡

设计一个框架时，一般有三种选择

纯运行时

我个人理解，纯运行时，就比如jquery，或者和命令式框架写法相似

纯编译时

比如Svelte, 0运行时，直接编译成可执行的js代码，因此性能更好。

运行时+编译时

vue react 都是运行时+编译时。

<template><jsx>

代码都会在编译时被打包成被渲染成 树形结构。在运行时，执行render进行渲染。