theme: juejin
携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天，点击查看活动详情
前言
8月更文活动又开始了，冲这奖品也得肝一肝，先给自己定个小目标，活动结束之前，先肝个7篇，完成个最基础的任务。
无奈，平时积累的文章不够，恰好，上个月读了一段时间《Vue.js设计与实现》，有整理部分笔记，先发几篇。
所以，后面几篇内容都是对这本书内容的整理总结
详细情况可以查看专栏学习理解《Vue.js设计与实现》
《Vue.js 设计与实现》是Vue.js官方团队成员 霍春阳 倾力打造，基于Vue.js3 深入解析Vue.js设计细节。
这本书一大特点就是贵，定价120，到手价格90。
设计框架里到处都体现了权衡的艺术
牛逼！！！
其实说人话就是 就是设计时的技术方案的选型，然后为什么选这个，不选那个，高大上一点就是 权衡。
命令式 和 声明式的权衡
视图层的框架一般分为 命令式和声明式。
命令式框架：如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 解析器也有性能消耗。所以控制使用次数。
当新建页面时
代码语言：javascript复制const html = `
<div><span>...</span></div>
`
div.innerHTML = html通过 innerHtml 创建页面的性能 = HTML字符串拼接的计算量 innerHTML的DOM计算量
通过 虚拟dom 创建页面的性能 = 创建虚拟dom的计算量 创建真实DOM的计算量
innerHTML | 虚拟DOM | |
|---|---|---|
JavaScript运算 | 拼接html字符串 | 创建虚拟dom |
DOM构建 | 新建所有dom元素 | 新建所有dom元素 |
新建页面时，JavaScript运算和DOM构建层面相差不大，innerHTML 性能甚至优于 虚拟dom
当更新页面时
innerHTML | 虚拟DOM | |
|---|---|---|
JavaScript运算 | 拼接html字符串 | 创建虚拟dom diff算法 |
DOM构建性能因素 | 销毁旧dom新建新dom与模版大小相关 | 必要的dom更新与数据变化量相关 |
更新dom 时，虚拟DOM性能更加优越
修改dom的三个方法对比
innerHTML | 虚拟dom | 原生js（createElement） |
|---|---|---|
心智负担重等性能差 | 心智负担小可维护性高性能不错 | 心智负担大可维护性差性能高 |
权衡之后，vue 使用的 虚拟dom 性能是很不错的，目前没有更好的方案
运行时和编译时的权衡
设计一个框架时，一般有三种选择
纯运行时
我个人理解，纯运行时，就比如jquery，或者和命令式框架写法相似
纯编译时
比如Svelte, 0运行时，直接编译成可执行的js代码，因此性能更好。
运行时 编译时
vue react 都是运行时 编译时。
<template><jsx>
代码都会在编译时被打包成被渲染成 树形结构。在运行时，执行render进行渲染。
