Vue.js 2.5新特性介紹(推薦)
TypeScript
TypeScript是一種由微軟開(kāi)發(fā)的自由和開(kāi)源的編程語(yǔ)言。它是JavaScript的一個(gè)超集，而且本質(zhì)上向這個(gè)語(yǔ)言添加了可選的靜態(tài)類(lèi)型和基于類(lèi)的面向?qū)ο缶幊獭?012年十月份，微軟發(fā)布了首個(gè)公開(kāi)版本的TypeScript，在2013年6月19日，微軟發(fā)布了TypeScript 0.9的正式版本，到目前為止，TypeScript已發(fā)展到2.x版本
安裝TypeScript
安裝TypeScript主要有兩種方式：
通過(guò)npm方式安裝（Node.js包管理器）
安裝TypeScript的Visual Studio插件
說(shuō)明：Visual Studio2016和Visual Studio 2013 Update 2默認(rèn)包含了TypeScript。npm安裝的命令如下：
npm install -g typescript
創(chuàng)建TypeScript文件
在編輯器中新建一個(gè)greeter.ts文件，并輸入以下JavaScript代碼：
function greeter(person) {
return "Hello, " + person;
}
var user = "Jane User";
document.body.innerHTML = greeter(user);
上面的代碼直接輸出“hello Jane User”。
編譯代碼
在在命令行中運(yùn)行TypeScript編譯器即可編譯代碼：
tsc greeter.ts
運(yùn)行TypeScript web程序
現(xiàn)在在greeter.html中輸入以下代碼：
<!DOCTYPE html> <html> <head><title>TypeScript Greeter</title></head> <body> <script src="greeter.js"></script> </body> </html>
在瀏覽器中打開(kāi)greeter.html即可去運(yùn)行第一個(gè)TypeScript web應(yīng)用程序demo！
Vue.js 2.5新特性
Vue 2.5 Level E 已發(fā)布，在原來(lái)2.x的基礎(chǔ)上做了很多相應(yīng)改進(jìn)和對(duì) bug 的修復(fù)，目前 2.5 系列最新的版本為 2.5.2。如果讀者希望全面的了解Vue 2.5的內(nèi)容，可以通過(guò)查看Vue 2.5發(fā)布說(shuō)明來(lái)獲取詳細(xì)的介紹。針對(duì)官方的介紹和網(wǎng)上搜集的資料，本次2.5版本主要做了如下幾方面的改進(jìn)：
更好的 TypeScript 集成
更好的錯(cuò)誤處理
更好地支持單文件組件中的功能組件
與環(huán)境無(wú)關(guān)的服務(wù)端渲染
讀者可以通過(guò)下面的鏈接查看原文介紹：
TypeScript 聲明改進(jìn)
further improve Vue type declarations for canonical usage (#6391) db138e2
錯(cuò)誤處理和報(bào)告
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
服務(wù)器端渲染
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改進(jìn)
自Vue2.0發(fā)布以來(lái)，一直有開(kāi)發(fā)者提出請(qǐng)求，希望能更好地集成TypeScript。從那時(shí)起，我們已經(jīng)為大多數(shù)核心庫(kù)（vue，vue - routervuex）加入了官方的TypeScript類(lèi)型聲明。然而，當(dāng)使用開(kāi)箱即用的Vue API時(shí)，目前的集成還是有所欠缺。例如：TypeScript不能輕易地推斷出Vue使用的默認(rèn)基于對(duì)象的API中的this類(lèi)型。為了使我們的Vue代碼與TypeScript更好地協(xié)作，我們需要使用vue-class-component裝飾器，它允許我們使用基于類(lèi)的語(yǔ)法來(lái)寫(xiě)Vue組件。
對(duì)于喜歡基于類(lèi)的API的用戶，這可能夠好了，但還是有點(diǎn)不足，只是為了類(lèi)型判斷，用戶就得使用不同的API。這也使得現(xiàn)有的Vue代碼庫(kù)遷移到TypeScript更加困難。
今年的早些時(shí)候，TypeScript引入了一些新特性，能使TypeScript更好地理解基于對(duì)象字面量的API，這也使得改進(jìn)Vue的類(lèi)型聲明更具可能。來(lái)自TypeScript團(tuán)隊(duì)的Daniel Rosenwasser發(fā)起了一個(gè)雄心勃勃的PR計(jì)劃。使用TypeScript后，將會(huì)有如下的好處：
使用默認(rèn)的Vue API時(shí)，對(duì)this的正確類(lèi)型推斷。在單文件組件中同樣有效！
基于組件的props配置的的props的類(lèi)型推斷。
更重要的是，這些改進(jìn)也會(huì)使原生JavaScript用戶受益！，如果你正在使用VSCode且安裝了優(yōu)秀的Vetur擴(kuò)展，在Vue組件中使用原生JavaScript時(shí)，你會(huì)獲得十分完善的自動(dòng)補(bǔ)全提示甚至是類(lèi)型提示！這是因?yàn)関ue-language-server，這個(gè)分析Vue組件的內(nèi)部包，可以利用TypeScript編譯器來(lái)提取關(guān)于你代碼的更多信息。此外，任何支持語(yǔ)言服務(wù)協(xié)議的的編輯器都可以利用vue-language-server來(lái)提供類(lèi)似的功能。
說(shuō)明：注意：TypeScript 用戶還應(yīng)將以下包更新為最新版本從而兼容類(lèi)型聲明：vue-router，vuex，vuex-router-sync 和 vue-class-component。
錯(cuò)誤提示
在2.4及更早版本中，通常使用全局 config.errorHandleroption 來(lái)處理應(yīng)用程序中的意外錯(cuò)誤。當(dāng)然，還可以使用renderError 組件選項(xiàng)來(lái)處理渲染函數(shù)中的錯(cuò)誤。
而在新版本中，vue引入了errorCaptured 鉤子，具有此鉤子的組件捕獲其子組件樹(shù)（不包括其自身）中的所有錯(cuò)誤（不包括在異步回調(diào)中調(diào)用的那些）。這和React的思想是一致的。
要利用 errorCaputerd，可以封裝一個(gè)通用組件，來(lái)包含其他的業(yè)務(wù)組件，來(lái)捕獲業(yè)務(wù)組件內(nèi)的異常，并做對(duì)應(yīng)的展示處理。下面列一個(gè)官方給的簡(jiǎn)單示例，封裝一個(gè)通用組件(ErrorBoundary)來(lái)包含和處理其他業(yè)務(wù)組件(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參數(shù)傳遞主要有如下的特性：
如果定義了全局的 errorHandler，所有的異常還是會(huì)傳遞給 errorHadnler，如果沒(méi)有定義
errorHandler，這些異常仍然可以報(bào)告給一個(gè)單獨(dú)的分析服務(wù)。
如果一個(gè)組件上通過(guò)繼承或父組件定義了多個(gè) errorCapured 鉤子函數(shù)，這些鉤子函數(shù)都會(huì)收到同樣的異常信息。
可以在 errorCapured 鉤子內(nèi) return false 來(lái)阻止異常傳播，表示：該異常已經(jīng)被處理，可忽略。而且，也會(huì)阻止其他的 errorCapured 鉤子函數(shù)和全局的 errorHandler 函數(shù)觸發(fā)這個(gè)異常。
SFC 函數(shù)式組件
通過(guò) vue-loader v13.3.0 或以上版本，支持在單文件組件內(nèi)定義一個(gè)“函數(shù)式組件”，且支持模板編譯、作用域 CSS 和 熱部署等功能。
函數(shù)式組件的定義，需要在 template 標(biāo)簽上定義 functional 屬性來(lái)聲明。且模板內(nèi)的表達(dá)式的執(zhí)行上下文是 函數(shù)式聲明上下文，所以要訪問(wèn)組件的屬性，需要使用 props.xxx 來(lái)獲取。例子見(jiàn)下：
<template functional>
<div>{{ props.msg }}</div>
</template>
與環(huán)境無(wú)關(guān)的服務(wù)端渲染（SSR 環(huán)境）
使用 vue-server-renderer 來(lái)構(gòu)建 SSR 應(yīng)用時(shí)，默認(rèn)是需要一個(gè) Node.js 環(huán)境的，使得一些像 php-v8js 或 Nashorn 這樣的 JavaScript 運(yùn)行環(huán)境下無(wú)法運(yùn)行。v2.5 中對(duì)此進(jìn)行了完善，使得上述環(huán)境下都可以正常運(yùn)行 SSR 應(yīng)用。
在 php-v8js 和 Nashorn 中，在環(huán)境的準(zhǔn)備階段需要模擬 global 和 process 全局對(duì)象，并且需要單獨(dú)設(shè)置 process 的環(huán)境變量。需要設(shè)置 process.env.VUE_ENV 為 “server”，設(shè)置 process.env.NODE_ENV 為 “development” 或 “production”。
另外，在 Nashorn 中，還需要用 Java 原生的 timers 為 Promise 和 settimeout 提供一個(gè) polyfill。官方給出了一個(gè)在 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 這款漸進(jìn)式的 JavaScript 框架自 2013 年發(fā)布至今，其簡(jiǎn)潔的語(yǔ)法設(shè)計(jì)、輕量快速的特點(diǎn)深受技術(shù)社區(qū)喜愛(ài)，在國(guó)內(nèi)外都獲得了非常廣泛的應(yīng)用及拓展，比如餓了么的開(kāi)源組件庫(kù) Element UI 即是 根據(jù)Vue 開(kāi)發(fā)的，而阿里巴巴的 Weex 與 Vue 也多有合作，而美團(tuán)點(diǎn)評(píng)的mpVue也是比較出色的一款框架。
v-on 修飾符
鍵值 key 自動(dòng)修飾符
在 Vue v2.5 之前的版本中，如果要在 v-on 中使用沒(méi)有內(nèi)置別名的鍵盤(pán)鍵值，要么直接使用 keyCode 當(dāng)修飾符（@keyup.13=”foo”），要么需要使用 config.keyCodes 來(lái)為鍵值注冊(cè)別名。在 v2.5中，你可以直接使用合法的鍵值 key 值（參考MDN中的 KeyboardEvent.key）作為修飾符來(lái)串聯(lián)使用它。如下：
<input @keyup.page-down="onPageDown">
上述例子中，事件處理函數(shù)只會(huì)在 $event.key === ‘PageDown' 時(shí)被調(diào)用。
注意：現(xiàn)有鍵值修飾符仍然可用。在IE9中，一些鍵值（.esc 和 方向鍵的 key）不是一致的值，如果要兼容 IE9，需要按 IE9 中內(nèi)置的別名來(lái)處理。
.exact 修飾符
新增了一個(gè) .exact 修飾符，該修飾符應(yīng)該和其他系統(tǒng)修飾符(.ctrl, .alt, .shift and .meta)結(jié)合使用，可用用來(lái)區(qū)分一些強(qiáng)制多個(gè)修飾符結(jié)合按下才會(huì)觸發(fā)事件處理函數(shù)。如下：
<!-- 當(dāng) Alt 或 Shift 被按下也會(huì)觸發(fā)處理函數(shù) --> <button @click.ctrl="onClick">A</button> <!-- 只有當(dāng) Ctrl 被按下，才會(huì)觸發(fā)處理函數(shù) --> <button @click.ctrl.exact="onCtrlClick">A</button>
簡(jiǎn)化 Scoped Slots 的使用
之前，如果要在 template 標(biāo)簽上使用 scope 屬性定義一個(gè) scoped slot，可以像下面這樣定義：
<comp>
<template scope="props">
<div>{{ props.msg }}</div>
</template>
</comp>
在 v2.5 中，scope 屬性已被棄用（仍然可用，但是會(huì)爆出一個(gè)警告，就像本文文首的那樣），我們使用 slot-scope 屬性替代 scope 屬性來(lái)表示一個(gè) scoped slot，且 slot-scope 屬性除了可以被用在 template 上，還可以用在標(biāo)簽元素和組件上。如下：
<comp>
<div slot-scope="props">
{{ props.msg }}
</div>
</comp>
注意：這次的調(diào)整，表示 slot-scope 已經(jīng)是一個(gè)保留屬性了，不能再被單獨(dú)用在組件屬性上了。
Inject 新增默認(rèn)值選項(xiàng)
本次調(diào)整中，Injections 可以作為可選配置，并且可以聲明默認(rèn)值。也可以用 from 來(lái)表示原屬性。
export default {
inject: {
foo: {
from: 'bar',
default: 'foo'
}
}
}
與屬性類(lèi)似，數(shù)組和對(duì)象的默認(rèn)值需要使用一個(gè)工廠函數(shù)返回。
export default {
inject: {
foo: {
from: 'bar',
default: () => [1, 2, 3]
}
}
}
總結(jié)
以上所述是小編給大家介紹的Vue.js 2.5新特性介紹，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
Vue調(diào)試工具vue-devtools的安裝與使用
vue-devtools是專(zhuān)門(mén)調(diào)試vue項(xiàng)目的調(diào)試工具,安裝成功之后,右邊會(huì)出現(xiàn)一個(gè)vue,就可以在線可以調(diào)試vue了,下面這篇文章主要給大家介紹了關(guān)于Vue調(diào)試工具vue-devtools的安裝與使用的相關(guān)資料,需要的朋友可以參考下2022-07-07
這篇文章主要介紹了vue之使用vuex進(jìn)行狀態(tài)管理詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
下面小編就為大家分享一篇解決vue頁(yè)面DOM操作不生效的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
vue+moment實(shí)現(xiàn)倒計(jì)時(shí)效果
這篇文章主要為大家詳細(xì)介紹了vue+moment實(shí)現(xiàn)倒計(jì)時(shí)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-08-08
vue中使用sass及解決sass-loader版本過(guò)高導(dǎo)致的編譯錯(cuò)誤問(wèn)題
這篇文章主要介紹了vue中使用sass及解決sass-loader版本過(guò)高導(dǎo)致的編譯錯(cuò)誤問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
淺談vue+vite項(xiàng)目部署會(huì)遇到的幾個(gè)問(wèn)題
本文主要介紹了vue+vite項(xiàng)目部署會(huì)遇到的幾個(gè)問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
vue+element tabs選項(xiàng)卡分頁(yè)效果
這篇文章主要為大家詳細(xì)介紹了vue+element tabs選項(xiàng)卡分頁(yè)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
這篇文章主要介紹了Vue3子組件向父組件傳遞消息,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-07-07
對(duì)于一個(gè)中后臺(tái)類(lèi)的項(xiàng)目,一個(gè)比較常見(jiàn)的展示形式就是Table了,這篇文章主要給大家介紹了關(guān)于Vue封裝通用table組件的相關(guān)資料,需要的朋友可以參考下2021-07-07
一步步從Vue3.x源碼上理解ref和reactive的區(qū)別
vue3的數(shù)據(jù)雙向綁定,大家都明白是proxy數(shù)據(jù)代理,但是在定義響應(yīng)式數(shù)據(jù)的時(shí)候,有ref和reactive兩種方式,如果判斷該使用什么方式,是大家一直不很清楚地問(wèn)題,下面這篇文章主要給大家介紹了關(guān)于從Vue3.x源碼上理解ref和reactive的區(qū)別的相關(guān)資料,需要的朋友可以參考下2023-02-02