1.提升用户的开发体验
1.警告信息提示
清晰快速定位问题
2.ref数据打印时格式化支持
以打开 DevTools 的设置，然后勾选“Console”→“Enable custom formatters”选项 内容查看直观
3.控制框架代码的体积
- 1.在开发环境中为用户提供友好的警告信息的 同时，不会增加生产环境代码的体积(__DEV__预定义变量)
预定义 DEV 常量，从而实现 仅在开发环境中打印警告信息，而生产环境中则不包含这些用于提升 开发体验的代码，从而实现线上代码体积的可控性
- 2.良好的Tree-Shaking
依赖esm静态结构,删除永远不执行的代码
副作用,需要单独声明,一般都是模块内函数的顶级调用(/#PURE/声明不会产生副作用)
4.框架应该输出怎样的构建产物
- iife立即执行的函数表达式
- cjs
- esm
5.特性开关
// webpack.DefinePlugin 插件配置
new webpack.DefinePlugin({
__VUE_OPTIONS_API__: JSON.stringify(true) // 开启特性
})
6.错误处理
// utils.js
let handleError = null
export default {
foo(fn) {
callWithErrorHandling(fn)
},
// 用户可以调用该函数注册统一的错误处理函数
registerErrorHandler(fn) {
handleError = fn
}
}
function callWithErrorHandling(fn) {
try {
fn && fn()
} catch (e) {
// 将捕获到的错误传递给用户的错误处理程序
handleError(e)
}
