博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
vue 开发2017年变化回顾及2018年展望
阅读量:6708 次
发布时间:2019-06-25

本文共 3143 字,大约阅读时间需要 10 分钟。

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 中抛出的错误。

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

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

6)服务端渲染改进

7)组件自定义 v-model

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

8)provide 和 inject

9)vm.$props

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

10)<transition> 和 <transition-group> 支持 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)许多重要的服务端渲染的改进,发布了 。

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 绑定支持数组

vue@2.4 变化

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

2)inheritAttrs 选项和 $attrs, $listeners

3)v-on 支持对象

4)增加 comments 选项

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

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

vue@2.5 变化

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

2)TypeScript 声明改进

3)函数式组件改进

template 支持函数式组件

4)v-on 改进

添加了 .exact 修饰符

key 修饰符,如:

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

你可能感兴趣的文章
【Eclipse】eclipse中设置tomcat启动时候的JVM参数
查看>>
国际化环境下系统架构演化
查看>>
openlayers入门开发系列之批量叠加zip压缩SHP图层篇
查看>>
Javascript调用Webservice的多种方法 .
查看>>
Linux 启动、关闭、重启网络服务
查看>>
Sublime Text 相关
查看>>
深入理解css优先级
查看>>
android的armeabi和armeabi-v7a
查看>>
android自己定义控件系列教程-----仿新版优酷评论剧集卡片滑动控件
查看>>
lvs之 lvs+nginx+tomcat_1、tomcat_2+redis(lvs dr 模式)
查看>>
让“是男人就下到100层”在Android平台上跑起来
查看>>
hdu4292Food(最大流Dinic算法)
查看>>
webdriver API study
查看>>
【Machine Learning in Action --4】朴素贝叶斯过滤网站的恶意留言
查看>>
Ubuntu+Eclipse+ADT+Genymotion+VirtualBox开发环境搭建
查看>>
Android 学习之 开源项目PullToRefresh的使用
查看>>
Matplot中文乱码完美解决方式
查看>>
tomcat的webappclassloader中一个奇怪的异常信息
查看>>
漫谈程序猿系列:群星闪耀的黄金时代
查看>>
2016百度编程题:蘑菇阵
查看>>