Vue.js 2.5新特性介绍(推荐)

以打字打的文件

TypeScript是微软开发的一种免费的开源编程语言。它是JavaScript的超集，本质上是给这种语言添加可选的静态类型和基于类的面向对象编程。2012年10月，微软发布了第一个公开版本的TypeScript。2013年6月19日，微软发布了TypeScript 0.9正式版。到目前为止，TypeScript已经发展到2.x版本。

安装类型脚本

安装TypeScript有两种主要方法：

通过npm安装

为类型脚本安装Visual Studio插件

说明：Visual Studio2016和Visual Studio 2013更新2默认包含TypeScript。npm安装的命令如下：

npm安装-g类型脚本

创建类型脚本文件

在编辑器中创建新的greeter.ts文件，并输入以下JavaScript代码：

函数迎宾员(person) {返回' Hello，' person；}var用户=' Jane Userdocument . body . innerhtml=greeter(用户)；上面的代码直接输出“你好，简用户”。

编译代码

您可以通过在命令行上运行TypeScript编译器来编译代码：

tsc迎宾员

运行TypeScript网络程序

现在在greeter.html中输入以下代码：

！doctype html html health script greater/title/head body script src=' http : greater . js '/script/body/html在浏览器中打开greeter.html运行第一个TypeScript web应用程序演示！

Vue.js 2.5的新特性

Vue 2.5 Level E已经发布，在原有2.X的基础上进行了很多相应的改进和bug修复，目前2.5系列的最新版本是2.5.2。如果读者想对Vue 2.5有一个全面的了解，可以通过查看Vue 2.5发行说明得到详细的介绍。根据官方介绍和网上收集到的信息，这个2.5版本做了如下改进：

更好的TypeScript集成、更好的错误处理、对单文件组件中的功能组件的更好支持，以及与环境无关的服务器呈现。读者可以通过以下链接查看原介绍：

TypeScript声明改进

进一步改进规范用法(#6391) db138e2的Vue类型声明

错误处理和报告

使用新的错误捕获挂钩b3cd9bc改进错误处理[详细信息]

改进模板表达式错误消息e38d006，关闭#6771

改进选项类型检查b7105ae

功能组件

功能组件支持ea0d227的编译模板

功能组件050bb33的作用域CSS支持

服务器端渲染

renderToString现在返回一个Promise，如果没有回调通过，关闭#6160

添加应预取选项(与应预加载相同的签名)7bc899c，关闭#5964

自动删除初始状态嵌入脚本如果在生产中(#6763) 2d32b5d，关闭#6761

现在在vue-server-renderer/basic . jsc5d 0 Fa0中附带一个与环境无关的服务器渲染器构建

打字稿的改进

自Vue2.0发布以来，开发人员一直要求更好地集成TypeScript。从那以后，我们为大多数核心库(vue，vue-routerveex)添加了官方的TypeScript类型声明。但是，当使用Vue API开箱即用时，目前的集成仍然缺乏。例如，TypeScript无法在Vue使用的默认基于对象的API中轻松推断出这种类型。为了让我们的vue代码更好地与TypeScript协作，我们需要使用vue-class-component decorator，它允许我们使用基于类的语法来编写Vue组件。

对于喜欢基于类的API的用户来说，这可以是好的，但是还是有一些缺点。对于类型判断，用户必须使用不同的API。这也使得将现有的Vue代码库迁移到TypeScript变得更加困难。

今年早些时候，TypeScript引入了一些新功能，这使得TypeScript能够更好地理解基于对象文字的API，这也使得改进Vue的类型声明成为可能。TypeScript团队的丹尼尔罗森瓦瑟发起了一项雄心勃勃的公关计划。使用TypeScript后，将有以下好处：

使用默认的Vue API时，推断出这种类型的正确。在单文件组件中也有效！

基于组件道具配置的道具类型推断。

更重要的是，这些改进也会让原生JavaScript用户受益！如果您正在使用VSCode并安装优秀的Vetur扩展，那么在Vue组件中使用原生JavaScript时，您将获得完美的自动完成提示甚至键入提示！这是因为用于分析Vue组件的内部包Vue-language-server可以使用TypeScript编译器来提取更多关于代码的信息。此外，任何支持语言服务协议的编辑器都可以使用vue-language-server提供类似的功能。

注意：TypeScript用户还应该将以下包更新到最新版本，以便与类型声明兼容：vue-router、vuex、vuex-router-sync和vue-class-component。

错误提示

在2.4和更早的版本中，全局config.errorHandleroption通常用于处理应用程序中的意外错误。当然，您也可以使用renderError组件选项来处理呈现函数中的错误。

在新版本中，vue引入了一个errorCaptured钩子，带有这个钩子的组件捕获其子组件树中的所有错误(不包括自身)(不包括异步回调中调用的那些错误)。这与React的想法是一致的。

为了利用errorCaputerd，您可以封装一个通用组件来包含其他业务组件，以捕获业务组件中的异常，并进行相应的显示处理。下面是政府给出的一个简单例子，它封装了一个通用组件(ErrorBoundary)来包含和处理其他业务组件的异常。

Vue.component('ErrorBoundary '，{ data: ()=({ error: null })，errorCaptured (err，vm，info){ this . error=` $ { err . stack } \ n \ n在组件的${info}中找到` return false '，{ render(h){ if(This . error){ return h(' pre '，{ style: { color: 'red' }}，This。错误)}//为了民主忽略边缘案例返回这个。$老虎机。默认值[0]} })Error-boundarynother-component//Error-boundaryerrcaptivate参数传递主要有以下特点：

如果定义了全局错误处理程序，所有异常仍将传递给错误处理程序。如果没有定义errorHandler，这些异常仍然可以报告给单独的分析服务。

如果通过继承或父组件在组件上定义了多个errorCapured钩子函数，这些钩子函数将接收相同的异常信息。您可以在errorCapured钩子中返回false，以防止异常扩散，这表明异常已经被处理，可以忽略。此外，它还将防止其他errorCapured钩子函数和全局errorHandler函数触发此异常。

SFC功能组件

使用vue-loader v13.3.0或更高版本，支持在单个文件组件中定义一个“功能组件”，并支持模板编译、范围CSS和热部署等功能。

功能组件的定义需要通过在模板标签上定义功能属性来声明。而模板中表达式的执行上下文是一个函数声明上下文，所以要访问组件的属性，需要使用props.xxx来获取。例子如下：

模板功能div { { props . msg } }/div/模板环境无关的服务器端呈现(SSR环境)

使用vue-server-renderer构建SSR应用程序时，默认需要Node.js环境，这使得php-v8js或Nashorn等一些JavaScript运行环境无法运行。在v2.5中对此进行了改进，使得SSR应用在上述环境下能够正常运行。

在php-v8js和Nashorn中，环境的准备阶段需要模拟全局和流程全局对象，流程的环境变量需要单独设置。将process.env.VUE_ENV设置为“服务器”，process.env.NODE_ENV设置为“开发”或“生产”。

此外，在Nashorn中，您需要使用Java本机计时器为Promise和settimeout提供一个polyfill。这位官员在php-v8js中给出了一个使用示例，如下所示：

？PHP $ vue _ source=file _ get _ contents('/path/to/vue . js ')；$ renderer _ source=file _ get _ contents('/path/to/vue-server-renderer/basic . js ')；$ app _ source=file _ get _ contents('/path/to/app . js ')；$v8=新的V8Js()；$ V8-ExecuteString(' var process={ en v : { VUE _ ENV: ' server '，NODE _ ENV: ' production ' } })；this . global={ process : process }；”);$ V8-ExecuteString($ vue _ source)；$ V8-ExecuteString($ renderer _ source)；$ V8-ExecuteString($ app _ source)；//app . jsvar VM=new Vue({ template : ` div { { msg } }/div `，data : { msg : ' hello ' })//由Vue-server-renderer/basic . jsrendevuecompenttostring(VM，(err，Res)={print(res)})公开的Vue.js是一个渐进式的JavaScript框架，从2013年开始发布。其简洁的语法设计、轻量级和快速的特性深受技术界的喜爱，并在国内外得到了广泛的应用和扩展。比如饿了么开源组件库Element UI就是根据Vue开发的，阿里巴巴的Weex和Vue有很多合作，美团点评的mpVue也是一个优秀的框架。

V-on修饰符

键值键自动修改器

在Vue v2.5之前的版本中，如果您想在v-on中使用没有内置别名的键盘键值，您应该直接使用keyCode作为修饰符(@ @keyup.13="foo ")或者使用config.keyCodes为键值注册别名。在v2.5中，可以直接使用合法键值(参考MDN中的KeyboardEvent.key)作为修饰符串联使用。如下所示：

input @ key up . page-down=' page down '在上面的示例中，只有在$ event.key===' page down '时才会调用事件处理程序。

注意：现有的关键修饰符仍然可用。在IE9中，一些关键值(。esc和方向键的键)不一致。如果你想和IE9兼容，就需要根据IE9内置的别名来处理它们。精确修饰语

全新的。添加了精确修饰符，它应该与其他系统修饰符(。ctrl，alt，轮班工作。meta)。它可以用来区分一些通过强制多个修饰符按在一起而触发的事件处理程序。如下所示：

！-当按下Alt或Shift时，处理功能也会被触发-button @ click . ctrl=' onclick ' a/button！-只有按下Ctrl键时才会触发处理功能-button @ click . Ctrl . exact=' onctrlclick ' a/button简化了Scoped Slots的使用

以前，如果希望使用模板标记上的scope属性定义一个作用域槽，可以按如下方式定义：

Comp模板作用域=' props ' div { { props . msg } }/div/template/comp在v2.5中，作用域属性已被弃用(它仍然可用，但会弹出一个警告，就像本文开头的警告一样)。我们使用slot-scope属性而不是scope属性来表示一个有作用域的slot，slot-scope属性不仅可以用在模板上，还可以用在标记元素和组件上。如下所示：

comp div slot-scope=' props ' { props . msg } }/div/comp注意：此调整表示slot-scope是保留属性，不能再单独用于组件属性。

注入添加默认值选项

在此调整中，进样可以用作可选配置，并且可以声明默认值。您也可以使用从来表示原始属性。

export default { inject : { foo : { from : ' bar '，default:' foo'}}类似于属性，数组和对象的默认值需要由工厂函数返回。

导出默认值的摘要{ inject : { foo : { from : ' bar '，default3360 ()=[1，2，3]}}

以上是边肖介绍的Vue.js 2.5的新特性介绍，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！