Vue v2.5 調(diào)整和更新不完全問(wèn)題

Vue 2.5 Level E 發(fā)布了： 新功能特性一覽

近日，Vue v2.5 發(fā)布，除了對(duì) TypeScript 的更好的支持外，還有一些功能和語(yǔ)法的調(diào)整，你需要了解。本文，不談 TypeScript，只對(duì)一些主要的調(diào)整進(jìn)行說(shuō)明。

本來(lái)，對(duì) Vue 的版本升級(jí)不怎么敏感，所以沒(méi)有太關(guān)注最近的 v2.5 的發(fā)布。今天，在重新下載 Vue 構(gòu)建項(xiàng)目的時(shí)候，發(fā)現(xiàn)有好幾個(gè)警告提示。

看警告提示，知道是因?yàn)槭褂昧?v2.5 的 Vue，scoped slot 的語(yǔ)法進(jìn)行了調(diào)整，然后去 GitHub 上查看了 v2.5 的 release 才知道，v2.5 中已經(jīng)不建議使用 scope 屬性了，推薦使用 slot-scope 屬性來(lái)設(shè)置上下文。

將代碼中的 scope=”scope” 修改為 slot-scope=”scope”。如下圖。

進(jìn)入正題，下面列一寫 Vue v2.5 中的主要更新和調(diào)整。

使用 errorCaptured 鉤子來(lái)處理組件內(nèi)異常

在 v2.5 之前，可以用個(gè)全局的 config.errorHandler 設(shè)置來(lái)為應(yīng)用提供一個(gè)處理未知異常的函數(shù)，也可以設(shè)置 renderError 組件來(lái)處理 render 函數(shù)內(nèi)的異常。但是，這些都不能提供一個(gè)完整的機(jī)制來(lái)處理一個(gè)單獨(dú)組件內(nèi)的異常。

v2.5 中，組件內(nèi)提供了一個(gè)新的鉤子函數(shù) errorCaptured，可以捕獲該組件內(nèi)所有子組件樹中（不含自身）產(chǎn)生的所有的異常（包括異步調(diào)用中的異常），這個(gè)鉤子函數(shù)接收的參數(shù)和 errorHandler 一樣，可以讓開發(fā)者更加友好地處理組件內(nèi)異常。

如果你了解 React 的話，會(huì)發(fā)現(xiàn)這個(gè)特性和 React v16 中引進(jìn)的“異常邊界（Error Boundary）”的概念非常相似，都是為了更好的處理和展示單個(gè)組件在渲染的過(guò)程中異常。本公眾號(hào)和知乎專欄之前的文章有專門介紹 React 的異常邊界的概念，點(diǎn)擊傳送門進(jìn)行查看。

要利用 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 的傳遞行為特性

• 如果定義了全局的 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è)異常。
  

單文件組件支持“函數(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)單例子見(jiàn)下：

<template functional>
 <div>{{ props.msg }}</div>
</template>

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)
})

v-on 修飾符

鍵值 key 自動(dòng)修飾符

在 Vue v2.5 之前的版本中，如果要在 v-on 中使用沒(méi)有內(nèi)置別名的鍵盤鍵值，要么直接使用 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'
 }
 }
}

與屬性類似，數(shù)組和對(duì)象的默認(rèn)值需要使用一個(gè)工廠函數(shù)返回。

export default {
 inject: {
 foo: {
 from: 'bar',
 default: () => [1, 2, 3]
 }
 }
}

總結(jié)

以上所述是小編給大家介紹的Vue v2.5 調(diào)整和更新不完全問(wèn)題，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)億速云網(wǎng)站的支持！