逻辑是什么

有一个值为数字的变量,有一个函数来读取这个数,有一个函数来修改这个数。

或者,有一个对象,这个对象有一个值为数字的字段,有一个方法来读取这个数,有一个方法来修改这个数。

无论是“变量 + 函数”,还是“对象字段 + 对象方法”,还是说响应式之类的什么东西,无所谓,纯程序层面的这些东西,是我说的“逻辑”。

视图是什么

还是上面的逻辑,一个数字,一个读数字的操作方式,一个修改数字的操作方式。程序层面的东西终端用户并不关心,我们要将逻辑中必要的部分视图化,也就是:让逻辑看得见,可以通过交互使其运行。

网页是一种介质:

这是我说的“视图”。

逻辑和视图区分是什么

逻辑都应该写在 JS/TS 文件中,并对外暴露必要的接口,接口可能是值,可能是函数,可能是任何东西。

视图有很多洞,这些洞要使用逻辑层中暴露的接口进行填充,填充之后就跑起来了。

逻辑部分追求业务模型自洽合理,不为视图部分做优化。所以逻辑部分暴露的接口视图未必可以拿来即用,需要做一些额外的处理。

以 Vue SFC 为例,Template 部分是视图,视图部分的空有两种,一种调整呈现的内容,一种指定如何响应用户的操作。那 SFC 中的 Script 写什么呢?