1.提升用户的开发体验

1.提供优好的报错信息

(warn函数的调用) ,清晰快速定位问题

2.打印ref数据

浏览器允许自定义的formatter,vue3源码中initCustomeFormatter用来初始化定义formmatter,打开devTools的设置,然后勾选console->Enable custom formatters选项,

2.控制框架代码的体积

预定义__DEV__常量,构建生产环境时__DEV__会直接打包成false,最终TreeShaking会把无用代码直接剔除生产环境下剔除报错代码信息

3.良好的`Tree-Shaking`

1.ESM(es modul)

消除那些永远不执行的代码,必须是ESM(es modul),因为Tree-Shaking依赖esm的静态结构

npx rollup input.js -f esm -o bundle.js

2.副作用

当调用函数的时候会对外部产生影响就是副作用,如果一个函数调用会产生副作用,那么就不能将其自动移除
当调用全局对象时有可能产生副作用,这时需要明确声明/*__Pure__/ 代码片段 ,因为静态分析不出来,只有运行时才知道,一般在顶级调用中使用
产生副作用的代码都是模块内函数的顶级调用

4.框架应该输出怎样的构建产物

IIFE格式(立即调用的函数表达式Immediately Invoked Function Expression)
esm格式(得益于现在浏览器的友好支持)
Node.js中通过require语句引用资源

5.特性开关

预定义常量插件实现 __VUE_OPTIONS_API_是一个开关,主要用于vue3向下兼容vue2的options语法 // webpack.DefinePlugin插件配置 new webpack.DefinePlugin({ __VUE_OPTIONS_API__:JSON.stringify(true) // true是开启 })

6.错误处理

vue错误处理机制就是使用了callWithErrorHandling函数,

let handleError = null;
export default {
  foo(fn) {
    callWithErrorHandling(fn)
  },
  // 用户可以调用该函数注册统一的错误处理函数
  registerErrorHandler(fn) {
    handleError=fn
  }
}
function callWithErrorHandling(fn) {
  try {
    fn&&fn()
  } catch (e) {
    // 将捕获到的错误传递给用户的错误处理程序
    handleError(e)
  }
}

错误处理能力完全由用户控制,用户既可以忽略,也可以将错误信息上报给监控系统

import APP from 'App.vue'
const app= createApp(App)
app.config.errorHandler=()=>{
}

7.良好的ts支持

优点:文档,编辑器自动提示,一定程度避免低级bug,代码的可维护性更强
使用ts编写和对ts类型支持友好是两件事

2.框架设计的核心要素