Vue | 命令式与声明式

命令式与声明式

命令式框架的特点式是关注过程，声明式框架更关注结果

比如我们要实现下面的功能

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

javascript实现

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

vue.js实现(声明式)

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

两种方式都是有原生js来实现的，所以声明式不会优于命令式，而且声明时书写的方式在编译时要解析为html时，这个解析的流程会消耗性能

性能与可维护性

声明式代码的性能不优于命令式代码的性能(理论上)
如果我们把直接修改的性能消耗定义为A，把找出差异的性能消耗定义为B，那么有：
命令式代码的更新性能消耗 = A
声明式代码的更新性能消耗 = B + A

当找出差异的性能消耗为0时，声明式代码与命令式代码的性能相同，但是无法做到超越。毕竟框架本身就是封装了命令式代码才实现了面向用户的声明式，所以说，声明式代码的性能不优于命令式代码的性能

虚拟 DOM 的性能

我们知道声明式框架的更新性能消耗 = 找出差异的性能消耗 + 直接修改的性能消耗
在理论中声明式框架的性能应该是不会超过命令式代码，但是在实际中，我们很难开发出绝对优化的命令式代码。所以声明式的找出差异的性能消耗可以忽略不记，但是从写法上可以大大简化，让开发者更多的专注于数据层的修改。