框架设计的核心要素

提升用户的开发体验

• warn：尽可能提供有用的信息 收集当前发生错误的组件栈信息
• 打印： initCustomFormatter

控制框架代码的体积

通过__DEV__常量做到在开发环境中为用户提供友好的警告信息的同时，不会增加生产环境代码的体积

框架要做到良好的 Tree-Shaking

• Tree-Shaking：指的就是消除那些永远不会被执行的代码，也就是排除 dead code
• 副作用：副作用就是，当调用函数的时候会对外部产生影响，例如修改了全局变量
• /*#__PURE__*/告诉bundler可以去除某些代码

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

为开发环境和生产环境输出不同的包 vue.global.js vue.global.prod.js
带有 -bundler 字样的 ESM 资源是给 rollup.js 或 webpack 等打包工具使用
带有 -browser 字样的 ESM 资源是直接给 <script type="module"> 使用的

• 立即调用的函数表达式：直接在 HTML 页面中使用 <script> 标签引入框架并使用
• esm：直接引用esm格式的资源<script type="module">
• cjs：服务端渲染 vuejs在nodejs环境中运行

特性开关

为了兼容 Vue.js 2，在 Vue.js 3 中仍然可以使用选项 API 的方式编写代码。但是如果明确知道自己不会使用选项 API，用户就可以使用 VUE_OPTIONS_API 开关来关闭该特性，这样在打包的时候 Vue.js 的这部分代码就不会包含在最终的资源中，从而减小资源体积。

错误处理

框架错误处理机制的好坏直接决定了用户应用程序的健壮性，还决定了用户开发时处理错误的心智负担。

• 用户自己处理：如果太多不好搞
• 代替用户统一处理错误：将错误处理封装为一个函数 进而用户可以使用它注册错误处理程序

良好的 TypeScript 类型支持

ts为是 JavaScript 的超集，为 JavaScript 提供类型支持

类型推倒代码

function foo<T extends any>(val: T) :T{
    return val
}