limy-blog第二章：框架设计的核心要素
提升开发体验
一个优秀的框架衡量指标之一就是看他的开发体验
- Vue 通过 warn 函数提供了友好的警告信息，帮助用户定位问题。
- 在打印数据时，尤其是响应式数据，非常的不直观，Vue 通过 initCustomFormatter 函数自定义了控制台输出。
TIP
Chrome 下勾选 Console 里的 Enable custom formatters 选项，就可以看到更直观的打印。
控制框架代码体积
通过 __DEV__ 常量，将开发环境和生产环境区分。做到了在开发环境为用户提供友好的开发体验的同时，不增加生产环境代码。
良好的 Tree-Shaking
- 要想实现 Tree-Shaking，代码必须使 ESM 模块。
- 当函数调用时会对外部产生影响（例如修改了全局变量）这种情况无法实现 Tree-Shaking，我们成为有副作用。可以通过注释
/*#__PURE__*/来告诉打包工具，代码不会产生副作用。
输出的构建产物
- 在浏览器中使用 iife 模式
- 支持 ESM 的浏览器可以使用 vue.esm-browser.js
- 项目中使用 vue.esm-bundler.js
TIP
同样都是 esm -browser 和 -bundler 的区别？
- browser 会将
__DEV___设置为false - bundler 会将
__DEV___设置为p，使其交给项目中的打包工具决定如何打包。rocess.env.NODE_ENV !== 'production'
- 服务端渲染使用 CommonJS 规范，cjs
特性开关
Vue 提供了诸多特性并提供了对应的特性开关，开发者可以有选择的去取舍这些特性。
Vue 为了兼容 Vue2 的 options-api，提供了相关的代码支持，如果开发者明确知到代码不会使用选项式 API，那么可以将其 Tree-Shaking，从而减少资源体积。
javascript
// 借助 webpack.DefinePlugin 配置
new webpack.DefinePlugin({
__VUE_OPTIONS_API__ : JSON.stringify(false) // 开启或者关闭特性
});错误处理
为了提高用户代码的健壮性和简洁性，Vue 提供了统一的错误处理函数。
javascript
let handlerError = null;
export default {
foo(fn) {
callWithErrorHandling(fn);
},
// 用户调用该方法注册错误回调
registerErrorHandling(fn) {
handlerError = fn;
}
};
// 源码里也是用的该函数名
function callWithErrorHandling() {
try {
fn && fn();
} catch (e) {
// 将捕获到的错误传递给用户，用户可以选择忽略 或者将其上报给错误监控系统
handlerError(e);
}
}