概念
一、副作用
副作用: 当我们对数据进行 setter 或者 getter 操作时，所产生的一系列后果。
二、编程范式
针对目前前端的开发而言，主要存在两种编程范式:
-
命令式编程
-
声明式编程
2.1 命令式编程
命令式编程 是一种详细描述了做事过程的范式。以下为例: 在 <div></div> 中展示 msg 变量内容
<div>
<div></div>
</div>
-
获取
div标签 -
插入
msg变量
2.2 声明式编程
声明式编程 是一种不关心过程、详细逻辑与步骤, 只关注结果的范式。（注意: 这并不意味着声明式不需要过程，声明式只是把过程隐藏了而已）以下为例: 在 <div></div> 中展示 msg 变量内容
<div>
<div>{{ msg }}</div>
</div>
2.3 命令式编程 VS 声明式编程
通常情况下，我们评价一个一个编程范式通常会从两个方面入手：
-
性能: 命令式的性能 >= 声明式的性能
-
可维护性: 对代码可以方便的阅读、修改、删除、增加。所以，声明式的代码明显更加有利于阅读，更加利于维护。
框架的设计过程其实是一个不断取舍的过程。框架的开发与设计原则是什么呢？ 我们知道对于 Vue 而言, 我们通过 声明式 的方式使用 Vue, 但是对于 Vue 内部而言，是通过 命令式 来进行实现。我们可以理解为: Vue 封装了命令式的逻辑，而对外暴露出了声明式的接口。那么既然如此，我们明知道命令式的性能 > 声明式的性能。那么 Vue 为什么选择声明式的方案呢？ 其实原因很简单，那就是因为: 命令式的可维护性 < 声明式的可维护性
-
对于开发者而言, 不需要关注实现过程，只需要关注最终的结果即可。
-
对于
Vue而言, 它需要做的事: 封装命令式逻辑，同时尽可能的减少性能的损耗！它需要在性能和可维护性之间，找到一个平衡。从而找到一个可维护性更好，性能相对更优的一个点。
所以, Vue 的设计原则就是: 在保证可维护性的基础上，尽可能的减少性能的损耗！
总结: 我们需要在可维护性和性能之间，找到一个平衡点。在保证可维护性的基础上，尽可能的减少性能的损耗。所以框架的设计过程其实是一个不断在可维护性和性能之间进行取舍的过程。
三、工作过程
在 .vue 文件中的 template 中写入的 html 不是真实的 html。 原因非常简单, 如果我们写入的是真实的 HTML 节点, 对于 v-if、v-bind、keep-alive 这些东西，浏览器显然是不认识的，所以这些东西理应无法解析。但是这些指令或者组件被正确解析了，所以 Vue 一定在中间做了什么，让假的 HTML 节点被渲染成了真实的 HTML 标签节点。
那么, Vue 在中间做了什么事情呢? 简单的来说可以分为两件事
-
编译时
compiler -
运行时
runtime -
运行时 + 编译时
compiler + compiler
3.1 编译时 compiler
编译时compiler 主要作用是把 template 中的 html 编译成 render 函数。
3.2 运行时 runtime
运行时runtime 运行 render 函数, 挂载对应的 DOM 节点。
3.3 编译时 + 运行时 compiler + runtime
Vue 通过 compiler 把 template 中的 html 编译成 render 函数; 然后 Vue 通过 render 函数挂载对应的 DOM。所以 Vue 是 编译时 + 运行时的框架
Vue 为什么要设计成一个编译时 + 运行时的框架呢?
-
对于纯运行时而言: 因为不存在编译器，所以我们只能提供一个复杂的
JS对象 -
针对于纯编译时而言: 因为缺少运行时，所以它只能把分析差异的操作，放到编译时进行，同样因为省略了运行时，所以速度可能会更快。但是这种方式失去了灵活性。
-
运行时 + 编译时: 比如
Vue或React都是通过这种方式来构建的，使其可以在保持灵活性的基础上，尽量的进行性能的优化，从而达到一种平衡。