Vuev2.5调整和更新不完全问题-创新互联

Vue 2.5 Level E 发布了： 新功能特性一览

近日，Vue v2.5 发布，除了对 TypeScript 的更好的支持外，还有一些功能和语法的调整，你需要了解。本文，不谈 TypeScript，只对一些主要的调整进行说明。

本来，对 Vue 的版本升级不怎么敏感，所以没有太关注最近的 v2.5 的发布。今天，在重新下载 Vue 构建项目的时候，发现有好几个警告提示。

看警告提示，知道是因为使用了 v2.5 的 Vue，scoped slot 的语法进行了调整，然后去 GitHub 上查看了 v2.5 的 release 才知道，v2.5 中已经不建议使用 scope 属性了，推荐使用 slot-scope 属性来设置上下文。

将代码中的 scope=”scope” 修改为 slot-scope=”scope”。如下图。

进入正题，下面列一写 Vue v2.5 中的主要更新和调整。

使用 errorCaptured 钩子来处理组件内异常

在 v2.5 之前，可以用个全局的 config.errorHandler 设置来为应用提供一个处理未知异常的函数，也可以设置 renderError 组件来处理 render 函数内的异常。但是，这些都不能提供一个完整的机制来处理一个单独组件内的异常。

v2.5 中，组件内提供了一个新的钩子函数 errorCaptured，可以捕获该组件内所有子组件树中（不含自身）产生的所有的异常（包括异步调用中的异常），这个钩子函数接收的参数和 errorHandler 一样，可以让开发者更加友好地处理组件内异常。

如果你了解 React 的话，会发现这个特性和 React v16 中引进的“异常边界（Error Boundary）”的概念非常相似，都是为了更好的处理和展示单个组件在渲染的过程中异常。本公众号和知乎专栏之前的文章有专门介绍 React 的异常边界的概念，点击传送门进行查看。

要利用 errorCaputerd，可以封装一个通用组件，来包含其他的业务组件，来捕获业务组件内的异常，并做对应的展示处理。下面列一个官方给的简单示例，封装一个通用组件(ErrorBoundary)来包含和处理其他业务组件(another component)的异常。

Vue.component('ErrorBoundary', {
 data: () => ({ error: null }),
 errorCaptured (err, vm, info) { 
 this.error = `${err.stack}\n\nfound in ${info} of component`
 return false
 },
 render (h) { 
 if (this.error) { 
 return h('pre', { style: { color: 'red' }}, this.error)
 } 
 // ignoring edge cases for the sake of demonstration
 return this.$slots.default[0]
 }
})

 

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。