《Vue.js设计与实现》笔记 Vol. 2

开发体验是衡量一个框架的重要指标之一。

提供友好的警告信息至关重要，这有助于开发者快速定位问题。

Vue.js 源码中经常有 warn 函数的调用，它会收集当前发生错误的组件栈信息，其原理就是 console.warn 函数。

此外，输出友好的信息格式也能进一步提升用户的开发体验。

Vue.js 3 源码中包含 initCustomFormatter 函数，该函数是用来在开发环境下初始化自定义formatter 的。结合 DevTools 使用，formatter 会使得输出内容变得非常直观。

在 Vue.js 3 源码中，每一个 warn 函数的调用都会配合 DEV 常量的检查，例如：

if (!result) {
  __DEV__ &&
    warn(
      `Failed to mount root instance: selector "${selectorOrEl}" returned null.`
    )
  return
}

打印警告信息的前提是：DEV 这个常量一定要为 true.

Vue.js 使用 rollup.js 对项目进行构建，这里的 DEV 常量实际上是通过 rollup.js 的插件配置来预定义的。Vue.js 在输出资源的时候，会输出用于开发环境的版本（vue.global.js）和用于生产环境的版本（vue.global.prod.js）。

构建开发环境，DEV 常量设置为 true，这时上面那段输出警告信息的代码就等价于：

if (!result) {
  true &&
    warn(
      `Failed to mount root instance: selector "${selectorOrEl}" returned null.`
    )
  return
}

判断条件为真，所以这段代码在开发环境中是肯定存在的。

构建生产环境，DEV 常量设置为 true，这时上面那段输出警告信息的代码就等价于：

if (!result) {
  false &&
    warn(
      `Failed to mount root instance: selector "${selectorOrEl}" returned null.`
    )
  return
}

因为判断条件始终为假，这段永远不会执行的代码称为 dead code，它不会出现在最终产物中，在构建资源的时候就会被移除，因此 vue.global.prod.js 中是不会存在这段代码的。

感想

提升用户的开发体验需要显示警告信息，而控制框架代码的体积又需要删除无关信息。最终 Vue.js 选择了使用 DEV 参数，真正做到了在开发环境中为用户提供友好的警告信息的同时，不会增加生产环境代码的体积。这就是框架设计的平衡的艺术。

霍春阳. Vue.js设计与实现[M]. 1. 北京:人民邮电出版社, 2022.