Vue框架设计的核心要素

---

theme: juejin

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第2天，点击查看活动详情

前言

今天是学习理解《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(()=>{}) ```