《Vue.js设计与实现》day02：第一章 权衡的艺术

一、前言

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

1. 为什么要讨论视图层框架设计？

当我们设计一个框架的时候， 框架本身的各个模块之间并不是相互独立的，而是相互关联、相互制约的。

作为框架设计者，一定要对框架对定位和方向拥有全局的把控， 这样才能做好后续的模块设计和拆分。

做为学习者，我们在学习框架的时候， 也应该从全局的角度对框架的设计拥有清晰的认知， 否则容易被细节困住，看不清全貌。

2. 体现“权衡”的艺术

• 从范式角度来看， 我们的框架应该设计成命令式还是声明式？
• 「命令式」和「声明式」这两种范式有何优缺点？我们能否汲取两者的优点？
• 框架要设计成「纯运行时」还是「纯编译时」的，甚至是「运行时+编译时」的呢？
• 「纯运行时」、「纯编译时」、「运行时+编译时」之间有何差异？有何优缺点？

二、本章内容

1.1 命令式和声明式

作为框架设计这， 应该对两种范式都有足够的认知，这样才能做出正确的选择， 甚至想办法汲取两者的优点并将其捏合。

- 获取id为app的div标签
- 它的文本内容为 hello world
- 为其绑定点击时间
- 当点击时弹出提示：ok 

1.1.1 命令式框架的概念

早年流行的jQuery 就是典型的命令是框架。特点：命令式框架的一大特点就是 关注过程。

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

const div = document.querySelector('#app') //获取div
div.innerText = 'hello world'
div.addEventListener('click',()=>{alert('ok')}) //绑定点击事件 

以上jQuery和 原生JavaScript当实现中可以看到， 自然语言描述能够与代码产生一一对应的关系，代码本身描述的就是“做事儿的过程”。

1.1.2 声明式框架的概念

与命令式框架更加关注过程不同，声明式框架更加 关注结果。

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

以上类似HMTL的模版就是Vue.js 实现案例功能的方式。可以看到，提供一个“结果”，至于如何实现这个“结果”，并不关心。实现该“结果”的过程， 则是由Vue.js帮我们完成的。

换句话说：Vue.js是帮我们封装了过程。

因此，我们可以猜到Vue.js的内部实现一定是**「命令式」的，而暴露给用户的却「更加声明式」**。

1.2 性能与可维护性的权衡

结论先行：声明式代码的性能不优于命令式代码的性能。

1.2.1 性能比较

举例：假设我们要将div标签的文本内容修改为hello vue3，那么如何使用命令式代码实现呢？

因为可以明确知道修改的是什么，可以直接调用相关命令操作

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

理论上：命令式代码可以做到极致的性能优化，因为我们明确知道哪些发生了变更，只做必要的修改就可以啦。

但是声明式代码不一定能做到这一点，因为它描述的是结果：

<!-- 之前 -->
<div @click="()=> alert('ok')">hello world</div>

<!-- 之后 -->
<