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 :-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>
key 修饰符, 如:
<input @keyup.page-down="onPageDown">
5)简化的 scoped slot
6)nextTick 内部实现改变
在 v-on 内绑定的事件处理函数中的 DOM 更新延迟由 micro task 改成了 macro task
vue-router 变化
1)传递属性给路由组件
在组件中使用 $route 耦合性非常强, 通过传递属性的方式可以解耦, 大大增强组件的灵活性.
2)组件内的钩子函数 beforeRouteUpdate
使用这个钩子函数, 可以不用像之前那样必须 watch $route
3)router.addRoutes
动态添加路由的利器
4)router.push() 和 router.replace() 支持可选的第二个回调参数 (onComplete) 和第三个回调参数(onAbort)
5)导航的 next 函数支持接收一个错误作为参数
6)新的 router guard 方法 router.beforeResolve()
7)新的路由实例选项 fallback
控制路由当浏览器不支持 history.pushState 时是否 fallback 到 hash 模式. 当服务端渲染需要兼容 ie9 时, 设置为 false, 因为服务端渲染不能使用 hash 路由模式, 而 ie9 不支持 history.pushState.
8)当浏览器支持 history.pushState 时, hash 模式也可以支持 scrollBehavior, 同时这个函数也支持返回 Promise.
9)发布了 v3.x, 主要是为了兼容 TypeScript.
vuex
vuex 没有大的变化, 有添加一下方法. 和 vue-router 一样发布了 v3.x, 也是为了兼容 TypeScript.
2018 展望
vue 3.x
2018 年很有可能发布 Vue 3, 这个版本只支持长期更新的浏览器, 如 Edge, 不会支持 IE. 主要改变的是 vue.js 内部, 外部 api 会尽量 100% 兼容. 对于低版本浏览器, 可以使用 vue 2.x, 因为 2.x 和 3.x 将会同时维护. 查看计划
vue-cli 3.x
vue-cli 2.x 暴露了一堆配置, 对新手很不友好, 更重要是这样很难直观地知道项目相对于默认配置的修改, 而且这些配置直接从 github 拉取下来, 也没有版本的概念.
vue-cli 3.x 将会只暴露一个配置的 js 文件, 并且会预设很多默认配置, 可能会类似于 Nuxt.js, 具体 查看讨论
vue-devtools 4.x(已发布)
新发布的 vue-devtools 比上一个版本强大了很多, 支持从页面中选择组件, Inspect DOM, 过滤观察的 data/state 等, 直接编辑 data 等.
服务端渲染
随着 Nuxt 1.0 正式版本的发布, 相信接下来很多公司都会将其用于部分对 SEO 有要求的官网页面.
移动端
weex 和 nativescript-vue 被越来越多的公司用于生产环境了, 但是成熟度, 流行程度相对于 react 的 react-native 有一段距离. ios11.3 也支持了 Service Workers, 也许接下来 PWA 会很流行?
style guide
目前官方只发布了 beta 的 style guide, 接下来可能会发布正式版, 配合 eslint-plugin-vue 让我们写出更好的 vue 代码.
来源: https://www.cnblogs.com/ang-/p/8371330.html