Vue.js 2.5新特性介绍(推荐)
TypeScript
TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。2012年十月份，微软发布了首个公开版本的TypeScript，在2013年6月19日，微软发布了TypeScript 0.9的正式版本，到目前为止，TypeScript已发展到2.x版本
安装TypeScript
安装TypeScript主要有两种方式：
通过npm方式安装（Node.js包管理器）
安装TypeScript的Visual Studio插件
说明：Visual Studio2016和Visual Studio 2013 Update 2默认包含了TypeScript。npm安装的命令如下：
npm install -g typescript
创建TypeScript文件
在编辑器中新建一个greeter.ts文件，并输入以下JavaScript代码：
function greeter(person) {
return "Hello, " + person;
}
var user = "Jane User";
document.body.innerHTML = greeter(user);
上面的代码直接输出“hello Jane User”。
编译代码
在在命令行中运行TypeScript编译器即可编译代码：
tsc greeter.ts
运行TypeScript web程序
现在在greeter.html中输入以下代码：
<!DOCTYPE html> <html> <head><title>TypeScript Greeter</title></head> <body> <script src="greeter.js"></script> </body> </html>
在浏览器中打开greeter.html即可去运行第一个TypeScript web应用程序demo！
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 声明改进
further improve Vue type declarations for canonical usage (#6391) db138e2
错误处理和报告
improve error handling with new errorCaptured hook b3cd9bc [Details]
improve template expression error message e38d006, closes #6771
improve option type checks b7105ae
功能组件
compiled templates for functional component support ea0d227
scoped CSS support for functional components 050bb33
服务器端渲染
renderToString now returns a Promise if no callback is passedf881dd1, closes #6160
add shouldPrefetch option (same signature as shouldPreload) 7bc899c, closes #5964
auto-remove initial state embed script if in production (#6763) 2d32b5d, closes #6761
now ships an environment-agnostic build of the server renderer in vue-server-renderer/basic.jsc5d0fa0 Details
TypeScript改进
自Vue2.0发布以来，一直有开发者提出请求，希望能更好地集成TypeScript。从那时起，我们已经为大多数核心库（vue，vue - routervuex）加入了官方的TypeScript类型声明。然而，当使用开箱即用的Vue API时，目前的集成还是有所欠缺。例如：TypeScript不能轻易地推断出Vue使用的默认基于对象的API中的this类型。为了使我们的Vue代码与TypeScript更好地协作，我们需要使用vue-class-component装饰器，它允许我们使用基于类的语法来写Vue组件。
对于喜欢基于类的API的用户，这可能够好了，但还是有点不足，只是为了类型判断，用户就得使用不同的API。这也使得现有的Vue代码库迁移到TypeScript更加困难。
今年的早些时候，TypeScript引入了一些新特性，能使TypeScript更好地理解基于对象字面量的API，这也使得改进Vue的类型声明更具可能。来自TypeScript团队的Daniel Rosenwasser发起了一个雄心勃勃的PR计划。使用TypeScript后，将会有如下的好处：
使用默认的Vue API时，对this的正确类型推断。在单文件组件中同样有效！
基于组件的props配置的的props的类型推断。
更重要的是，这些改进也会使原生JavaScript用户受益！，如果你正在使用VSCode且安装了优秀的Vetur扩展，在Vue组件中使用原生JavaScript时，你会获得十分完善的自动补全提示甚至是类型提示！这是因为vue-language-server，这个分析Vue组件的内部包，可以利用TypeScript编译器来提取关于你代码的更多信息。此外，任何支持语言服务协议的的编辑器都可以利用vue-language-server来提供类似的功能。
说明：注意：TypeScript 用户还应将以下包更新为最新版本从而兼容类型声明：vue-router，vuex，vuex-router-sync 和 vue-class-component。
错误提示
在2.4及更早版本中，通常使用全局 config.errorHandleroption 来处理应用程序中的意外错误。当然，还可以使用renderError 组件选项来处理渲染函数中的错误。
而在新版本中，vue引入了errorCaptured 钩子，具有此钩子的组件捕获其子组件树（不包括其自身）中的所有错误（不包括在异步回调中调用的那些）。这和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]
}
})
<error-boundary>
<another-component />
</error-boundary>
errorCaputed参数传递主要有如下的特性：
如果定义了全局的 errorHandler，所有的异常还是会传递给 errorHadnler，如果没有定义
errorHandler，这些异常仍然可以报告给一个单独的分析服务。
如果一个组件上通过继承或父组件定义了多个 errorCapured 钩子函数，这些钩子函数都会收到同样的异常信息。
可以在 errorCapured 钩子内 return false 来阻止异常传播，表示：该异常已经被处理，可忽略。而且，也会阻止其他的 errorCapured 钩子函数和全局的 errorHandler 函数触发这个异常。
SFC 函数式组件
通过 vue-loader v13.3.0 或以上版本，支持在单文件组件内定义一个“函数式组件”，且支持模板编译、作用域 CSS 和 热部署等功能。
函数式组件的定义，需要在 template 标签上定义 functional 属性来声明。且模板内的表达式的执行上下文是 函数式声明上下文，所以要访问组件的属性，需要使用 props.xxx 来获取。例子见下：
<template functional>
<div>{{ props.msg }}</div>
</template>
与环境无关的服务端渲染（SSR 环境）
使用 vue-server-renderer 来构建 SSR 应用时，默认是需要一个 Node.js 环境的，使得一些像 php-v8js 或 Nashorn 这样的 JavaScript 运行环境下无法运行。v2.5 中对此进行了完善，使得上述环境下都可以正常运行 SSR 应用。
在 php-v8js 和 Nashorn 中，在环境的准备阶段需要模拟 global 和 process 全局对象，并且需要单独设置 process 的环境变量。需要设置 process.env.VUE_ENV 为 “server”，设置 process.env.NODE_ENV 为 “development” 或 “production”。
另外，在 Nashorn 中，还需要用 Java 原生的 timers 为 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 = new V8Js();
$v8->executeString('var process = { env: { VUE_ENV: "server", NODE_ENV: "production" }}; this.global = { process: process };');
$v8->executeString($vue_source);
$v8->executeString($renderer_source);
$v8->executeString($app_source);
?>
// app.js
var vm = new Vue({
template: `<div>{{ msg }}</div>`,
data: {
msg: 'hello'
}
})
// exposed by vue-server-renderer/basic.js
renderVueComponentToString(vm, (err, res) => {
print(res)
})
Vue.js 这款渐进式的 JavaScript 框架自 2013 年发布至今，其简洁的语法设计、轻量快速的特点深受技术社区喜爱，在国内外都获得了非常广泛的应用及拓展，比如饿了么的开源组件库 Element UI 即是 根据Vue 开发的，而阿里巴巴的 Weex 与 Vue 也多有合作，而美团点评的mpVue也是比较出色的一款框架。
v-on 修饰符
键值 key 自动修饰符
在 Vue v2.5 之前的版本中，如果要在 v-on 中使用没有内置别名的键盘键值，要么直接使用 keyCode 当修饰符（@keyup.13=”foo”），要么需要使用 config.keyCodes 来为键值注册别名。在 v2.5中，你可以直接使用合法的键值 key 值（参考MDN中的 KeyboardEvent.key）作为修饰符来串联使用它。如下：
<input @keyup.page-down="onPageDown">
上述例子中，事件处理函数只会在 $event.key === ‘PageDown' 时被调用。
注意：现有键值修饰符仍然可用。在IE9中，一些键值（.esc 和 方向键的 key）不是一致的值，如果要兼容 IE9，需要按 IE9 中内置的别名来处理。
.exact 修饰符
新增了一个 .exact 修饰符，该修饰符应该和其他系统修饰符(.ctrl, .alt, .shift and .meta)结合使用，可用用来区分一些强制多个修饰符结合按下才会触发事件处理函数。如下：
<!-- 当 Alt 或 Shift 被按下也会触发处理函数 --> <button @click.ctrl="onClick">A</button> <!-- 只有当 Ctrl 被按下，才会触发处理函数 --> <button @click.ctrl.exact="onCtrlClick">A</button>
简化 Scoped Slots 的使用
之前，如果要在 template 标签上使用 scope 属性定义一个 scoped slot，可以像下面这样定义：
<comp>
<template scope="props">
<div>{{ props.msg }}</div>
</template>
</comp>
在 v2.5 中，scope 属性已被弃用（仍然可用，但是会爆出一个警告，就像本文文首的那样），我们使用 slot-scope 属性替代 scope 属性来表示一个 scoped slot，且 slot-scope 属性除了可以被用在 template 上，还可以用在标签元素和组件上。如下：
<comp>
<div slot-scope="props">
{{ props.msg }}
</div>
</comp>
注意：这次的调整，表示 slot-scope 已经是一个保留属性了，不能再被单独用在组件属性上了。
Inject 新增默认值选项
本次调整中，Injections 可以作为可选配置，并且可以声明默认值。也可以用 from 来表示原属性。
export default {
inject: {
foo: {
from: 'bar',
default: 'foo'
}
}
}
与属性类似，数组和对象的默认值需要使用一个工厂函数返回。
export default {
inject: {
foo: {
from: 'bar',
default: () => [1, 2, 3]
}
}
}
总结
以上所述是小编给大家介绍的Vue.js 2.5新特性介绍，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
相关推荐
-
Vue 2.5 Level E 发布了： 新功能特性一览
我们很高兴宣布 Vue 2.5 Level E 的发布!本次发布包括多个功能提升并且我们推荐你查看发布说明来获取完整详细信息. 在这篇文章中,我们将重点介绍一些更重要的的变化:更好的 TypeScript 集成,更好的错误处理,更好地支持单文件组件中的函数式组件以及与环境无关的服务端渲染. 更好的 TypeScript 集成 得益于 TypeScript 团队的帮助,2.5 提供了大大改进的类型声明,可以与 Vue 的开箱即用的 API 一起使用,而不需要组件类装饰器. 新的类型声明还可以让 V
-
Vue v2.5 调整和更新不完全问题
Vue 2.5 Level E 发布了: 新功能特性一览 近日,Vue v2.5 发布,除了对 TypeScript 的更好的支持外,还有一些功能和语法的调整,你需要了解.本文,不谈 TypeScript,只对一些主要的调整进行说明. 本来,对 Vue 的版本升级不怎么敏感,所以没有太关注最近的 v2.5 的发布.今天,在重新下载 Vue 构建项目的时候,发现有好几个警告提示. 看警告提示,知道是因为使用了 v2.5 的 Vue,scoped slot 的语法进行了调整,然后去 GitHub 上
-
Vue.js 2.5新特性介绍(推荐)
TypeScript TypeScript是一种由微软开发的自由和开源的编程语言.它是JavaScript的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程.2012年十月份,微软发布了首个公开版本的TypeScript,在2013年6月19日,微软发布了TypeScript 0.9的正式版本,到目前为止,TypeScript已发展到2.x版本 安装TypeScript 安装TypeScript主要有两种方式: 通过npm方式安装(Node.js包管理器) 安装TypeS
-
vue.js加载新的内容(实例代码)
vue是一种轻巧便捷的框架,那么如何进行对于数据加载的刷新呢?以下就是我对于vue.js数据加载的一点想法 源码: <div @scroll="onScroll($event)" style="height: 100%;overflow: auto;"> <ul class="shop-brand-index" v-show="sitems.length > 0" > <li v-for=&
-
Hibernate5新特性介绍
在hibernate5中,有了一些新的变动: 新引导 API Spatial/GIS 支持 Java 8 支持 扩展 AUTO id 生成支持 命名策略分离 属性转换器支持 更好的 "bulk id table" 支持 事务管理 模式工具链 Session API类化 改进 OSGi 支持 改进 bytecode 增强功能 新的引导API 用来引导Hibernate(建立一个SessionFactory)的经典方式一直都是利用Configuration配置类.从
-
ES6中非常实用的新特性介绍
ECMAScript 6离我们越来越近了,作为它最重要的方言,Javascript也即将迎来语法上的重大变革,InfoQ特开设"深入浅出ES6"专栏,来看一下ES6将给我们带来哪些新内容. 写在前面 ES6 已经提交给 Ecma 大会审查了,也就是说,我们将迎来一大波 javascript 的最新标准,还有一些语法糖.ES6 中有很多值得我们关注的东西,下面是我发现的一些我们最常用的一些新特性,进行记录一下. 1. for-of循环 这个东西用来循环数组很爽,原因呢,是因为它弥补了目前
-
Vue.js组件间通信方式总结【推荐】
平时在使用Vue框架的业务开发中,组件不仅仅要把模板的内容进行复用,更重要的是组件之间要进行通信.组件之间通信分为三种:父-子:子-父:跨级组件通信.下面,就组件间如何通信做一些总结. 1.父组件到子组件通过props通信 在组件中,使用选项props来声明需要从父级组件接受的数据,props的值可以是两种:一种是字符串数组,一种是对象.props中声明的数据与组件data函数return的主要区别在于props来自父级,而data中的组件是自己的数据,作用域是组件本身,这两种数据都可以在模板t
-
webpack 4.0.0-beta.0版本新特性介绍
近年来前端技术如雨后春笋般蓬勃发展,我们也在这个潮流下不断地学习.成长.前端技术的不断发展,给我们提供了许多的便利.例如:JSX的出现为我们提供了一个清晰.直观的方式来描述组件树,LESS/SASS的出现提高了我们书写css的能力,AMD/CommonJS/ES6 的出现为我们模块化开发提供了便利.然而,我们需要使用其它工具将这些工具转化成原生语言以运行在浏览器上.为了能够更好的将这些不同的资源整合到一起,我们就需要一个打包工具,webpack就是这个需求下的产物. webpack 可以看做是模
-
JS基于ES6新特性async await进行异步处理操作示例
本文实例讲述了JS基于ES6新特性async await进行异步处理操作.分享给大家供大家参考,具体如下: 我们往往在项目中会遇到这样的业务需求,就是首先先进行一个ajax请求,然后再进行下一个ajax请求,而下一个请求需要使用上一个请求得到的数据,请求少了还好说,如果多了,就要一层一层的嵌套,就好像有点callback的写法了,那是相当恶心的,下面我就来讲一下如何使用ES6的新特性async await进行异步处理,使上述情况就好像写同步代码一样,首先我们先举个例子: 先写上json文件: c
-
Typescript3.9 常用新特性一览(推荐)
更新什么?概况一览 1.优化了 Promise.all 的定义,在 3.7 版本中一些混用 null 或 undefined 的时候的问题已经在 3.9 得到了修复. 2.大大的提高了打包速度,微软团队自测的时候 typescript项目的平均编译时间由 26s 缩短到了 10s 左右. 3.// @ts-expect-error 新注释的添加 4.在条件语句中检测未调用的函数 5.编辑器提升 5.1 在 JavaScript 中 CommonJS 的自动引入 5.2 在代码操作的时候正确的保留
-
Java 17的一些新特性介绍
目录 前言 Java 17中的Sealed 密封类 Java 17提供了更好的随机生成器 Java对增强安全性的关注 Pattern Matching For Switch预览 前言 Java17将是一个长期支持的LTS版本. Java采用了6个月的发布周期.也就是说,它将每6个月发布一个新版本的Java.每隔3年,LTS版本就会发布一次.目前,Java 11是LTS版本,于2018年9月发布.但在Java17发布后,它将是最新的LTS支持. 许多组织依赖LTS版本,所以他们使用的是Java11
-
Netbeans 8.2与PHP相关的新特性介绍
Netbeans 8.2在这个国庆期间终于发布了,其与PHP相关的新特性主要有: 支持PHP 7 详见前面翻译的一篇文章:Netbeans 8.2将支持PHP 7 编辑器功能增强 文档好像没有明确说明,我也还没有发现. PHP项目支持自定义注解 操作如下图: 然后,当你在编写代码注解时,就可以得到刚才自定义的注解提示支持. 支持Symfony 3 没什么人Care吧. 支持PHPUnit 5 PHPUnit 5系列版本已经是基于PHP命名空间化重构的版本了. 支持 phpcs.xml 配置文件