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(()=>{})