ホームページ > 記事 > ウェブフロントエンド > Vue.js 2.5 の新機能の紹介

Vue.js 2.5 の新機能の紹介

小云云オリジナル: 2018-01-03 13:20:311667ブラウズ

Vue 2.5 レベル E がリリースされました。オリジナルの 2.x に基づいて多くの対応する改善とバグ修正が行われました。この記事では主に Vue の新機能について説明します。 .js 2.5 が皆さんのお役に立てば幸いです。

TypeScript は、Microsoft によって開発された無料のオープンソースプログラミング言語です。これは JavaScript のスーパーセットであり、基本的にオプションの静的型付けとクラスベースのオブジェクト指向プログラミングを言語に追加します。 2012 年 10 月、Microsoft は TypeScript の最初のパブリックバージョンをリリースしました。2013 年 6 月 19 日に、TypeScript はバージョン 2.x まで開発されました

TypeScript をインストールする方法は主に 2 つあります。 TypeScript をインストールするには:

npm (Node.js パッケージマネージャー) 経由でインストールします

TypeScript 用の Visual Studio プラグインをインストールします

注: Visual Studio 2016 および 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」を直接出力します。ジェーンユーザー」。

コードをコンパイルします

コマンドラインで TypeScript コンパイラーを実行してコードをコンパイルします:

tscgreeter.ts

TypeScript Web プログラムを実行します

次に、greeter.html に次のコードを入力します。ブラウザでgreeter.htmlを開いて、最初のTypeScript Webアプリケーションのデモを実行してください。

Vue.js 2.5 の新機能

Vue 2.5 レベル E がリリースされました。オリジナルの 2.x に基づいて、対応する多くの改善とバグ修正が行われました。現在、2.5 シリーズの最新バージョンは 2.5.2 です。 Vue 2.5 の内容を完全に理解したい場合は、Vue 2.5 リリースノートを参照して詳細な概要を確認できます。公式の紹介とオンラインで収集された情報に基づいて、この 2.5 バージョンでは主に次の改善が行われています:

TypeScript の統合の改善

エラー処理の改善

単一ファイルコンポーネントでの機能コンポーネントのサポートの改善

環境に依存しないサーバー側レンダリングの使用

読者は次のことを行うことができます元の紹介文は以下のリンクからご覧ください:

TypeScript 宣言の改善

正規使用のための Vue 型宣言のさらなる改善 (#6391) db138e2

エラー処理とレポート

新しい errorCaptured フック b3cd9bc によるエラー処理の改善 [詳細]

テンプレート式エラーメッセージ e38d006 を改善、クローズ #6771

オプションタイプチェックを改善 b7105ae

機能コンポーネント

機能コンポーネントのサポート用にコンパイルされたテンプレート ea0d227

機能コンポーネントのスコープ指定された CSS サポート 050 bb33

サーバー側レンダリングいます

renderToString は、コールバックが渡されない場合に Promise を返すようになりましたf881dd1、クローズ #6160

shouldPrefetch オプションを追加 ( shouldPreload と同じシグネチャ) 7bc899c、クローズ #5964

初期状態の自動削除埋め込みスクリプト (本番環境の場合) (# 6763) 2d32b5d、クローズ # 6761

現在、サーバーレンダラーの環境に依存しないビルドが vue-server-renderer/basic.jsc5d0fa0 で出荷されています。詳細

TypeScript の改善

Vue2.0 のリリース以来、開発者からのリクエストがあり、タイプスクリプト。それ以来、ほとんどのコアライブラリ (vue、vue-routervuex) に公式の TypeScript 型宣言を含めてきました。ただし、すぐに使える Vue API を使用する場合、現在の統合は不足しています。例: TypeScript は、Vue で使用されるデフォルトのオブジェクトベース API で this 型を簡単に推論できません。 Vue コードを TypeScript でより適切に動作させるには、vue-class-component デコレーターを使用する必要があります。これにより、クラスベースの構文を使用して Vue コンポーネントを作成できるようになります。

クラスベースの API を好むユーザーにとってはこれは良いかもしれませんが、型を判断するためだけに、ユーザーは別の API を使用する必要があります。これにより、既存の Vue コードベースを TypeScript に移行することも難しくなります。

今年の初めに、TypeScript がオブジェクトリテラルベースの API をよりよく理解できるようにするいくつかの新機能が導入されました。これにより、Vue の型宣言を改善することも可能になります。 TypeScript チームの Daniel Rosenwasser は、野心的な PR 計画を開始しました。 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)来包含和处理其他业务组件(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>
 <p>{{ props.msg }}</p>
</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(&#39;/path/to/vue.js&#39;);
$renderer_source = file_get_contents(&#39;/path/to/vue-server-renderer/basic.js&#39;);
$app_source = file_get_contents(&#39;/path/to/app.js&#39;);
$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: `<p>{{ msg }}</p>`,
 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">
 <p>{{ props.msg }}</p>
 </template>
</comp>

在 v2.5 中，scope 属性已被弃用（仍然可用，但是会爆出一个警告，就像本文文首的那样），我们使用 slot-scope 属性替代 scope 属性来表示一个 scoped slot，且 slot-scope 属性除了可以被用在 template 上，还可以用在标签元素和组件上。如下：

<comp>
 <p slot-scope="props">
 {{ props.msg }}
 </p>
</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 の新機能の紹介

関連記事