学习vue必须要懂的概念

在框架设计层面，有两种代码的编写方式，分别是命令式和声明式。

什么是命令式？

<div>hello world</div>

let box = document.querySelector('#box') //获取id为box的元素
box.onclick = function () { //声明一个点击事件
	box.textContent = '我是一个盒子' // 设置box的内容
}

像这样一步一步告诉浏览器我要做什么的模式被称为命令式。

什么是声明式？

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

像这样，以一个固定的方式告诉框架，你帮我搞定绑定给div的事件，至于框架如何实现这个功能，我们不需要关心。

为什么命令式的效率永远高于声明式？

如果让上边声明式的代码实现命令式一样的功能，那么是这样的

<!-- before -->
<div @click="() => alert('ok')">hello world</div>
<!-- after -->
<div @click="() => alert('ok')">我是一个盒子</div>

声明式的框架为了实现这样的功能，他们需要比较前后的差异，只更新不同的部分。而最终起作用的代码仍然是 box.textContent = '我是一个盒子' 。

因此，从效率层面可以得出一个公式

命令式 = 1 ; 声明式 = 1 + N