前言
今天是学习理解《Vue.js设计与实现》的第二篇，主要讲vue在框架设计，各个方面做得有多好，然而仅仅是使用的话，其实是体会不到的，最好能对比其他框架的设计就能体会更加明显了！
详细情况可以查看专栏学习理解《Vue.js设计与实现》
提升用户的开发体验
这里的用户就是指的框架使用者，也就是各个前端开发们
vue 源码中有大量的warn()函数，提示开发者，错误警告信息
控制框架代码体积
Vue3 使用的方式是，使用 rollup 的插件配置来预定义 __DEV__变量。当 Vue.js 在输出资源的时候，会输出两个版本，一个用于开发，一个用于生产环境。 warn() 函数在存在开发环境，生成环境不会打包这些代码
框架要做好良好的Tree-Shaking
简单来说，tree-shaking就是消除那些永远不会被执行的代码
消除无用依赖之前，需要对js代码做静态分析，所以我们在源码中，很多js文件，，加上注释
/*#_PURE*/
表明此文件不会产生副作用，可以移除它
框架应该输出怎样的构建产物
比如Vue 既能通过script标签引用，也能通过npm 安装，还能在node中通过require方式引入
所以它的代码一定遵守 匿名函数自执行，引入就能自执行，也满足ESM 和CommobJS的规范。
错误处理
全局封装错误处理函数
全局提供了 registerErrrorHandler 函数，用户可以使用它注册错误处理程序，然后callWithErrorHanding捕获错误之后，把错误传递给用户注册的错误处理程序。
用户既可以选择忽略错误，也可以调用上报程序将错误上报给监控系统
//util.js let handleError = null export default { foo(fn){ callWithErrorHanding(fn) }, //用户可以调用这个函数注册统一的错误处理函数 registerErrrorHandler(fn){ handleError = fn } } function callWithErrorHanding(fn){ try { fn && fn() }catch(e){ // 将捕获到的错误传递给用户的错误处理程序 handleError(e) } } // 用户调用 import utils from 'utils.js' utils.registerErrrorHandler((e)=>{ console.log(e) }) utils.foo(()=>{})
