vue 开发2017年变化回顾及2018年展望

vue.js 变化

从 github 的发布记录我们可以看到2017年 vue.js 的第一个发布为 v2.1.9，最后一个为 v2.5.13，主要发布小版本 2.2~2.5。这些发布提升了vue 与 TypeScript 的结合、改进了对服务端渲染（SSR）和 native 渲染的支持、提供了更好的测试、开发体验及其他的一些功能与优化。

vue@2.2 变化

1）使用 v-for 必须要添加 key 属性。

2）单文件组件(SFC)标签需要闭合，尽管 html5 中标签没有闭合也是有效的。

3）prop 属性和 computed 属性定义在组件的原型上，而不是作为每个实例自身的属性。

4）更好的错误处理 Vue.config.errorHandler

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

在 2.2.0+，这个钩子函数可以捕获组件生命周期钩子中产生的错误，如果这个函数为 undefined，捕获的错误将会使用 console.error 打印出来而不会使应用崩溃。

在 2.4.0+，也会捕获 vue 自定义事件的 handler 中抛出的错误。

错误追踪服务如 Sentry 和 Bugsnag 提供了和这个选项的官方集成。

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

6）服务端渲染改进

7）组件自定义 v-model

自定义组件允许使用 v-model 时自定义属性和事件，默认使用 value 属性和 input 事件。

8）provide 和 inject

9）vm.$props

可以通过 this.$props 获取组件当前属性

10）和支持 duration 属性

11）性能分析 Vue.config.performance

12）keep-alive 增加 activated 和 deactivated 钩子函数

13）vm.$on 支持多事件

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

15）使用驼峰风格属性将会警告（实际上单文件组件并没有此问题，因为会自动转化为短横线分隔式命名）

vue@2.3 变化

1）许多重要的服务端渲染的改进，发布了 ssr guide。

2）异步组件改进、函数式组件改进

3）.sync 修饰符回归。不过只是一个简单的语法糖，:foo.sync 等价于 :foo="bar" @update:foo="val => var = val"，子组件更新 foo 的值时，需要明确地触发事件：

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

4）Vue.config.errorHandler 支持自定义指令和 nextTick 回调中抛出的错误

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

6）属性验证支持 type: Symbol

7）style 绑定支持数组

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

vue@2.4 变化

1）完全的服务端渲染 + 异步组件支持。这意味着在服务端渲染中异步组件/代码分割不再局限于路由级别。

2）inheritAttrs 选项和 $attrs, $listeners

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

3）v-on 支持对象

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

4）增加 comments 选项

默认 false，设置为 true 时，将会保留 tempalte 里面的 html 注释

5）服务端渲染性能提升了2~8倍（取决于你的组件可以优化多少）

vue@2.5 变化

1）增加 errorCaptured 钩子来增强错误处理

2）TypeScript 声明改进

3）函数式组件改进

template 支持函数式组件

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

4）v-on 改进

添加了 .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>