溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容介紹了“Vue.js2.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.js2.5有什么新特性”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
