vue.js 變化

從 github 的發(fā)布記錄我們可以看到2017年 vue.js 的第一個(gè)發(fā)布為 v2.1.9，最后一個(gè)為 v2.5.13，主要發(fā)布小版本 2.2~2.5。這些發(fā)布提升了vue 與 TypeScript 的結(jié)合、改進(jìn)了對(duì)服務(wù)端渲染（SSR）和 native 渲染的支持、提供了更好的測(cè)試、開(kāi)發(fā)體驗(yàn)及其他的一些功能與優(yōu)化。

vue@2.2 變化

1）使用 v-for 必須要添加 key 屬性。

2）單文件組件(SFC)標(biāo)簽需要閉合，盡管 html5 中標(biāo)簽沒(méi)有閉合也是有效的。

3）prop 屬性和 computed 屬性定義在組件的原型上，而不是作為每個(gè)實(shí)例自身的屬性。

4）更好的錯(cuò)誤處理 Vue.config.errorHandler

vue.config.errorHandler = function(err, vm, info) { // handle error}

在 2.2.0+，這個(gè)鉤子函數(shù)可以捕獲組件生命周期鉤子中產(chǎn)生的錯(cuò)誤，如果這個(gè)函數(shù)為 undefined，捕獲的錯(cuò)誤將會(huì)使用 console.error 打印出來(lái)而不會(huì)使應(yīng)用崩潰。

在 2.4.0+，也會(huì)捕獲 vue 自定義事件的 handler 中拋出的錯(cuò)誤。

錯(cuò)誤追蹤服務(wù)如?Sentry?和?Bugsnag?提供了和這個(gè)選項(xiàng)的官方集成。

5）Vue.util 中暴露的一些方法和屬性被移除了。

6）服務(wù)端渲染改進(jìn)

7）組件自定義 v-model

自定義組件允許使用 v-model 時(shí)自定義屬性和事件，默認(rèn)使用 value 屬性和 input 事件。

8）provide 和 inject

9）vm.$props

可以通過(guò) this.$props 獲取組件當(dāng)前屬性

10）和?支持 duration 屬性

11）性能分析 Vue.config.performance

12）keep-alive 增加 activated 和 deactivated 鉤子函數(shù)

13）vm.$on 支持多事件

14）v-on 支持新的 mouse event 修飾符 .left, .right, .middle

15）使用駝峰風(fēng)格屬性將會(huì)警告（實(shí)際上單文件組件并沒(méi)有此問(wèn)題，因?yàn)闀?huì)自動(dòng)轉(zhuǎn)化為短橫線分隔式命名）

vue@2.3 變化

1）許多重要的服務(wù)端渲染的改進(jìn)，發(fā)布了?ssr guide。

2）異步組件改進(jìn)、函數(shù)式組件改進(jìn)

3）.sync 修飾符回歸。不過(guò)只是一個(gè)簡(jiǎn)單的語(yǔ)法糖，:foo.sync 等價(jià)于 :foo="bar" @update:foo="val => var = val"，子組件更新 foo 的值時(shí)，需要明確地觸發(fā)事件：

this.$emit('update:foo', newValue)

4）Vue.config.errorHandler 支持自定義指令和 nextTick 回調(diào)中拋出的錯(cuò)誤

5）v-on 支持 .passive 修飾符

6）屬性驗(yàn)證支持 type: Symbol

7）style 綁定支持?jǐn)?shù)組

<div :style="{ display: ["-webkit-box", "-ms-flexbox", "flex"] }">

vue@2.4 變化

1）完全的服務(wù)端渲染 + 異步組件支持。這意味著在服務(wù)端渲染中異步組件/代碼分割不再局限于路由級(jí)別。

2）inheritAttrs 選項(xiàng)和 $attrs, $listeners

<div><input v-bind="$attrs" v-on="$listeners"> </div>

3）v-on 支持對(duì)象

<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

4）增加 comments 選項(xiàng)

默認(rèn) false，設(shè)置為 true 時(shí)，將會(huì)保留 tempalte 里面的 html 注釋

5）服務(wù)端渲染性能提升了2~8倍（取決于你的組件可以優(yōu)化多少）

vue@2.5 變化

1）增加 errorCaptured 鉤子來(lái)增強(qiáng)錯(cuò)誤處理

2）TypeScript 聲明改進(jìn)

3）函數(shù)式組件改進(jìn)

template 支持函數(shù)式組件

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

4）v-on 改進(jìn)

添加了 .exact 修飾符

<!-- this will fire even if Alt or Shift is also pressed --><button @click.ctrl="onClick">A</button><!-- this will only fire when only Ctrl is pressed --><button @click.ctrl.exact="onCtrlClick">A</button>

key 修飾符，如：

<input @keyup.page-down="onPageDown">

5）簡(jiǎn)化的 scoped slot

6）nextTick 內(nèi)部實(shí)現(xiàn)改變

在 v-on 內(nèi)綁定的事件處理函數(shù)中的 DOM 更新延遲由 micro task 改成了 macro task

vue-router 變化

1）傳遞屬性給路由組件

在組件中使用 $route 耦合性非常強(qiáng)，通過(guò)傳遞屬性的方式可以解耦，大大增強(qiáng)組件的靈活性。

2）組件內(nèi)的鉤子函數(shù) beforeRouteUpdate

使用這個(gè)鉤子函數(shù)，可以不用像之前那樣必須 watch $route

3）router.addRoutes

動(dòng)態(tài)添加路由的利器

4）router.push() 和 router.replace() 支持可選的第二個(gè)回調(diào)參數(shù)（onComplete）和第三個(gè)回調(diào)參數(shù)（onAbort）

5）導(dǎo)航的 next 函數(shù)支持接收一個(gè)錯(cuò)誤作為參數(shù)

6）新的 router guard 方法 router.beforeResolve()

7）新的路由實(shí)例選項(xiàng) fallback

控制路由當(dāng)瀏覽器不支持 history.pushState 時(shí)是否 fallback 到 hash 模式。當(dāng)服務(wù)端渲染需要兼容 ie9 時(shí)，設(shè)置為 false，因?yàn)榉?wù)端渲染不能使用 hash 路由模式，而 ie9 不支持 history.pushState。

8）當(dāng)瀏覽器支持 history.pushState 時(shí)，hash 模式也可以支持 scrollBehavior，同時(shí)這個(gè)函數(shù)也支持返回 Promise。

9）發(fā)布了 v3.x，主要是為了兼容 TypeScript。

vuex

vuex 沒(méi)有大的變化，有添加一下方法。和 vue-router 一樣發(fā)布了 v3.x，也是為了兼容 TypeScript。

2018 展望

vue 3.x

2018年很有可能發(fā)布 Vue 3，這個(gè)版本只支持長(zhǎng)期更新的瀏覽器，如 Edge，不會(huì)支持 IE。主要改變的是 vue.js 內(nèi)部，外部 api 會(huì)盡量 100% 兼容。對(duì)于低版本瀏覽器，可以使用 vue 2.x，因?yàn)?.x 和 3.x 將會(huì)同時(shí)維護(hù)。查看計(jì)劃

vue-cli 3.x

vue-cli 2.x 暴露了一堆配置，對(duì)新手很不友好，更重要是這樣很難直觀地知道項(xiàng)目相對(duì)于默認(rèn)配置的修改，而且這些配置直接從 github 拉取下來(lái)，也沒(méi)有版本的概念。

vue-cli 3.x 將會(huì)只暴露一個(gè)配置的 js 文件，并且會(huì)預(yù)設(shè)很多默認(rèn)配置，可能會(huì)類似于 Nuxt.js，具體查看討論

vue-devtools 4.x(已發(fā)布)

新發(fā)布的 vue-devtools 比上一個(gè)版本強(qiáng)大了很多，支持從頁(yè)面中選擇組件、Inspect DOM、過(guò)濾觀察的 data/state 等，直接編輯 data 等。

服務(wù)端渲染

隨著 Nuxt 1.0 正式版本的發(fā)布，相信接下來(lái)很多公司都會(huì)將其用于部分對(duì) SEO 有要求的官網(wǎng)頁(yè)面。

移動(dòng)端

weex 和 nativescript-vue 被越來(lái)越多的公司用于生產(chǎn)環(huán)境了，但是成熟度、流行程度相對(duì)于 react 的 react-native 有一段距離。ios11.3 也支持了 Service Workers，也許接下來(lái) PWA 會(huì)很流行？

style guide

目前官方只發(fā)布了 beta 的 style guide，接下來(lái)可能會(huì)發(fā)布正式版，配合 eslint-plugin-vue 讓我們寫(xiě)出更好的 vue 代碼。

原文地址:https://www.cnblogs.com/ang-/p/8371330.html

---

.NET社區(qū)新聞，深度好文，歡迎訪問(wèn)公眾號(hào)文章匯總 http://www.csharpkit.com

總結(jié)

以上是生活随笔為你收集整理的vue 开发2017年变化回顾及2018年展望的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。