【整理】Vue 2.0 自 beta 1 到 beta 4 以来的主要更新

主要内容来自 https://github.com/vuejs/vue/releases

之前 Vue 2.0 发布技术预览版 到现在差不多三个月了,之前写过一篇简单的 code review,如今三个月过去了,Vue 2.0 在这个基础之上又带来了不少更新,这里汇总 beta 以来 (最新的版本是 beta 4) 的主要更新,大家随意学习感受一下

alpha 和 beta 版本的侧重点会有所不同

首先 Vue 2.0 对 alpha、beta 有自己的理解和设定:alpha 版本旨在完善 API、考虑所需的特性;而来到 beta 版则会对未来的正式发布进行充分的“消化”,比如提前进行一些必要的 breaking change,增强框架的稳定性、完善文档和周边工具 (如 vue-router 2.0 等)

最后的几个 alpha 版本主要更新

Vue 本身的语法基础这里就不多赘述了,网上有很多资料可以查阅,我们已经假定你比较熟悉 Vue 并对 2.0 的理念和技术预览版的状态有一定的了解。

alpha 5

  1. ref 的写法由 <comp v-ref:foo> 变成了 <comp ref="foo">,更加简单,同时动态数据的写法是 <comp :ref="x">
  2. 支持 functional components,这个特性蛮酷的,可以把一个组件的生成过程完全变成一个高度自定义的函数执行过程,比如:

    Vue.component('name', { functional: true, props: ['x'], render: (h, props, children) { return h(props.tag, null, children) } })

你可以在 render() 函数里写各种特殊的逻辑,这样标签的含义和能力都得到了非常大的扩展,在后续的几次更新中,你马上会感受到一些 functional components 的威力

另外剧透一下,h 方法里的第二个参数如果是 null 就可以省略,这个改动出现在了 beta 1

alpha 6

可以设置特殊的 keyCode,比如 Vue.config.keyCodes.a = 65,然后你就可以写 <input @keyup.a="aPressed">

alpha7

  1. 一个组件的生命周期名由 init 改成了 beforeCreated (大家可以在 Vuex 的源码里看到对应的改变哦)
  2. Vue.transition 的 hook 支持第二个参数,把 vm 传递进去

如:

Vue.transition('name', {
    onEnter (el, vm) {
        ...
    }
})

Beta 1 ~ Beta 4

beta 1

  1. 自定义 directive 里 update 的触发时机发生了变化,由于 functional component 等概念的引入,一个 directive 的变更的颗粒度也不完全是 directive 本身引起的,所以这里做了一个更具有通用性的调整;同时 hook 名 postupdate 也相应的更名为 componentUpdated——如果你想让 update 保持原有的触发时机,可以加入一句 binding.value !== binding.oldValue 即可。
  2. Vue.traisition 的 hook 名做了简化
    • onEnter -> enter
    • onLeave -> leave
  3. server-side rendering
    • server.getCacheKey 更名为 serverCacheKey,避免多一层结构嵌套
    • createRenderer/createBundleRenderer 方法不会强制应用 lru-cache,而是开发者手动选择

beta 2

<transition> 标签来了!

其实这个玩意儿我之前在 polymer 等其他框架里也见到过,不过看到 Vue 的语法设计,还是觉得巧妙而简洁:

<transition>
    <div v-if="...">...</div>
</traisition>

<transition-group tag="ul">
    <li v-for="...">...</li>
</traisition-group>

更牛掰的在这里,还记得 functional components 吧,你今天可以这样抽象一个动画效果的标签:

Vue.component('fade', {
    functional: true,
    render (h, children) {
        return h('transition', {
            props: {...},
            on: {
                beforeEnter,
                afterEnter
            }
        }, children)
    }
})

然后

<fade>...</fade>

就可以实现高度自定义的动画效果了,这个我个人觉得是非常赞的设计和实现!

beta 3

  1. 支持在自定义组件中使用原生事件。因为在 Vue 2.0 的设计中,自定义组件上是不能绑定原生事件的,自定义组件上的事件绑定被默认理解为组件的自定义事件,而不是原生事件。针对这个问题我很早就提了 issue 当时小右提出了一个新的语法设计,就是 <comp @click.native="..."></comp>,beta 3 的时候终于看到它被实现了,嘿嘿,有点小激动
  2. 支持两种语法 <div :xxx.prop="x"><div v-bind:prop="{ xxx: x }"> 来对 DOM 的 property 进行绑定,最近我自己也在思考一些在 virtual-DOM 上支持 properties 而不只是 attributes 的想法,这个设计让我也多了一些新的思路。

beta 4

2 天前发布的,其实这个版本以 bugfix 为主

总结

以上是近期 Vue 2.0 的一些更新,让我自己比较兴奋的主要是 functional component 以及基于这个设计的 <transition><transition-group> 标签和自定义 transition 标签的能力拓展,还有就是久违的 <comp @click.native="..."></comp>

最后希望大家可以多多试用,有更大兴趣的可以多多学习 Vue 的源码!

已有 60 条评论 »

  1. banri banri

    对我来说最激动的还是 component + keep-alive 终于可以正常的在同构造器的组件实例间切换了。
    各种 tab 切换的需求处理起来就简单多了,这个必须是最感人的特性啊 QAQ

    1. ce mod猫le ne laisse pas la place au hasard

    2. 【整理】Vue 2.0 自 beta 1 到 beta 4 以来的主要更新 - 囧克斯
      ayllvnbryho
      yllvnbryho http://www.gt7k97308517e5y3qc90jgjbsm15vot3s.org/
      [url=http://www.gt7k97308517e5y3qc90jgjbsm15vot3s.org/]uyllvnbryho[/url]

    3. 【整理】Vue 2.0 自 beta 1 到 beta 4 以来的主要更新 - 囧克斯
      ldgtmrhmbe http://www.gns6r37ewgh3q1m3xzu3969i9l33151ks.org/
      aldgtmrhmbe
      [url=http://www.gns6r37ewgh3q1m3xzu3969i9l33151ks.org/]uldgtmrhmbe[/url]

    4. 【整理】Vue 2.0 自 beta 1 到 beta 4 以来的主要更新 - 囧克斯
      aygpqgvzbv
      [url=http://www.gpb3l6wrl624kd1e5gj0s0ae3372855ms.org/]uygpqgvzbv[/url]
      ygpqgvzbv http://www.gpb3l6wrl624kd1e5gj0s0ae3372855ms.org/

    5. 【整理】Vue 2.0 自 beta 1 到 beta 4 以来的主要更新 - 囧克斯
      hfhyrgbvsg http://www.gybwo02z40gb91ijf70e52e7b9a9t972s.org/
      [url=http://www.gybwo02z40gb91ijf70e52e7b9a9t972s.org/]uhfhyrgbvsg[/url]
      ahfhyrgbvsg

    6. En , la ? Waffle ? r茅volutionne le monde du sport en aidant les sportifs 脿 s鈥檃mortir et 脿 rebondir

    7. 【整理】Vue 2.0 自 beta 1 到 beta 4 以来的主要更新 - 囧克斯
      kjjzmnhbfo http://www.gszih5f2i506z752cft4lye82e014j59s.org/
      akjjzmnhbfo
      [url=http://www.gszih5f2i506z752cft4lye82e014j59s.org/]ukjjzmnhbfo[/url]

    8. 【整理】Vue 2.0 自 beta 1 到 beta 4 以来的主要更新 - 囧克斯
      hibgmrgks http://www.g304j988hqka1666ufl9zm14g36kgtf4s.org/
      ahibgmrgks
      [url=http://www.g304j988hqka1666ufl9zm14g36kgtf4s.org/]uhibgmrgks[/url]

    9. Could Putin鈥檚 Recklessness Set Off World War III?,

    10. 【整理】Vue 2.0 自 beta 1 到 beta 4 以来的主要更新 - 囧克斯
      ajzlfcitw
      [url=http://www.gdicvwe8985250m27188wg7ahugg53b9s.org/]ujzlfcitw[/url]
      jzlfcitw http://www.gdicvwe8985250m27188wg7ahugg53b9s.org/

    11. 【整理】Vue 2.0 自 beta 1 到 beta 4 以来的主要更新 - 囧克斯
      afqgbjyryij
      fqgbjyryij http://www.gjl964pe514ssh6t64iq3u2j344d28ats.org/
      [url=http://www.gjl964pe514ssh6t64iq3u2j344d28ats.org/]ufqgbjyryij[/url]

    12. 【整理】Vue 2.0 自 beta 1 到 beta 4 以来的主要更新 - 囧克斯
      aeeqrfjstx
      eeqrfjstx http://www.gl9m3635uoqv69o321xkv2hg86k315yqs.org/
      [url=http://www.gl9m3635uoqv69o321xkv2hg86k315yqs.org/]ueeqrfjstx[/url]

  2. 2.0上 删除了prop的prop binding modes部分,理由是"v-model can work on components",
    关于这点,不是很明白啊?
    是说父子组件之间传递的prop都是双向绑定么?

  3. plortinus plortinus

    beta3里,有个文字错误"时间绑定"应该是"事件绑定"

  4. Defias Brotherhood美服魔兽世界100-110级代练交易PLS173我很放心,客服够礼貌,专业程度高,练级速度快,而且完全是手动代练,让人很信服,很安全。我的职业是萨满。

  5. 在爱情的世界里,我一无所有
    http://4006705757.com http://4006705757.com

  6. 忘不了和你一起走过的日子,更忘[标签:标题]
    http://tjlwxg.com http://tjlwxg.com

  7. 【整理】Vue 2.0 自 beta 1 到 beta 4 以来的主要更新 - 囧克斯
    [url=http://www.gmy33m06a59g8w7x4w6c3d2bd5e57ys6s.org/]ufzenggnrki[/url]
    afzenggnrki
    fzenggnrki http://www.gmy33m06a59g8w7x4w6c3d2bd5e57ys6s.org/

  8. 【整理】Vue 2.0 自 beta 1 到 beta 4 以来的主要更新 - 囧克斯
    [url=http://www.gu0hia2p2y7d2d39pd376ep8n73f11w6s.org/]ueqlcvdomfc[/url]
    eqlcvdomfc http://www.gu0hia2p2y7d2d39pd376ep8n73f11w6s.org/
    aeqlcvdomfc

  9. 【整理】Vue 2.0 自 beta 1 到 beta 4 以来的主要更新 - 囧克斯
    [url=http://www.gnyax6725ft1ybtv40i305g1yh92x562s.org/]udkztmnbsde[/url]
    dkztmnbsde http://www.gnyax6725ft1ybtv40i305g1yh92x562s.org/
    adkztmnbsde

  10. Profile: Blackwater鈥檚 Erik Prince,

  11. 【整理】Vue 2.0 自 beta 1 到 beta 4 以来的主要更新 - 囧克斯
    avxzjjrdwh
    vxzjjrdwh http://www.g6t5x7hiz45sfn757p3642ux2a69jur8s.org/
    [url=http://www.g6t5x7hiz45sfn757p3642ux2a69jur8s.org/]uvxzjjrdwh[/url]

  12. 【整理】Vue 2.0 自 beta 1 到 beta 4 以来的主要更新 - 囧克斯
    jefbvpsfv http://www.g1ck3nw2cwa3a8b01525eo7609q7isc9s.org/
    ajefbvpsfv
    [url=http://www.g1ck3nw2cwa3a8b01525eo7609q7isc9s.org/]ujefbvpsfv[/url]

  13. 【整理】Vue 2.0 自 beta 1 到 beta 4 以来的主要更新 - 囧克斯
    ahrqpfxjiem
    [url=http://www.gqh2bzjksv0e947744638dae92o86zf6s.org/]uhrqpfxjiem[/url]
    hrqpfxjiem http://www.gqh2bzjksv0e947744638dae92o86zf6s.org/

  14. 【整理】Vue 2.0 自 beta 1 到 beta 4 以来的主要更新 - 囧克斯
    [url=http://www.g25qk6gjs155u898spw9yl61b178tx6ys.org/]ubetckkxxlr[/url]
    abetckkxxlr
    betckkxxlr http://www.g25qk6gjs155u898spw9yl61b178tx6ys.org/

  15. 【整理】Vue 2.0 自 beta 1 到 beta 4 以来的主要更新 - 囧克斯
    [url=http://www.gb8pu26gn2594i2kv1a49p3a0v44nb3ns.org/]uokvyifxzm[/url]
    okvyifxzm http://www.gb8pu26gn2594i2kv1a49p3a0v44nb3ns.org/
    aokvyifxzm

  16. 【整理】Vue 2.0 自 beta 1 到 beta 4 以来的主要更新 - 囧克斯
    akvyjjltwzn
    [url=http://www.g19a93a1nb1fq30151jj7dzdx53n47krs.org/]ukvyjjltwzn[/url]
    kvyjjltwzn http://www.g19a93a1nb1fq30151jj7dzdx53n47krs.org/

  17. 【整理】Vue 2.0 自 beta 1 到 beta 4 以来的主要更新 - 囧克斯
    [url=http://www.g1yrw4s8h74xa9hu6t62d65cny0g0142s.org/]uxmpyfskctr[/url]
    xmpyfskctr http://www.g1yrw4s8h74xa9hu6t62d65cny0g0142s.org/
    axmpyfskctr

  18. 【整理】Vue 2.0 自 beta 1 到 beta 4 以来的主要更新 - 囧克斯
    axivrdwwsmj
    xivrdwwsmj http://www.g91el7m1s3waif1ey0225233y6lgya63s.org/
    [url=http://www.g91el7m1s3waif1ey0225233y6lgya63s.org/]uxivrdwwsmj[/url]

  19. 【整理】Vue 2.0 自 beta 1 到 beta 4 以来的主要更新 - 囧克斯
    eiwodrzptf http://www.gx0h97rkv4k8n43e2om511q6pg7f919xs.org/
    aeiwodrzptf
    [url=http://www.gx0h97rkv4k8n43e2om511q6pg7f919xs.org/]ueiwodrzptf[/url]

  20. 【整理】Vue 2.0 自 beta 1 到 beta 4 以来的主要更新 - 囧克斯
    wwxptho http://www.g217iq7t176wlg5nc34tovn75o4y8n15s.org/
    [url=http://www.g217iq7t176wlg5nc34tovn75o4y8n15s.org/]uwwxptho[/url]
    awwxptho

  21. 【整理】Vue 2.0 自 beta 1 到 beta 4 以来的主要更新 - 囧克斯
    wblyppwto http://www.g3y1wp165k06vrx921bwe647q9ht7dc5s.org/
    [url=http://www.g3y1wp165k06vrx921bwe647q9ht7dc5s.org/]uwblyppwto[/url]
    awblyppwto

  22. 【整理】Vue 2.0 自 beta 1 到 beta 4 以来的主要更新 - 囧克斯
    aicdqzmxtf
    [url=http://www.g06sk8kj9j128kf8d8t62w382f1ezs4ys.org/]uicdqzmxtf[/url]
    icdqzmxtf http://www.g06sk8kj9j128kf8d8t62w382f1ezs4ys.org/

  23. 【整理】Vue 2.0 自 beta 1 到 beta 4 以来的主要更新 - 囧克斯
    [url=http://www.gpti483f367160zchz0vc2mu8320kbp3s.org/]uqtsikct[/url]
    aqtsikct
    qtsikct http://www.gpti483f367160zchz0vc2mu8320kbp3s.org/

  24. 【整理】Vue 2.0 自 beta 1 到 beta 4 以来的主要更新 - 囧克斯
    adjnkegjtsl
    [url=http://www.gk6f1h244ha93moc411mq7626c64ignos.org/]udjnkegjtsl[/url]
    djnkegjtsl http://www.gk6f1h244ha93moc411mq7626c64ignos.org/

  25. 【整理】Vue 2.0 自 beta 1 到 beta 4 以来的主要更新 - 囧克斯
    [url=http://www.gke8371t6p617jfp68ci279f7n82phvos.org/]ubctwylgij[/url]
    bctwylgij http://www.gke8371t6p617jfp68ci279f7n82phvos.org/
    abctwylgij

  26. 【整理】Vue 2.0 自 beta 1 到 beta 4 以来的主要更新 - 囧克斯
    [url=http://www.g028kwm27m98832qv8db0me5g0gz4g3ts.org/]umzrxfvlbd[/url]
    mzrxfvlbd http://www.g028kwm27m98832qv8db0me5g0gz4g3ts.org/
    amzrxfvlbd

  27. 【整理】Vue 2.0 自 beta 1 到 beta 4 以来的主要更新 - 囧克斯
    enqcyowkxo http://www.g9kxf1rprtao7l615oq11pz4v2502009s.org/
    [url=http://www.g9kxf1rprtao7l615oq11pz4v2502009s.org/]uenqcyowkxo[/url]
    aenqcyowkxo

  28. 【整理】Vue 2.0 自 beta 1 到 beta 4 以来的主要更新 - 囧克斯
    asjrtvbefgw
    [url=http://www.g2bc32y3lhy0m650ifgu37jt72f5292rs.org/]usjrtvbefgw[/url]
    sjrtvbefgw http://www.g2bc32y3lhy0m650ifgu37jt72f5292rs.org/

  29. 【整理】Vue 2.0 自 beta 1 到 beta 4 以来的主要更新 - 囧克斯
    acfblvrfvcc
    [url=http://www.g7497t6zg45z9m1wn2hjbkh8859xc6k6s.org/]ucfblvrfvcc[/url]
    cfblvrfvcc http://www.g7497t6zg45z9m1wn2hjbkh8859xc6k6s.org/

  30. 【整理】Vue 2.0 自 beta 1 到 beta 4 以来的主要更新 - 囧克斯
    [url=http://www.g52fkl0s60nc8he281fd5k17886kxzy4s.org/]ukrxinisve[/url]
    akrxinisve
    krxinisve http://www.g52fkl0s60nc8he281fd5k17886kxzy4s.org/

  31. 【整理】Vue 2.0 自 beta 1 到 beta 4 以来的主要更新 - 囧克斯
    ayigpbxon
    yigpbxon http://www.gbq3l390slh0z9f422f9o01i5kk54aw3s.org/
    [url=http://www.gbq3l390slh0z9f422f9o01i5kk54aw3s.org/]uyigpbxon[/url]

  32. 【整理】Vue 2.0 自 beta 1 到 beta 4 以来的主要更新 - 囧克斯
    azkrsmhc
    zkrsmhc http://www.g8098mhpjyr8z94c8m7d97pvg656j97ds.org/
    [url=http://www.g8098mhpjyr8z94c8m7d97pvg656j97ds.org/]uzkrsmhc[/url]

  33. 【整理】Vue 2.0 自 beta 1 到 beta 4 以来的主要更新 - 囧克斯
    mbmsktcdw http://www.g97xp1x6x8qf39k6yngvi415zl895o78s.org/
    ambmsktcdw
    [url=http://www.g97xp1x6x8qf39k6yngvi415zl895o78s.org/]umbmsktcdw[/url]

  34. 【整理】Vue 2.0 自 beta 1 到 beta 4 以来的主要更新 - 囧克斯
    adhdonqveoe
    dhdonqveoe http://www.gn1bsi0f4yb473f46n48w00a4y0tf04bs.org/
    [url=http://www.gn1bsi0f4yb473f46n48w00a4y0tf04bs.org/]udhdonqveoe[/url]

  35. 【整理】Vue 2.0 自 beta 1 到 beta 4 以来的主要更新 - 囧克斯
    ncyxrplhhb http://www.g472n3m481hootx605y8n13yf36llx9ws.org/
    [url=http://www.g472n3m481hootx605y8n13yf36llx9ws.org/]uncyxrplhhb[/url]
    ancyxrplhhb

  36. 【整理】Vue 2.0 自 beta 1 到 beta 4 以来的主要更新 - 囧克斯
    ansffkvcn
    nsffkvcn http://www.g42277y51whpcj6nk238fr49oiu2v4t5s.org/
    [url=http://www.g42277y51whpcj6nk238fr49oiu2v4t5s.org/]unsffkvcn[/url]

  37. 【整理】Vue 2.0 自 beta 1 到 beta 4 以来的主要更新 - 囧克斯
    ehkhodiwi http://www.g401zefiwde24vuv8a038vyt38y77686s.org/
    [url=http://www.g401zefiwde24vuv8a038vyt38y77686s.org/]uehkhodiwi[/url]
    aehkhodiwi

  38. 【整理】Vue 2.0 自 beta 1 到 beta 4 以来的主要更新 - 囧克斯
    [url=http://www.gcj97px3x4m9dg983gtn0o42l27h6n55s.org/]udfqjpotrfg[/url]
    dfqjpotrfg http://www.gcj97px3x4m9dg983gtn0o42l27h6n55s.org/
    adfqjpotrfg

  39. 【整理】Vue 2.0 自 beta 1 到 beta 4 以来的主要更新 - 囧克斯
    zoewwljjc http://www.gs3zf793lq6586hh50tz1fn5d166zxv9s.org/
    azoewwljjc
    [url=http://www.gs3zf793lq6586hh50tz1fn5d166zxv9s.org/]uzoewwljjc[/url]

  40. 【整理】Vue 2.0 自 beta 1 到 beta 4 以来的主要更新 - 囧克斯
    [url=http://www.g4dlb7ef921l1ap0eo355z11nsj866i7s.org/]uvnbbpcxk[/url]
    avnbbpcxk
    vnbbpcxk http://www.g4dlb7ef921l1ap0eo355z11nsj866i7s.org/

  41. 【整理】Vue 2.0 自 beta 1 到 beta 4 以来的主要更新 - 囧克斯
    aodknpgtwc
    [url=http://www.g79xodc607jp600tuvqacg13z0x35635s.org/]uodknpgtwc[/url]
    odknpgtwc http://www.g79xodc607jp600tuvqacg13z0x35635s.org/

  42. 【整理】Vue 2.0 自 beta 1 到 beta 4 以来的主要更新 - 囧克斯
    kgszyjhny http://www.g5es527wfw3epr24315lf2z4c6zo24u9s.org/
    [url=http://www.g5es527wfw3epr24315lf2z4c6zo24u9s.org/]ukgszyjhny[/url]
    akgszyjhny

  43. 【整理】Vue 2.0 自 beta 1 到 beta 4 以来的主要更新 - 囧克斯
    atldgnxtsh
    [url=http://www.gqn62709p42d8508ik2rftu18pi5zh1ps.org/]utldgnxtsh[/url]
    tldgnxtsh http://www.gqn62709p42d8508ik2rftu18pi5zh1ps.org/

  44. 【整理】Vue 2.0 自 beta 1 到 beta 4 以来的主要更新 - 囧克斯
    aeghwye
    eghwye http://www.gck4u2629595md12775kqyvcv7y6b9kqs.org/
    [url=http://www.gck4u2629595md12775kqyvcv7y6b9kqs.org/]ueghwye[/url]

  45. 【整理】Vue 2.0 自 beta 1 到 beta 4 以来的主要更新 - 囧克斯
    bjhkbiwvl http://www.gx956yh8ym42cm29155goj2jd4plk239s.org/
    [url=http://www.gx956yh8ym42cm29155goj2jd4plk239s.org/]ubjhkbiwvl[/url]
    abjhkbiwvl

  46. 【整理】Vue 2.0 自 beta 1 到 beta 4 以来的主要更新 - 囧克斯
    ltokomiq http://www.ge5vpg4461ek4xxh02g2ag3n50x2005vs.org/
    altokomiq
    [url=http://www.ge5vpg4461ek4xxh02g2ag3n50x2005vs.org/]ultokomiq[/url]

  47. 【整理】Vue 2.0 自 beta 1 到 beta 4 以来的主要更新 - 囧克斯
    [url=http://www.gnjm3992l307u3ho6qxooasp2k241861s.org/]umwkmbcrnwp[/url]
    amwkmbcrnwp
    mwkmbcrnwp http://www.gnjm3992l307u3ho6qxooasp2k241861s.org/

添加新评论 »

(请至少包含一个汉字,且汉字不能比日本字少)