vue3设计与实现读书笔记01

1.命令式与声明式

视图层框架，通常分为命令式和声明式两种，它们各有优缺点，首先我们来看一下两者的区别：

命令式：

jQuery版本：

$('#app') // 获取 div
  .text('hello world') // 设置文本内容
  .on('click', () => { alert('ok')})  // 绑定点击事件

JavaScript版本：

const div = document.querySelector('#app');
div.innerText = hello world';
div.addEventListener('click', () => { alert('ok') });

命令式代码描述的是"做事的过程"，符合逻辑直觉。

声明式：

<div @click="() => alert(''ok)"> hello world </div>

声明式框架关注结果，不关心如何实现，而是直接提供一个结果，让框架实现。

2. 性能与可维护性

首先抛出结论：声明式代码的性能不优于命名式代码的性能。继续上面的例子，如果需要将div内容由hello world改为hello vue3。 命令式

div.textContent = 'hello vue3' //直接修改

声明式代码，则需要改结果

// 之前：
<div @click="() => alert(''ok)"> hello world </div>
// 之后：
<div @click="() => alert(''ok)"> hello vue3 </div>

通过代码对比，我们可以看到，命令式代码直接修改指定内容，应该是性能最优的方式。声明式代码，开发者只需要修改声明的结果，具体修改内容的操作（或者说内部指令），是由框架来具体找出差异并执行的。

由于声明式代码，存在一个查找差异并更新的过程，比命令式代码直接更新多了查找对比差异这一步，所以声明式框架的性能是低于命令式代码的。

虚拟 DOM

基于前文，我们知道： 声明式代码的更新性能消耗 = 找出差异的性能消耗 + 直接修改的性能消耗。