Vue API 盲点解析

# 使用 performance 开启性能追踪

performance API 是 Vue 全局配置 API 中的一个，我们可以使用它来进行网页性能的追踪，我们可以在入口文件中添加

if (process.env.NODE_ENV !== 'production') {
    Vue.config.performance = true;
}

来开启这一功能，该 API（2.2.0 新增）功能只适用于开发模式和支持 performance.mark API 的浏览器上，开启后我们可以下载 Vue Performance Devtool 这一 chrome 插件来看查看各个组件的加载情况，如图

• 从中我们可以清晰的看到页面组件在每个阶段的耗时情况，而针对耗时比较久的组件，我们便可以对其进行相应优化

而其在 Vue 源码中主要使用了 window.performance 来获取网页性能数据，其中包含了 performance.mark 和 performance.measure

• performance.mark 主要用于创建标记
• performance.measure 主要用于记录两个标记的时间间隔

performance.mark('start'); // 创建 start 标记
performance.mark('end'); // 创建 end 标记

performance.measure('output', 'start', 'end'); // 计算两者时间间隔

performance.getEntriesByName('output'); // 获取标记，返回值是一个数组，包含了间隔时间数据

熟练的使用 performance 我们可以查看并分析网页的很多数据，为我们项目优化提供保障。除了上述介绍的两个方法，我们还可以使用 performance.timing 来计算页面各个阶段的加载情况

# 使用 errorHandler 来捕获异常

在浏览器异常捕获的方法上，我们熟知的一般有：try ... catch 和 window.onerror，这也是原生 JavaScript 提供给我们处理异常的方式。但是在 Vue 2.x 中如果你一如既往的想使用 window.onerror 来捕获异常，那么其实你是捕获不到的，因为异常信息被框架自身的异常机制捕获了，你可以使用 errorHandler 来进行异常信息的获取

Vue.config.errorHandler = function (err, vm, info) {
    let { 
        message, // 异常信息
        name, // 异常名称
        stack  // 异常堆栈信息
    } = err;

    // vm 为抛出异常的 Vue 实例
    // info 为 Vue 特定的错误信息，比如错误所在的生命周期钩子
}

@前端

• 使用 performance 开启性能追踪
• 使用 errorHandler 来捕获异常
• 使用 nextTick 将回调延迟到下次 DOM 更新循环之后执行
• 使用 watch 的深度遍历和立即调用功能

← React Native学习之适配Android/IOS总结篇Vue之合理划分容器组件与展示组件 →