学习《Vue.js 设计与实现》-- 权衡的艺术（一）

让给各位见笑了，这个只是记录的这段时间对《Vue.js 设计与实现》学习的记录，如果在某些方面不妥，还请您帮忙指出。谢谢😊

一、命令式、声明式

1. 概念：

• 像jQuery形式的书写方式就是命令式，通过指令的形式让程序去做事情

$('#app')
    .text('hello world')
    .on('click', function(){console.log('hello world')});

或者

const app = doucment.querySelect('#app');
app.innerText = 'hello world';
app.addEventLister('click', function(){console.log('hello world')})

• 像Vue这种，直接展示最终效果就是声明式

<div id="app" @click="()=> console.log('hello world')">hello world</div>

2. 优缺点

声明式更新性能 = Diff性能损耗 + 直接修改性能损耗
命令式更新性能 = 直接修改性能损耗

• 命令式： 性能可以达到极限好，但是书写比较复杂，不易维护
• 声明式： 写法简洁，可以直接看出代码输出的结果，易于维护。但是性能无法达到像命令式那种极限，原因在于声明式最终是由命令式实现的。

二、Vue为何选择声明式设计

1. 书写起来便于维护，直接看到结果
2. 在复杂的项目中，声明式+虚拟DOM相对来说比命令式收益更高一些。主要因为命令式想要性能高一些，需要投入大量的时间才能做到高性能，而使用Vue，这些性能，简易的书写方式由Vue来实现

三、虚拟DOM性能到底如何

与比较innerHTML作比较 -- 表格对比

	虚拟DOM	innerHTML
纯JavaScript	创建新的JavaScript对象 + Diff	渲染HTML字符串
DOM 运算	必要的DOM更新	销毁所有的旧DOM 新建所有的新DOM
性能因素	与数据变化量相关	与模板大小相关

性能(差→高) -- 表格对比

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

四、运行时、编译时

1. 运行时

Virtual DOM --> DOM

2. 运行时 + 编译时

template --> Virtual DOM --> DOM

3. 编译

直接将template编译成命令式。

4. 比较

• 纯编译：没有编译过程，无法分析用户提供的内容
• 运行时 + 编译时： 可以根据用户提供的内容提高运行时的性能,比如哪些是不可变的
• 编译时: 性能高，但灵活性比较差，需要编译后才能看到