Vue设计原则：编程范式、运行时 、编译时的取舍

1.编程范式

命令式编程

命令式编程的主要思想是关注计算机执行的步骤，即一步一步告诉计算机先做什么再做什么。

声明式编程

声明式编程是告诉计算机去做“什么”而不是“如何”去做。

总结

命令式的性能 > 声明式的性能

命令式的可维护性 < 声明式的可维护性

框架的设计并不是选择一种方式进行开发，声明式的本质上是由命令式代码编写的，在企业开发过程中，更多的采用声明式框架，框架更多的是去权衡利弊，既可以减少程序员开发心智负担，同时提高框架的性能。

2. 运行时 vs 编译时

运行时 runtime

一个纯运行时框架就是在我们将DOM的数据结构传入到渲染函数时，就可以直接渲染出真实的DOM结构元素。在Vue中提供一个被叫做render的API，通过给该render函数传入源数据并调用，就可以得到真实的DOM结构，那么我们可以认为该render函数就是一个运行时。现在有以下数据需要生成dom并挂载到body上

// node是一个虚拟DOM树
// tag为元素的标签
// children为数组时表示子元素，为字符串时表示文本
const node = {
    tag: 'div',
    children: [
        tag: 'h1',
        children: '运行时'
    ]
}

现在我们需要一个render函数来处理这个数据

const render = (node, root) => {
    const el = document.createElement(node.tag);
    if (typeof node.children === 'string') {
        // 如果子元素是文本节点，则创建文本节点。
        const text = document.createTextNode(node.children)
        el.appendChild(text)
    } else if (Array.isArray(node.children)) {
        node.children.forEach(child => {
            render(child, el)
        });
    }
    root.appendChild(el);
};

有了render函数，我们通过传入参数来调用render函数

const div = document.createElement('div')
render(node, div)
console.log(div)
// 最后打印的结果
/* 
<div>
    <div>
        <h1>运行时</h1>
    </div>
</div>
*/

编译时 compiler

在Vue中我们使用template语法编写DOM结构，但是template模板语法不能直接运行在浏览器，在Vue中需要使用compiler方法解析template模板

运行时 + 编译时

Vue既支持运行时，用户可以直接提供数据对象从而无须编译；又支持编译时，用户可以提供 HTML字符串，我们将其编译为数据对象后再交给运行时处理